Extra parameter always null in angular directive

Question

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?

I'm suprised the way it works now, `*access="['CAD']"` is the wrong syntax I think, it should've been `[access]="['CAD']"`. And what is `this.processAuthorization();`? — eko, May 16 '17 at 17:16
`[access]="['CAD']" [accessFeatures]="'any'"` and `[access]="['CAD']" accessFeatures="any"` work fine for me in a [mcve]. — jonrsharpe, May 16 '17 at 17:17

score 2 · Accepted Answer · edited Jan 04 '22 at 15:28

2

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

Extra parameter always null in angular directive

1 Answers1