Search code examples
htmlangularng-switch

How to solve the ngSwitchCase in Angular?

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: enter image description here

Solution

  • 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>