After creating a Directive in Angular7, I encountered an error when trying to use it:
Error: StaticInjectorError(AppModule)[NgForOf -> TemplateRef]: StaticInjectorError(Platform: core)[NgForOf -> TemplateRef]: NullInjectorError: No provider for TemplateRef! Error: StaticInjectorError(AppModule)[NgForOf -> TemplateRef]: StaticInjectorError(Platform: core)[NgForOf -> TemplateRef]:
The directive was created within the SharedModule:
@NgModule({
declarations: [FilderrorComponent, UploadfileComponent, ImageComponent, ValidatePermissionDirective],
imports: [
CommonModule
],
exports: [ FilderrorComponent, UploadfileComponent, ImageComponent, ValidatePermissionDirective]
})
export class SharedModule {
static forRoot(): ModuleWithProviders {
return {
ngModule: SharedModule,
providers: [ FilderrorComponent, UploadfileComponent, ImageComponent , ValidatePermissionDirective]
};
}
}
This is the code for the Directive:
@Directive({
selector: '[appValidatePermission]'
})
export class ValidatePermissionDirective implements OnInit {
show: boolean;
constructor(private templateRef: TemplateRef<any>,
private viewContainerRef: ViewContainerRef
, private dynamic: DynamicPermissionService) { }
// tslint:disable-next-line:no-input-rename
@Input() AccessName: string;
ngOnInit() {
this.ValidatePemission();
if (this.show) {
this.viewContainerRef.createEmbeddedView(this.templateRef);
} else {
this.viewContainerRef.clear();
}
}
ValidatePemission() {
console.log('AccessName : ', this.AccessName);
const find = this.dynamic.dynamicModel.find(x =>
!! x.actionsVM.find(z => z.actionEnglishName === this.AccessName));
console.log(find);
if (find) {
console.log(true);
this.show = true;
} else {
console.log(false);
this.show = false;
}
}
}
The shareModule was defined in the AdminModule :
@NgModule({
declarations: [],
imports: [
SharedModule,
AdminpanelRoutingModule,
],
providers: [Toolkit, { provide: HTTP_INTERCEPTORS, useClass: RequestInterceptor, multi: true }]
})
export class AdminpanelModule { }
The Directive was used in HTML as follows:
<span [appValidatePermission]="CreateRole">
<router-outlet></router-outlet>
</span>
I am facing an issue with this implementation. Can anyone help me solve it?