Conditional Buttons with ngSwitch also with ngFor from async piped array

Question

I am having a logic error that I cannot seem to fix, but aside from the literal logic error, why doesn't Angular let me do this?

The reason for doing the conditional switch is I want drop downs for different models, Gender, etc. I have my gender drop down with drop.Name, however I just see [object object] in the drop down when it renders.

Incoming Code:

<drop-down [Content]="GenderTxt" [AriaLabel]="'Gender Select'" [Type]="'Gender'" [Options]="(MenuOptions | async)?.Genders"
            (Click)="SetGender($event)">
          </drop-down>

Error Message:

Can't have multiple template bindings on one element. Use only one attribute named 'template' or prefixed with * ("aria-labelledby="{{AriaLabel}}">
    <div [ngSwitch]="Type">
      <button *ngSwitchCase="Gender" [ERROR ->]*ngFor="let drop of Options" class="dropdown-item FakeClickable" (click)="Clicked(drop)">{{drop.Name}"): ng:///AppModule/DropDownComponent.html@6:37
Can't have multiple template bindings on one element. Use only one attribute named 'template' or prefixed with * ("-item FakeClickable" (click)="Clicked(drop)">{{drop.Name}}</button>
      <button *ngSwitchDefault [ERROR ->]*ngFor="let drop of Options" class="dropdown-item FakeClickable" (click)="Clicked(drop)">{{drop}}</bu"): ng:///AppModule/DropDownComponent.html@7:31

Code:

<div class="dropdown-menu" attr.aria-labelledby="{{AriaLabel}}" [ngSwitch]="Type">
    <button *ngSwitchCase="Gender" *ngFor="let drop of Options" class="dropdown-item FakeClickable" (click)="Clicked(drop)">{{drop.Name}}</button>
    <button *ngSwitchDefault *ngFor="let drop of Options" class="dropdown-item FakeClickable" (click)="Clicked(drop)">{{drop}}</button>
  </div>

Essentially is my problem that I need to move the switch case up to the outer level div, and then for each button create a new div?

Possible duplicate of [How to apply multiple template bindings on one element in angular2 RC4](https://stackoverflow.com/questions/38585720/how-to-apply-multiple-template-bindings-on-one-element-in-angular2-rc4) — Ulug Toprak, Aug 02 '17 at 13:02

score 1 · Accepted Answer · answered Aug 02 '17 at 13:00

1

You can't use two structural directives on the same element. Try this instead:

<div class="dropdown-menu" attr.aria-labelledby="{{AriaLabel}}" [ngSwitch]="Type">
    <ng-container *ngSwitchCase="Gender">
        <button *ngFor="let drop of Options" class="dropdown-item FakeClickable" (click)="Clicked(drop)">{{drop.Name}}</button>
    </ng-container>
    <ng-container *ngSwitchDefault>
        <button *ngFor="let drop of Options" class="dropdown-item FakeClickable" (click)="Clicked(drop)">{{drop}}</button>
    </ng-container>
</div>

answered Aug 02 '17 at 13:00

yurzui

205,937
32
433
399

I figured that was the problem but didn't know how to restructure for ease of use. – Bailey Miller Aug 02 '17 at 13:02
While i have you can you answer the next part of this question which I am updating. – Bailey Miller Aug 02 '17 at 13:02
@BaileyMiller Can you create plunker that describes second part of your question? – yurzui Aug 02 '17 at 13:06
There is a lot of code I would have to add into this plunker, I am essentially passing an Observable that has an array of Gender models in it, when it displays in my *ngFor I just see `[object Object]` – Bailey Miller Aug 02 '17 at 13:07
@BaileyMiller You need to add only `drop-dow` component and pass mocked data. – yurzui Aug 02 '17 at 13:22

Conditional Buttons with ngSwitch also with ngFor from async piped array

1 Answers1