Issue
I know I can just pass the template reference variable mytemplate
to *ngTemplateOutlet
and it works.
For learning purposes I want to use different approach via @ViewChild
decorator.
However I got some errors that I don't understand.
Minimal Code:
import { Component, TemplateRef, ViewChild } from '@angular/core';
@Component({
selector: 'app-root',
template:
`
<ng-template #mytemplate>
<p>Hello World</p>
</ng-template>
<ng-container *ngTemplateOutlet="template"></ng-container>
`
})
export class AppComponent {
@ViewChild("mytemplate")
template!: TemplateRef<any>;
}
Error Messages:
core.mjs:7640 ERROR Error: NG0100: ExpressionChangedAfterItHasBeenCheckedError: Expression has changed after it was checked. Previous value: 'undefined'. Current value: '[object Object]'. Find more at https://angular.io/errors/NG0100
at throwErrorIfNoChangesMode (core.mjs:8207:11)
at bindingUpdated (core.mjs:14552:17)
at Module.ɵɵproperty (core.mjs:15284:9)
at AppComponent_Template (app.component.ts:10:16)
at executeTemplate (core.mjs:12121:9)
at refreshView (core.mjs:11984:13)
at refreshComponent (core.mjs:13080:13)
at refreshChildComponents (core.mjs:11774:9)
at refreshView (core.mjs:12034:13)
at renderComponentOrTemplate (core.mjs:12101:9)
Solution
This is the error which comes only in dev mode
But still this should not be there in console.
You can manually trigger change detection to avoid this issue
constructor(private cd: ChangeDetectorRef) {} ngAfterViewChecked(){ this.cd.detectChanges() }
Link to documnetation : https://angular.io/errors/NG0100
Answered By - Passionate Coder
0 comments:
Post a Comment
Note: Only a member of this blog may post a comment.