How to initialize ElementRef Angular - Typescript

Question

when I use

@ViewChild('serachField', { static: false }) serachField: ElementRef<HTMLInputElement>

I get the error

Property 'serachField' has no initializer and is not definitely assigned in the constructor.

I usually initialise the variable, But I'm unsure how to do it in this case

I've tried

@ViewChild('serachField', { static: false }) serachField: ElementRef<HTMLInputElement> = new ElementRef<HTMLInputElement>(--unsure what the parameter should be--)

I get:

Expected 1 arguments, but got 0.ts(2554)
core.d.ts(2253, 17): An argument for 'nativeElement' was not provided.

[https://stackoverflow.com/questions/49699067/property-has-no-initializer-and-is-not-definitely-assigned-in-the-construc](https://stackoverflow.com/questions/49699067/property-has-no-initializer-and-is-not-definitely-assigned-in-the-construc) — lbsn, Jun 16 '21 at 12:24
is your **serachField** reference exists on the html view ? if yes then you have to provide the code where you access "nativeElement" property.. probably you should access it in **ngAfterViewInit** because you are using @ViewChild('serachField', **{ static: false }**) — sohaieb azaiez, Jun 16 '21 at 12:59
Please revise your post title to ask a clear question in sentence format. — isherwood, Jun 16 '21 at 13:58

score 29 · Accepted Answer · answered Jun 16 '21 at 13:53

29

Thank you @Isbn

I used:

@ViewChild('serachField', { static: false }) serachField: ElementRef<HTMLInputElement> = {} as ElementRef;

answered Jun 16 '21 at 13:53

RasMason

1,968
4
32
54

1

Thanx a 1,000,000 for that. It helped me too! Could you please accept your own answer, just to make it clear to others who read this question in future? – Mawg says reinstate Monica Aug 26 '21 at 12:04

How to initialize ElementRef Angular - Typescript

1 Answers1