7

I am unable to get the reference of nativeElement of my custom Elements. I have a template like this:

<div #testone>
<my-feature-cmp><my-feature-cmp>
<my-feature-cmp><my-feature-cmp>
<my-feature-cmp><my-feature-cmp>
<div>

Code used to access: @ViewChild('testone') el: ElementRef;

I get the element reference when I do this -> console.log(this.el.nativeElement)

Second type of template

<my-feature-cmp></my-feature-cmp>
<my-feature-cmp></my-feature-cmp>
<my-feature-cmp></my-feature-cmp>

Code used to access:

@ViewChildren(MyFeatureCmp) el: MyFeatureCmp;

I get the error for native element when I do this -> 

console.log(this.el.nativeElement)

I get the class references and no nativeElement when I do this -> 

console.log(this.el)
console.log(this.el.toArray())

The question is how to I access the native element of custom component if I want to make changes to the tag attributes. Second, whatever way I access them, If I change the attributes manually for custom component will it get detected as a change as well after the change?

Gary
  • 2,293
  • 2
  • 25
  • 47
  • _If I change the attributes manually_ - what exactly do you change and what do you want framework to pick up? – Max Koretskyi Jul 13 '17 at 04:58
  • 2
    See https://stackoverflow.com/questions/39908967/how-to-get-reference-of-the-component-associated-with-elementref-in-angular-2/39909203#39909203 and https://stackoverflow.com/questions/45064576/how-to-extract-viewcontainerref-and-componentref-in-most-efficient-way – yurzui Jul 13 '17 at 04:58
  • `what exactly do you change`. 1) If I access the component class instance's objects say a variable within it will it be change detected automatically? 2) If I get the cmp element ref of `` then can I do this within breaking something somewhere? `this.el.first.nativeElement.someatrribute = 'somevalue'` or `this.el.first.nativeElement.style.color = '#ccc'` or add event listeners `(somecustomevent)` on fly? – Gary Jul 13 '17 at 06:04

1 Answers1

8

The question is how to I access the native element of custom component

You have to use read option:

@ViewChildren(MyFeatureCmp, {read: ElementRef}) el: QueryList<ElementRef>;

console.log(this.el.first.nativeElement)

Also see this answer to learn what we can get using read.

If I change the attributes manually for custom component will it get detected as a change as well after the change?

No, Angular doesn't process changes on DOM elements. For more information on what change detection processes see Everything you need to know about change detection in Angular.

Max Koretskyi
  • 101,079
  • 60
  • 333
  • 488
  • got it working. So if I to access the Nth element I will have to do .toArray() and get that specific element right? – Gary Jul 13 '17 at 06:00
  • Ok cool. `what exactly do you change`. 1) If I access the component class instance's objects say a variable within it will it be change detected automatically? 2) If I get the cmp element ref of `` then can I do this within breaking something somewhere? `this.el.first.nativeElement.someatrribute = 'somevalue'` or `this.el.first.nativeElement.style.color = '#ccc'` or add event listeners like this `(somecustomevent)` on fly? – Gary Jul 13 '17 at 06:05
  • 1
    I remember we had a long discussion [here](https://stackoverflow.com/a/44298962/2545680), is it still unclear what CD does? If you change the component instance property and it's used in the template, yes, Angular will pick up the change. If you modify DOM through native element, no, not changes will be detected. – Max Koretskyi Jul 13 '17 at 06:12