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???

please refer https://stackoverflow.com/questions/38843532/how-to-pass-multiple-parameter-to-directives-in-angular-with-typescript — Thilina Sampath, Jun 11 '19 at 08:43
@Kianoush Your welcome Please consider accept my answer if it solve your issue — CharybdeBE, Jun 11 '19 at 09:05

score 1 · Answer 1 · answered Jun 11 '19 at 08:46

1

you can try like this

<ng-template [AccessName]="<value you want to send>" appValidatePermission >
   <router-outlet></router-outlet>
</ng-template>

answered Jun 11 '19 at 08:46

Yash Rami

2,276
1
10
16

score 1 · Accepted Answer · answered Jun 11 '19 at 08:48

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>

no pass value to directive in angular7

2 Answers2