Access template reference variables from component class

Question

<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?
   }
}

Answer 1

That is a use-case for @ViewChild:

https://angular.io/docs/ts/latest/api/core/index/ViewChild-decorator.html

class XComponent {
   @ViewChild('ipt', { static: true }) input: ElementRef;

   ngAfterViewInit() {
      // this.input is NOW valid !!
   }

   somefunction() {
       this.input.nativeElement......
   }
}

Here's a working demo:

https://stackblitz.com/edit/angular-viewchilddemo?file=src%2Fapp%2Fapp.component.ts

update demo using angular v18:

https://stackblitz.com/edit/angular-v18-viewchild?file=src%2Fmain.ts

which also considers the new signal way of using ViewChildren: https://angular.dev/api/core/viewChild?tab=usage-notes

Answer 2

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