ViewChild returns undefined

Question

I am using material design and Angular 5. I was trying to use the material loader, so when navigation start show loader and when ends remove loader as per the answer in this question. I tried viewchild by

<mat-progress-bar #spinnerElement [mode]="'indeterminate'" [color]="'primary'"></mat-progress-bar>

and called in my component constructor as below:

@ViewChild('spinnerElement')
spinnerElement: ElementRef;

constructor(
.....
    private ngZone: NgZone,
    private renderer: Renderer) {
        console.log(this.spinnerElement, 'spinnerElement');
    }

But console always returns undefined. Bit new to Angular. Any idea why guys?

score 1 · Accepted Answer · edited Nov 30 '17 at 07:47

1

Take a look at angular life cycle.

You can't access your DOM elements in your constructor because they still not rendered.

Try to access your 'spinnerElement' in your ngOnInit().

ngOnInit():

Initialize the directive/component after Angular first displays the data-bound properties and sets the directive/component's input properties. Called once, after the first ngOnChanges().

edited Nov 30 '17 at 07:47

eko

39,722
10
72
98

answered Nov 30 '17 at 07:23

Gili Yaniv

3,073
2
19
34

score 1 · Answer 2 · answered Nov 30 '17 at 07:27

1

Access @ViewChild in ngOnInit(), You can't use it before it is initialized.

answered Nov 30 '17 at 07:27

Saurabh Agrawal

7,581
2
27
51

No, it's not available in ngOnInit, you have to wait at least for ngAfterViewInit() – Gnujeremie Jan 25 '18 at 14:14

ViewChild returns undefined

2 Answers2