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

slaesh · Accepted Answer · 2020-01-08T08:11:13.140

200

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

edited Jan 08 '20 at 08:11

answered Sep 22 '16 at 06:23

slaesh

16,659
6
50
52

But on debugging I am getting this.input itself as undefined. – Rohit Rane Sep 22 '16 at 06:36
As i mentioned, its only available AFTER the event `ngAfterViewInit()` was fired. You have to import `ViewChild` from '@angular/core` .. – slaesh Sep 22 '16 at 06:43
But how can we set a value? I've tried `this.ipt.nativeElement.setAttribute('value', 'xxx');` but nothing happens. And there are no methods like `value()` or `setValue()`, even if I declare it of type HTMLInputElement (I'm basing this on IDE's code hinting/autocomplete). In my case, I don't care about reading the value. I just need to set different values. – MrCroft May 10 '17 at 18:40
Currently in Holiday.. did you tried `setProperty` also? – slaesh May 10 '17 at 19:00
doesn't seem to exist. Throws an error in the console `.setProperty is not a function` on `this.ipt.nativeElement.setProperty('value', 'xxx');` Anyway, the more I think of it, I shouldn't touch the dom. I just don't want to make the input part of any formGroup because it doesn't contain any relevant data for sending to the server and wanted to find another way rather than having to filter it out before sending the data. – MrCroft May 10 '17 at 21:58
1

shouldnt `this.input.nativeElement.value = 'test'` work?! maybe there are special behaviors with forms and their bindings. – slaesh May 11 '17 at 06:49
@mxii I forked your plunker and access the ref-var using queries in the decorator instead. It seems to work https://plnkr.co/edit/RBLIYdrVfv6toCnie9es?p=info But on my own code, without declaring input variable within the App class, IDE WebStorm complains that input variable doesn't exist on type App. Have you had such experience? – Jun Nov 03 '17 at 21:53
Yes, I tried in the plunker and worked: `this.input.nativeElement.value = 'test'` – Juangui Jordán Dec 19 '17 at 08:35
Me I used @ViewChild('myInput') myInput: NgModel; in order to be able to access the validation features of the angular form object - like this.myInput.invalid. – razvanone Apr 24 '18 at 10:49

score 5 · Answer 2 · edited Sep 25 '21 at 08:59

5

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

edited Sep 25 '21 at 08:59

Suraj Rao

29,388
11
94
103

answered Sep 25 '21 at 08:57

Ayush Rawat

74
2
2

or `@ViewChild('modal reference variable', { static: true }) name: ElementRef | undefined;` so you dont forget it really is `undefined` before `ngAfterViewInit()` – Jan 'splite' K. Jan 13 '23 at 17:55

Access template reference variables from component class

2 Answers2

Linked