I recently developed a Directive in Angular7, but I encountered an issue when trying to pass a string value from the HTML to the directive.
When using the following code snippet in my HTML:
<ng-template [appValidatePermission]='CreateRole'>
<router-outlet></router-outlet>
</ng-template>
This is the code for my 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));
if (find) {
this.show = true;
} else {
this.show = false;
}
}
}
However, upon testing, it displayed AccessName: Undefined.
What could be causing this problem and how can I resolve it?