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 ponent if I want to make changes to the tag attributes. Second, whatever way I access them, If I change the attributes manually for custom ponent will it get detected as a change as well after the change?

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 ponent if I want to make changes to the tag attributes. Second, whatever way I access them, If I change the attributes manually for custom ponent will it get detected as a change as well after the change?

• javascript
• angular
• angular-ponents
• viewchild

• If I change the attributes manually - what exactly do you change and what do you want framework to pick up? – Max Koretskyi Commented Jul 13, 2017 at 4:58
• 2 See stackoverflow./questions/39908967/… and stackoverflow./questions/45064576/… – yurzui Commented Jul 13, 2017 at 4:58
• what exactly do you change. 1) If I access the ponent class instance's objects say a variable within it will it be change detected automatically? 2) If I get the cmp element ref of <my-feature-cmp> 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 Commented Jul 13, 2017 at 6:04

1 Answer 1

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

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 ponent 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.