Leonardo Neninger
Leonardo Neninger

Reputation: 586

Extra parameter always null in angular directive

I have the structural directive in Angular like this

@Directive({ selector: "[access]" })
export class AuthorizationAccessDirective implements OnInit, AfterViewChecked {
    constructor(private templateRef: TemplateRef<any>, private eleRef: ElementRef, private viewContainer: ViewContainerRef) {
    }

    hasView: boolean = false;

    @Input("access")
    _accessInput: string[];

    @Input()
    accessFeatures: any;

    ngAfterViewChecked() {
      this.processAuthorization();
    }

    ngOnInit() {
      this.processAuthorization();
    }
}

The HTML using the directive look like this

<li routerLinkActive="active" *access="['CAD']" accessFeatures="{'Settings':31}">
...
</li>

I can get the _accessInput value, but the extra parameter accessFeatures is always undefined in both methods ngOnInit and ngAfterViewChecked.

I changed the value to string to simplify, but no successs as well:

<li routerLinkActive="active" *access="['CAD']" accessFeatures="31"> 

I changed the @Input definition to @Input("features") and @Input("accessFeatures").

What am I doing wrong?

Upvotes: 1

Views: 376

Answers (1)

yurzui
yurzui

Reputation: 214067

If you have these inputs

@Input("access")
_accessInput: string[];

@Input()
accessFeatures: any;

then you can use it like:

<li *access="['CAD']; features: {'Settings':31}">
   ...
</li>

(you can also omit ; or replace with ,)

because it will be transformed to

<ng-template [access]="['CAD']" [accessFeatures]="{'Settings':31}">
  <li>
  </li>
</ng-template>

Plunker Example

See also

P.S. If you doubt you can always check the source code

Upvotes: 2

Related Questions