When using @ViewChild element.nativeElement is undefined

[kuncevic]

Bug, feature request, or proposal:

Bug

What is the expected behavior?

@ViewChild element.nativeElement has value

What is the current behavior?

@ViewChild element.nativeElement is undefined

@Component({
  selector: 'material-app',
  template:`
  <button #button md-raised-button>button</button>
  `
  
})
export class AppComponent {
  @ViewChild('button') button;
  ngAfterViewInit(){
    console.log(this.button);
    console.log(this.button.nativeElement); //undefined
    console.log(this.button.nativeElement.value); // obviously error here
  }

What are the steps to reproduce?

http://plnkr.co/edit/gSEsELlTAbrqvOOduSdr?p=preview

What is the use-case or motivation for changing an existing behavior?

Need to access to an element with @ViewChild

Which versions of Angular, Material, OS, browsers are affected?

Angular 4.0.1
Material beta.2
All browsers

Is there anything else we should know?

If you take out the md-raised-button from the button then this.button.nativeElement will work.

[Nikki1993]

As a workaround for now, you can define Child like this

@ViewChild('sidenavContainer') private sidenavContainer: any; and then call

this.sidenavContainer._element.nativeElement

For anyone wondering.

[kuncevic]

yeah I saw that thing when I was debugging, also there is one more option is to use renderer https://angular.io/docs/js/latest/api/core/index/Renderer-class.html to manipulate with elements(not sure if it is affected by the same issue), but I ended up just by declaring a prop in my comp that I bind to the my html element prop I need to interact with.

[jelbourn]

This is working as expected. When using @ViewChild in this way, Angular will provide the directive instance.

[kuncevic]

@jelbourn why it is expected?

Angular will provide the directive instance

Some more details plz

[willshowell]

@kuncevic this should help

http://stackoverflow.com/a/39909203/4811678

[gouldina]

I also have this problem. I don't understand why you say this is OK - if it works with a button without the md-radio-button, surely it should work for one with it? How can I get around this problem?

[HunderlineK]

@gouldina Please refer to the link that @willshowell posted above. Basically, just do
@ViewChild('nameForMaterialElement', {read: ElementRef}) private nameForMaterialElement: ElementRef;

The reason is that md-radio-button is an angular component (which itself is a directive) and ViewChild returns the whole component if you do not specify the read option

[gouldina]

Thanks HunderlinK. I'll try that.

[chibibiscuit]

To add on to @Nikki1993's answer (which works absolutely awesome), Angular Material 6 already has an interface you can use to type it:

export interface HasElementRef {
    _elementRef: ElementRef;
}

@ViewChild('sidenavContainer') private sidenavContainer: HasElementRef;

[kennyalmendral]

Thanks @HunderlineK

[raj2033]

down to 209, and this problem still exists.

[kuncevic]

@raj2033 did you try any of solutions above?

[angular-automatic-lock-bot]

This issue has been automatically locked due to inactivity.
Please file a new issue if you are encountering a similar or related problem.

Read more about our automatic conversation locking policy.

_{This action has been performed automatically by a bot.}