2 input on a directive in angular

Question

I have a directive in angular 11 with the following inputs :

@Directive({
  selector: "[appHasToken]",
})
export class HasTokenDirective implements OnInit, OnDestroy {
  @Input("appHasToken") fallback: TemplateRef<any>;
  @Input("showWarning") showWarning = false;
//...
}

I call it in my code like this :

<ng-container *appHasToken="noToken">

Now in a single place, I want the showWarning to true, so I did

<ng-container *appHasToken="noToken;" [showWarning]="true">

but I am prompted with

Can't bind to 'showWarning' since it isn't a known property of 'ng-container'

now, I know I can rename the input with a different name than the directive and do

<ng-container appHasToken [templateRef]="noToken" [showWarning]="true">

but what about keeping the same stuff I was doing, is there a fix ?

Moshezauros · Accepted Answer · 2021-01-02 08:23:58Z

3

When you write a directive with * (structural directive), angular adds an ng-template around your element, so <ng-container *appHasToken="noToken"> gets translated to:

<ng-template [appHasToken]="noToken">
  <ng-container></ng-container>
</ng-template>

When you have another input, the second input remains on the ng-container, and since the directive isn't there anymore, angular throws because the now ng-container doenst have a known property showWarning. To overcome this, there is microsyntax in angualr which allows passing more than one input to the structural directive - you add the directive name in the input naming before the input's name, so showWarning becomes appHasTokenShowWarning (notice the uppercase in the first word), and then can be accessed in the following way:

<ng-container *appHasToken="noToken; showWarning true">

if this reminds you of ngFor its because ngFor also uses this! here is the source code

Here is a stackblitz, and note your inputs should look like the following:

export class HasTokenDirective implements OnInit, OnDestroy { @Input("appHasToken") fallback: TemplateRef; @Input("appHasTokenShowWarning") showWarning = false; //... }

edited Jan 2, 2021 at 8:23

answered Jan 2, 2021 at 8:05

Moshezauros

2,5931 gold badge14 silver badges17 bronze badges

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

5 Comments

Crocsx Over a year ago

Hi, thanks, I tried to do this before : *appHasToken="noToken; showWarning: true" but it makes the whole thing invalid >Property binding appHasTokenShowWarning not used by any directive on an embedded template. Make sure that the property name is spelled correctly and all directives are listed in the "@NgModule.declarations".

Crocsx Over a year ago

while *appHasToken="noToken" alone works, I don7t know why the addition breaks the whjole thing.

Moshezauros Over a year ago

and you also changed the input name in the directive?

Crocsx Over a year ago

the inputs names are like the main post.

Moshezauros Over a year ago

you have to change the input for the second parameter, read my answer again, I will add a stackblitz in a couple of minutes

German Blanco · Accepted Answer · 2021-01-02 08:09:43Z

0

<ng-container> isn't rendered in the DOM. It is mainly used as Javascript curly braces in the template for *ngFor and *ngIf. Check the documentation https://angular.io/guide/structural-directives#ng-container-to-the-rescue

Instead, use a plain div or any other component.

answered Jan 2, 2021 at 8:09

German Blanco

8166 silver badges9 bronze badges

Collectives™ on Stack Overflow

2 input on a directive in angular

2 Answers 2

5 Comments

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

5 Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Related