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