[Angular] @ViewChildren and querylists (ngafterviewinit)

When your use @ViewChildren, the value can is only accessable inside ngafterviewinit lifecycle. This was somehow different from @ViewChild, which value can accessed from ngaftercontentinit lifecycle .

Import {Component,Changedetectorref, Output, Viewchildren, Afterviewinit, Eventemitter, Contentchildren, Querylist, Aftercontentinit} from '@angular/core'; import {authremembercomponent} from './auth-remember.component'; import {authmessagecomponent} from './auth-message.component'; import {User} from './auth-form.interface'; @Component ({selector:'Auth-form', Template: '<div> <form (ngsubmit) ="onSubmit (Form.value)"#form ="Ngform"> <ng-contentSelect="H3"></ng-content> <label>Email Address<input type="Email"Name="Email"Ngmodel> </label> <label>Password<input type="Password"Name="Password"Ngmodel> </label> <ng-contentSelect="Auth-remember"></ng-content> <auth-message [Style.display]="(showmessage?) ' Inherit ': ' None ')"> </auth-message> <auth-message [Style.display]="(showmessage?) ' Inherit ': ' None ')"> </auth-message> <auth-message [Style.display]="(showmessage?) ' Inherit ': ' None ')"> </auth-message> <ng-contentSelect="Button"></ng-content> </form> </div>  `}) ExportclassAuthformcomponent implements Aftercontentinit, Afterviewinit {showmessage:boolean; @ViewChildren (authmessagecomponent) message:querylist <AuthMessageComponent>; @ContentChildren (authremembercomponent) remember:querylist<AuthRememberComponent>; @Output () Submitted:eventemitter<User> =NewEventemitter<user>(); Constructor (Privatecd:changedetectorref) {} ngafterviewinit () {Console.log ("This.message:", This. Message);    //querylist {...} if( This. Message) {       This. Message.foreach (Message) ={message.days= -;      });  This . Cd.detectchanges (); }} ngaftercontentinit () {Console.log ("This.message:", This. Message); //undefined if( This. Remember) {       This. Remember.foreach (Item) ={item.checked. Subscribe (checked: boolean) = = This. ShowMessage =checked);    }); }} onSubmit (Value:user) { This. Submitted.emit (value); }}

Here we try to modify the value inside Ngafterviewinit lifecycle. But in developement mode, there are change detection error! We cannot modify the ' messages.day ' after view init.

We can bypass this problem by using 'changedetectref'.

this. cd.detectchanges ();

To tell Angular change detection everything is fine. And this error won ' t show on production mode, only in development mode.

[Angular] @ViewChildren and querylists (ngafterviewinit)