i designed this directive to handle user permission validation for displaying or hiding menu items on the page
here is my implementation:
@Directive({
selector: '[Permission]'
})
export class PermissionDirective {
@Input() AccessName: string;
constructor(
private templateRef: TemplateRef<any>,
private viewContainerRef: ViewContainerRef,
private permission: PermissionValidate
) {
console.log(this.AccessName)
this.show();
}
show(): void {
console.log('in d')
if (this.permission.validateAccessLevel(this.AccessName)) {
this.viewContainerRef.createEmbeddedView(this.templateRef);
} else {
this.viewContainerRef.clear();
}
}
}
and here is how I use the directive in HTML:
<li [Permission]='User:Main' class="side-menu-items-item">
<div class="item-icon">
<i nz-icon nzType="team" nzTheme="outline"></i>
</div>
<div class="item-label">
<label>{{'DASHBOARD.MENU_ITEM.USER_MANAGER' | translate}}</label>
</div>
</li>
[Permission]='User:Main'
however, when implemented in shared.module, the directive does not work as expected and does not enter the Directive
What seems to be the issue? How can I go about resolving it? Updated Question:
this is my updated shared.module
@NgModule({
declarations: [ShowErrorComponent, PermissionDirective, EmailExistValidationDirective, UsernameValidationDirective],
imports: [
CommonModule,
MaterialModule,
ZorroModule,
],
exports: [MaterialModule, PermissionDirective, ZorroModule , ShowErrorComponent, EmailExistValidationDirective, UsernameValidationDirective]
})
export class SharedModule {
static forRoot(): ModuleWithProviders {
// Ensuring that only the providers from the AppModule are utilized throughout the app.
return {
ngModule: SharedModule,
providers: [ShowErrorComponent, PermissionDirective, EmailExistValidationDirective, UsernameValidationDirective/* Any additional services needed by `SharedModule`. */]
};
}
}