ExpressionChangedAfterItHasBeenCheckedError undefined input parameter

[Sumair Ahmed]

Hi,

Going round in circles on how to fix this.  Read the two blogs highlighted everywhere.  Understand the reason but doesn't matter what i try, this error will not go away.  The error is with the input parameter.  When the component loads, it's undefined and then gets the correct value.  

I've tried using:

• various lifecycle hooks in the sub component with no luck - ngOnit, ngAfterViewChecked, ngAfterViewInit etc.
• Tried using a timer
• Tried using ChangeDetectorRef in the sub component
• Tried using *ngIf="ComponentName"
• EventEmitter to true to allow async

I still get the error.  Can someone please see what i am doing wrong please.

Thanks

Error Message

Error: ExpressionChangedAfterItHasBeenCheckedError: Expression has changed after it was checked. Previous value: 'AreaName: undefined'. Current value: 'AreaName: dashboard'. It seems like the view has been created after its parent and its children have been dirty checked. Has it been created in a change detection hook ?

Parent Component ts file.

export class Dashboard {

public ComponentName: string = "dashboard";

private showContent: boolean = false;

constructor() {}

public displayMethod(): void {}

public CanAccess(canAccess : boolean) : boolean {

return this.showContent = canAccess;

}

}

Parent Component Html

<div class="content-area" >

<h3>This is dashboard information</h3>

</div>

<no-access [AreaName]="ComponentName" (AllowedAccess)="CanAccess($event)"></no-access>

SubComponent ts

export class NoAccess implements OnInit {

@Input() AreaName: string;

@Output() AllowedAccess = new EventEmitter<boolean>(true);

public showSubContent: boolean;

constructor(private authService : AuthenticationService) {}

ngOnInit(): void {

setTimeout(() => {

this.showSubContent = this.authService.CanRead(this.AreaName, null);

this.AllowedAccess.emit(false);

});

}

}