CODEWITHSUNDEEP
angularangular-materialviewchild
chewi
chewi

Reputation: 159

ViewChild returns undefined

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?

Upvotes: 0

Views: 1866

Answers (2)

Gili Yaniv
Gili Yaniv

Reputation: 3221

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().

Upvotes: 1

Saurabh Agrawal
Saurabh Agrawal

Reputation: 7739

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

Upvotes: 1

Related Questions