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:).

Dennis Vash · Accepted Answer · 2019-06-23 13:39:41Z

119

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.

edited Jun 23, 2019 at 13:39

Dennis Vash

54.2k12 gold badges120 silver badges133 bronze badges

answered Jan 22, 2017 at 12:55

Günter Zöchbauer

662k235 gold badges2.1k silver badges1.6k bronze badges

Sign up to request clarification or add additional context in comments.

10 Comments

e-cloud Over a year ago

you answer is similar to my first solution which means the permissions is useless.

e-cloud Over a year ago

sorry too. In fact, i only need to pass value to those explicit keys like except: map.except；only: 'test'. There is no need pass value to the core directive. Perhaps there is no more solution indeed.

Günter Zöchbauer Over a year ago

Ok, now I understand what you mean with your first example. Why don't you change the selector to [permissionIfExcept] and use it like *permissionIfExcept="'Read'"? I find it usually more convenient to make the selector and the main input names match. You can also make the selector [permissionIf],[permissionIfExcept] to be able to just use *permissionIf (with no params at all) or alternatively *permissionIfExcept="'Read'" (as shown before)

Juangui Jordán Over a year ago

Thank you, that answer really helped, and there's no much documentation regarding that question.

Gaurav Over a year ago

Thank you @GünterZöchbauer. As mentioned by Juangui this really helps especially since the Angular doc is so minimal on this topic.

|

Tomasz Stelągowski · Accepted Answer · 2018-04-26 07:07:23Z

7

@Günter Zöchbauer answer is almost correct.

Actually right now to make his answer working you need to explicitly rename the secondary @Input name. So it should be:

@Input("permissionIfExcept") 
set permissionIfExcept(value: string) {
  this._except = value;
  console.log('except: ', value);
}

answered Apr 26, 2018 at 7:07

Tomasz Stelągowski

1612 silver badges5 bronze badges

Comments

Jon Jaques · Accepted Answer · 2019-11-13 23:06:37Z

6

Then one problem occurs: template syntax doesn't support pure key-value inputs:

True

A stupid temporary solution is add a useless variable declaration.

I think you are using this in a way it was not meant to be.

From the docs:

The microsyntax parser title-cases all directives and prefixes them with the directive's attribute name, such as ngFor. For example, the ngFor input properties, of and trackBy, become ngForOf and ngForTrackBy, respectively. That's how the directive learns that the list is heroes and the track-by function is trackById.

https://angular.io/guide/structural-directives#microsyntax-examples

Bottom line is in the context of your question, the microsyntax accepts "expression", followed by optional "keyed expression"s and I'm afraid those are your only options.

One could of course pass an object as the first expression—similar to ngIf—, the difference being you can teach your directive how to evaluate the expression:

*permissionIf="{ only: 'whatever', except: ['things', 'stuff'] }"

edited Nov 13, 2019 at 23:06

answered Nov 13, 2019 at 22:51

Jon Jaques

4,4202 gold badges25 silver badges25 bronze badges

1 Comment

ilya.chepurnoy Over a year ago

Thanks , it's the only way that works for me! Gunter's solution works for standard, but not structural directives.

Collectives™ on Stack Overflow

How to use Angular structural directive with multiple inputs

3 Answers 3

10 Comments

Comments

1 Comment

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

3 Answers 3

10 Comments

Comments

1 Comment

Your Answer

Sign up or log in

Post as a guest

Linked

Related