# ngSwitchCase problem for dynamic data

**URL:** <https://forum.ionicframework.com/t/ngswitchcase-problem-for-dynamic-data/96507>\
**Category:** ionic-v3\
**Created:** [July 1, 2017, 12:35am UTC](https://forum.ionicframework.com/t/ngswitchcase-problem-for-dynamic-data/96507 "2017-07-01T00:35:25Z")\
**Posts on this page:** 8\
**Page:** 1

<div class="post-metadata">

**Author:** ![ismailcse11](https://avatars.discourse-cdn.com/v4/letter/i/df788c/32.png) [@ismailcse11](https://forum.ionicframework.com/u/ismailcse11)\
**Post date:** [July 1, 2017, 12:35am UTC](https://forum.ionicframework.com/t/ngswitchcase-problem-for-dynamic-data/96507/1 "2017-07-01T00:35:25Z")

</div>

## html

```auto
<div [ngSwitch]="color">
	<ion-list *ngFor="let colorList of colorData" > 
		<ion-item *ngSwitchCase="'{{colorList.colorName}}'" >
			
			<ion-label>{{colorList.colorName}}</ion-label>
		</ion-item>
	</ion-list>
</div>

```

## error show

Unhandled Promise rejection: Template parse errors:  
Can’t bind to ‘\*ngSwitchCase’ since it isn’t a known property of ‘ion-item’.

May i use `*ngSwitchCase="'{{colorList.color_name}}'"` for dynamic data? Am i right or wrong. Please anybody help. Thanks in advanced.

---

<div class="post-metadata">

**Author:** ![rapropos](https://sea1.discourse-cdn.com/ionicframework/user_avatar/forum.ionicframework.com/rapropos/32/100227_2.png) [@rapropos](https://forum.ionicframework.com/u/rapropos)\
**Post date:** [July 1, 2017, 3:01am UTC](https://forum.ionicframework.com/t/ngswitchcase-problem-for-dynamic-data/96507/2 "2017-07-01T03:01:45Z")

</div>

By any chance are you using lazy page loading?

---

<div class="post-metadata">

**Author:** ![ismailcse11](https://avatars.discourse-cdn.com/v4/letter/i/df788c/32.png) [@ismailcse11](https://forum.ionicframework.com/u/ismailcse11)\
**Post date:** [July 1, 2017, 1:32pm UTC](https://forum.ionicframework.com/t/ngswitchcase-problem-for-dynamic-data/96507/3 "2017-07-01T13:32:10Z")

</div>

no brother. I am using it after modal loading.

---

<div class="post-metadata">

**Author:** ![crichmond](https://sea1.discourse-cdn.com/ionicframework/user_avatar/forum.ionicframework.com/crichmond/32/113952_2.png) [@crichmond](https://forum.ionicframework.com/u/crichmond)\
**Post date:** [October 6, 2017, 8:56pm UTC](https://forum.ionicframework.com/t/ngswitchcase-problem-for-dynamic-data/96507/4 "2017-10-06T20:56:07Z")

</div>

Hey @ismailcse11, it’s been a while since you asked so I hope you were able to solve or work around your issue. But if you haven’t – or for anyone else who ran into this like I did – you need to have the ngFor wrapping the ngSwitch and ngSwitchCase, like this:

```auto
<div *ngFor="let option of options">
  <div [ngSwitch]="which">
    <div *ngSwitchCase="option">
      {{option}}
    </div>
  </div>
</div>

```

I know this seems rather counterintuitive, and it can make things like lists and items a little strange to structure, but it gets around the error.

---

<div class="post-metadata">

**Author:** ![ismailcse11](https://avatars.discourse-cdn.com/v4/letter/i/df788c/32.png) [@ismailcse11](https://forum.ionicframework.com/u/ismailcse11)\
**Post date:** [October 24, 2017, 10:41am UTC](https://forum.ionicframework.com/t/ngswitchcase-problem-for-dynamic-data/96507/5 "2017-10-24T10:41:30Z")

</div>

I solved this a long day ago. Thanks for your reply.

---

<div class="post-metadata">

**Author:** ![pooja14](https://avatars.discourse-cdn.com/v4/letter/p/bbe5ce/32.png) [@pooja14](https://forum.ionicframework.com/u/pooja14)\
**Post date:** [February 26, 2018, 1:23pm UTC](https://forum.ionicframework.com/t/ngswitchcase-problem-for-dynamic-data/96507/6 "2018-02-26T13:23:34Z")

</div>

Continuing the discussion from [ngSwitchCase problem for dynamic data](https://forum.ionicframework.com/t/ngswitchcase-problem-for-dynamic-data/96507/5):

Can you tell? how the dynamic segment are created.

---

<div class="post-metadata">

**Author:** ![vibinflogesoft](https://sea1.discourse-cdn.com/ionicframework/user_avatar/forum.ionicframework.com/vibinflogesoft/32/117525_2.png) [@vibinflogesoft](https://forum.ionicframework.com/u/vibinflogesoft)\
**Post date:** [February 26, 2018, 1:48pm UTC](https://forum.ionicframework.com/t/ngswitchcase-problem-for-dynamic-data/96507/7 "2018-02-26T13:48:15Z")

</div>

@pooja14  
You can try this instead of ngSwitchCase

```auto
<ion-segment [(ngModel)]="selectedSegment" (ionChange)="onSegmentChanged($event)" *ngIf="productcategory">
    <ion-segment-button value="{{segment.catid}}" *ngFor="let segment of productcategory" (ionChange)="onSegmentChanged($event)">
        {{segment.catname}}
    </ion-segment-button>
  </ion-segment>

```

---

<div class="post-metadata">

**Author:** ![pooja14](https://avatars.discourse-cdn.com/v4/letter/p/bbe5ce/32.png) [@pooja14](https://forum.ionicframework.com/u/pooja14)\
**Post date:** [February 27, 2018, 4:29am UTC](https://forum.ionicframework.com/t/ngswitchcase-problem-for-dynamic-data/96507/8 "2018-02-27T04:29:06Z")

</div>

hey can you provide .ts file and .html file both code? so i can better understood.