How to use Angular structural directive with multiple inputs

Question

I want to implement something similar with angular-permisssion. And with requirement to control the element's existance, I need to use angular structural directive.

At the beginning, i think such syntax would work:

<h2 *permissionIf [permissionIfExcept]="'Read'">Except</h2> 

However, it doesn't work that way.

Moreover, the offical guide only teach you how to write custom structural directive with single input. With multi-inputs, some third-party tutorials involve a bit. But that's using the angular template micro-syntax to achieve data binding. Then one problem occurs: template syntax doesn't support pure key-value inputs:

<h2 *permissionIf="except: map.except；only: 'test'">Except</h2> 

It expands into this(which is illegal):

<h2 template="permissionIf except: map.except；only: 'test'">Except</h2> 

A stupid temporary solution is add a useless variable declaration.

<h2 *permissionIf="let i;except: map.except；only: 'test'">Except</h2> 

Another inconvenient way is to use template element to wrap the code.

<template permissionIf [permissionIfExcept]="'Read'">   <h2>Except</h2> </template> 

The above all are not accepetable enough. But I can't find a bette way to resolve it.

Hope some guys can give some suggestion:).

Answer 1

The input names need all to be prefixed with the selector of the directive, followed by the input name capitalized (i.e. permissionIfExcept). Example:

  @Directive({     selector: '[permissionIf]'   })   export class PermissionIfDirective implements AfterContentInit {      private _permissionIf:string[];     @Input()      set permissionIf(value: string[]) {       this._permissionIf=value;       console.log('permissionIf: ', value);     }      private _except:string;     @Input()      set permissionIfExcept(value: string) {       this._except = value;       console.log('except: ', value);     }   } 

To use them with the '*' syntax:

<div *permissionIf="permissions;except:'Read'"></div> 

Note here you're using the name following the prefix uncapitalized (i.e. except). Also note the : in the assignment.

The explicit syntax (using template) would look like this:

<template [permissionIf]="permissions" [permissionIfExcept]="'Read'">   </div></div> </template> 

but with <ng-container> it could look like

<ng-container *permissionIf="permissions;except:'Read'">   <div></div> </ng-container> 

Plunker example

See also the source of NgFor as an example.