Access template reference variables from component class

<div> <input #ipt type="text"/> </div> 

Is it possible to access the template access variable from the component class?

i.e., can I access it here,

class XComponent{ somefunction(){ //Can I access #ipt here? } } 

2 Answers

That is a use-case for @ViewChild:

class XComponent { @ViewChild('ipt', { static: true }) input: ElementRef; ngAfterViewInit() { // this.input is NOW valid !! } somefunction() { this.input.nativeElement...... } } 

Here's a working demo:

@ViewChild('modal reference variable', { static: true }) name: ElementRef; 

sometimes it doesn't work on modal. so when I used modal in angular it gives an error so I use this.

@ViewChild('modal reference variable', { static: true }) name!: ElementRef; 

it will definitely work if you want the modal to be executed without clicking the button.