Unable to capture nativeElement for custom angular components

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?