I developed a unique directive and included it in the setup of my app.module. However, when I try to use it within my component, an error is displayed:
Property binding hasClaim not used by any directive on an embedded template. Ensure that the property name is correctly spelled and all directives are listed in the "@NgModule.declarations".ng
This is the process I followed to create the directive:
import { Directive, TemplateRef, ViewContainerRef, Input } from '@angular/core';
import { SecurityService } from './security.service';
@Directive({
// tslint:disable-next-line: directive-selector
selector: '[hasClaim]'
})
export class HasClaimDirective {
constructor(
private templateRef: TemplateRef<any>,
private viewContainer: ViewContainerRef,
private ss: SecurityService,
) { }
@Input() set hasClaim(claimType: any) {
debugger;
if (this.ss.hasClaim(claimType)) {
this.viewContainer.createEmbeddedView(this.templateRef);
} else {
this.viewContainer.clear();
}
}
}
Here is how I implement the directive:
<ul class="nav">
<ng-container *ngIf="securityObject.isAuthenticated">
<li *ngFor="let menuItem of menuItems" routerLinkActive="active" class="{{menuItem.class}}">
<a [routerLink]="[menuItem.path]" *hasClaim="'Admin'"> <=== THIS IS THE DIRECTIVE
<i class="nc-icon {{menuItem.icon}}"></i>
<p>{{menuItem.title}}</p>
</a>
</li>
</ng-container>
<ng-container *ngIf="!securityObject.isAuthenticated">
<li routerLinkActive="active" class="">
<a routerLink="/login">
<i class="nc-icon nc-key-25"></i>
<p>Login</p>
</a>
</li>
</ng-container>
<ng-container *ngIf="securityObject.isAuthenticated">
<li routerLinkActive="active" class="" (click)="logout()">
<a routerLink="/login">
<i class="nc-icon nc-lock-circle-open"></i>
<p>Logout</p>
</a>
</li>
</ng-container>
</ul>