How to solve the ngSwitchCase in Angular?

Question

I've got a problem with my ngSwitchCase. Well the problem is that the case doesn't correctly fulfill its job. When I drag and drop a textbox, a textbox should appear. But When I drop the textbox, I get a textbox and textarea, which is another ngSwitchCase. Does anyoneknow what I'm doing wrong, because I can't seem to figure it out.

formadd.component.html

<fieldset class="element">
          <legend class="voeg-element" placeholder="voeg element toe" cdkDropList
          #doneList="cdkDropList"
          [cdkDropListData]="done"
          (cdkDropListDropped)="drop($event)">
          <div [ngSwitch]="item" class="cdkdrag" *ngFor="let item of done" cdkDrag>
            <div *ngSwitchCase="Textbox">
              <input kendoTextBox>
            </div>
            <div *ngSwitchCase="Textarea">
              <textarea kendoTextArea></textarea>
            </div>
            <div *ngSwitchDefault>{{item}}</div>
            </div>
        </legend>
        </fieldset>

panelwrapper.component.html

<kendo-panelbar class="panelbar">
        <kendo-panelbar-item class="panelbar-een" [title]="'Elementen'" cdkDropList cdkDropListSortingDisabled>
            <kendo-panelbar-item class="panelbar-twee" [title]="'Categorie'" icon="custom-icon" cdkDrag [cdkDragData]="'Categorie'"></kendo-panelbar-item>
            <kendo-panelbar-item class="panelbar-drie" [title]="'Textbox'" icon="textbox" cdkDrag>
                    <kendo-textbox-container floatingLabel="Text Box 1">
                            <input kendoTextBox placeholder="test" *cdkDragPreview/>
                          </kendo-textbox-container>  
            </kendo-panelbar-item>
            <kendo-panelbar-item class="panelbar-vier" [title]="'Textarea'" icon="textarea" cdkDrag [cdkDragData]="'Textarea'"></kendo-panelbar-item>
            <kendo-panelbar-item class="panelbar-vijf" [title]="'Date'" icon="calendar-date" cdkDrag [cdkDragData]="'Date'"></kendo-panelbar-item>
</kendo-panelbar>

This is what I see when I drop the textbox into the fieldset:

Maybe you need to write expression under ngSwitchCase with single quotation marks. E.g — trisek, Nov 07 '19 at 14:12
@diabolique do you mean like *ngSwitchCase='textbox' instead of "textbox"? Because that doesn't change anything actually. — Liza Darwesh, Nov 07 '19 at 14:15

score 4 · Accepted Answer · edited Sep 28 '20 at 09:36

You will need to use single quotation marks inside of a *ngSwitchCase. E.g:

<fieldset class="element">
          <legend class="voeg-element" placeholder="voeg element toe" cdkDropList
          #doneList="cdkDropList"
          [cdkDropListData]="done"
          (cdkDropListDropped)="drop($event)">
          <div [ngSwitch]="item" class="cdkdrag" *ngFor="let item of done" cdkDrag>
            <div *ngSwitchCase="'Textbox'">
              <input kendoTextBox>
            </div>
            <div *ngSwitchCase="'Textarea'">
              <textarea kendoTextArea></textarea>
            </div>
            <div *ngSwitchDefault>{{item}}</div>
            </div>
        </legend>
        </fieldset>

alright!!! Thanks, that turned out to be one of the problems. Another one was that I was obligated to add the cdkDragData of the Textbox, because otherwise the textbox wouldn't be recognized by the switch. Thank you, it was a stupid mistake but now I know what to do first, when I make such mistake again! — Liza Darwesh, Nov 07 '19 at 14:22

How to solve the ngSwitchCase in Angular?

1 Answers1