import { Component, ViewChild } from '@angular/core';
@Component({
selector: 'my-app',
template: `
<div #container>
<p>para 1</p>
<p>para 2</p>
<button>button 1</button>
</div>
`
})
export class AppComponent {
@ViewChild('container') myDiv;
ngAfterViewInit(){
//this console.log would print this [p, p, button]
console.log(this.myDiv.nativeElement.children);
//how can I access to only p nativeElement only?
}
}
See plunker
Descriptionlink. Use to get the QueryList of elements or directives from the view DOM. Any time a child element is added, removed, or moved, the query list will be updated, and the changes observable of the query list will emit a new value. View queries are set before the ngAfterViewInit callback is called.
You can try the following to get array of p
elements:
Array.from(this.myDiv.nativeElement.children).filter(tag => tag.tagName === 'P')
If you love us? You can donate to us via Paypal or buy me a coffee so we can maintain and grow! Thank you!
Donate Us With