How can I tell inside an angular 2 component, which HTML div is sounding it?

[Ofer Gal]

I am using the same component in 2 different places in a parent component 

Each instance is sounded by a DIV with different ID 

In the component, I need to know the div ID to determine the data source for it.

Is there like in jQuery a Parent of the current component I can get the ID with?

Thanks

[Manish Pal]

why not pass that as input to the component, instead of the component trying to reach out to it's parent to find it ?

[Ofer Gal]

Not sure I understand.

Say the HTML on the parent component has the first child embedded like this:

          <div id="theFirstgrid" >

              <docs-grid ></docs-grid>

          </div>

and the second like this:

          <div id="theSecondgrid" >

              <docs-grid ></docs-grid>

          </div>

How can I tell the component who's selector is 'docs-grid' that it was embedded in the div "theFirstgrid" and not "theSecondgrid"

--
You received this message because you are subscribed to a topic in the Google Groups "AngularJS" group.
To unsubscribe from this topic, visit https://groups.google.com/d/topic/angular/npj82d_7n9w/unsubscribe.
To unsubscribe from this group and all its topics, send an email to angular+u...@googlegroups.com.
To post to this group, send email to ang...@googlegroups.com.
Visit this group at https://groups.google.com/group/angular.
For more options, visit https://groups.google.com/d/optout.

--

Ofer Gal


---------------------------------------------------------------------
לפני הפצת שרשרת, נא מחקו את שמי וכתובתי מהדוא"ל,
 כדי שהפרטים לא יגיעו לחורשי מרעין בישין ברחבי האינטרנט

 

[Ofer Gal]

Not sure I understand.

Say the HTML on the parent component has the first child embedded like this:

          <div id="theFirstgrid" >

              <docs-grid ></docs-grid>

          </div>

and the second like this:

          <div id="theSecondgrid" >

              <docs-grid ></docs-grid>

          </div>

How can I tell the component who's selector is 'docs-grid' that it was embedded in the div "theFirstgrid" and not "theSecondgrid"

[Manish Pal]

 <div id="theFirstgrid" >

              <docs-grid [forParent]="'theFirstgrid'"></docs-grid>

          </div>

 <div id="theSecondgrid" >

              <docs-grid [forParent]="'theSecondgrid'"></docs-grid>

          </div>

[Sander Elias]

Hi Ofer,

What Manish is trying to tell you is that you can put a argument on your doc-grid element so you don't have to query the DOM.

While it is technically possible to do what you ask, I would advise against it. Why? you might ask. Well, a couple of reasons.

Firstly, separation of concerns. Your  way of doing this, is putting part of the business logic into the template. Even worse, something that no one might notice will have an significant meaning (namely the place your component is put).

secondly, If you do this, your code will be tightly coupled to the DOM, that means you can't use server-side rendering or web workers i, or other rendering engine's(nativescript for now).

Regards

Sander

[Ofer Gal]

Thank you that's what I was looking for

So in the component I should have

@input forParent: string; right?

[Ofer Gal]

Manish example was perfect and your input is very helpful too. Thank you both.

[Ofer Gal]

Back with problems :-)

Althogh following Manish example and the other explanation in http://victorsavkin.com/post/119943127151/angular-2-template-syntax and http://voidcanvas.com/data-binding-in-angular-js-2-0-with-examples/

When I add my selector in the HTML like so:<docs-grid [typeOfDoc]="key"></docs-grid> with all the variation on key "'key'" etc..

and the class hows selector is "docs-grid" has a line  @Input()  typeOfDoc: any;

when the component start showing I get an error EXCEPTION: Error in app/app.component.html:32:21 which is one line above where the selector is.

Any Idea what the issue is? could it be I am using RC1?

[Ofer Gal]

Forget it it was my mistake. Manish example works like a charm thanks again