no pass value to directive in angular7

Question

i created a Directive in Angular7 but when i need to pass a string value from html to directive .

but when i use this in HTML :

<ng-template [appValidatePermission]='CreateRole'>
   <router-outlet></router-outlet>
</ng-template>

and this is 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;
      }
  }
}

it show me AccessName: Undefined .

Whats The Problem??? How Can I Solve That???

Answer 1

You are not passing the variable. To use a directive do it like that in your HTML

  <ng-template appValidatePermission AccessName="CreateRole">
   <router-outlet></router-outlet>
   </ng-template>

Note tht if you use [] and want to enter a stirng you should do

  <ng-template appValidatePermission [AccessName]="'CreateRole'">
   <router-outlet></router-outlet>
   </ng-template>