Multiple template reference variable in Angular

Question

In one of my component's template input element I have created two different reference variables, something like this:

<input type="text" placeholder="..." #typeAhead="ngbTypeahead"
       #relationTypeInput>

P.S: This is not the exact code, but my actual code is similar to this one

In the component ts file these variable are declared as follows:

@ViewChild('typeAhead') typeAhead: NgbTypeahead;
@ViewChild('relationTypeInput') relationTypeInput: ElementRef;

Then I am using the former one in ngOnInit() and the later one in ngAfterViewInit(). To my surprise I didn't got any error and it's working, but I don't understand how?

Chrillewoodz · Accepted Answer · 2018-05-23 07:19:01Z

4

This is because #typeAhead isn't a reference to the element, in this case the input. This is why it's defined when ngOnInit runs, while #relationTypeInput is not.

answered May 23, 2018 at 7:19

Chrillewoodz

28.5k23 gold badges102 silver badges189 bronze badges

Sign up to request clarification or add additional context in comments.

2 Comments

Bijay Singh Over a year ago

Thanks for your ans @Chrillewoodz, can you please also explain why #typeAhead is not a reference here? Is it because it's of type NgbTypeahead?

Chrillewoodz Over a year ago

@BijaySingh I assume that NgbTypeahead is a directive so it's a reference to the directive itself rather than the input element.

Drenai · Accepted Answer · 2020-08-13 08:13:41Z

2

In the later versions of Angular (v10+) you would need to use ngAfterViewInit

Up to v7, Angular stated that ngOnInit was not a reliable lifecycle hook from which to reference ViewChild properties, but it was common knowledge that it was reliable. In v8/9, you need to add an option {static: true} to the ViewChild to allow the property to be referenced in ngOnInit - but this had other affects on the property (e.g. it would never update after that point)

You can read more about it here https://angular.io/guide/static-query-migration

answered Aug 13, 2020 at 8:13

Drenai

12.6k9 gold badges60 silver badges94 bronze badges

Collectives™ on Stack Overflow

Multiple template reference variable in Angular

2 Answers 2

2 Comments

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

2 Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Related