ngSwitch isn't rendering components in Page

Ionic Framework
1

I have a page that I want to render a different nested component depending on the data given. When I simply write the component tag outside of the ngSwitch statement it will render, but inside it will not. Any help would be appreciated. I don’t know what I am doing wrong in my ngSwitch statement. Is it possible that this is a bug in Ionic?

<ion-content *ngIf="pageObject">

  <!-- <app-std-layout [flashCards]="pageObject.flashCards"></app-std-layout> -->
  <div [ngSwitch]="pageObject.pageType">
    <app-std-layout *ngSwitchCase="'std'" [flashCards]="pageObject.flashCards"></app-std-layout>
    <app-mmp-layout *ngSwitchCase="'mmp'"></app-mmp-layout>
    <app-std-layout *ngSwitchDefault [flashCards]="pageObject.flashCards"></app-std-layout>
  </div>

</ion-content>

My component is as follows~

<ion-content>

  <div *ngFor="let fcard of flashCards">
    <app-flashcards [flashcard]="fcard"></app-flashcards>
  </div>

</ion-content>
2

Ok so I solved my issue. In <app-std-layout> component I need to get rid of the <ion-content> tags

  <div *ngFor="let fcard of flashCards">
    <app-flashcards [flashcard]="fcard"></app-flashcards>
  </div>

I suppose <ion-content> tags cannot be embedded in one another.

3

Hi joervargas3 don’t worry I am here to help you,
follow the below sample code your help

<ion-segment [(ngModel)]="category" color="success" style="width: 100%; display: -webkit-box;
    display: -webkit-flex;
    display: -ms-flexbox;
    display: flex;
    -webkit-box-flex: 1;
    -webkit-flex: 1;
    -ms-flex: 1;
    flex: 1;
    -webkit-align-self: center;
    -ms-flex-item-align: center;
    align-self: center;
    -webkit-box-pack: center;
    -webkit-justify-content: center;
    -ms-flex-pack: center;
    justify-content: center;
    width: 100%;
    padding:0 5px 0 5px;">
  <ion-segment-button value="movies" style="width: 100%; display: -webkit-box;
      display: -webkit-flex;
      display: -ms-flexbox;
      display: flex;
      -webkit-box-flex: 1;
      -webkit-flex: 1;
      -ms-flex: 1;
      flex: 1;
      -webkit-align-self: center;
      -ms-flex-item-align: center;
      align-self: center;
      -webkit-box-pack: center;
      -webkit-justify-content: center;
      -ms-flex-pack: center;
      justify-content: center;
      width: 100%;
      padding:0 5px 0 5px;">
    Overview
  </ion-segment-button>
  <!-- <ion-segment-button value="tvshows" style="width: 100%; display: -webkit-box;
      display: -webkit-flex;
      display: -ms-flexbox;
      display: flex;
      -webkit-box-flex: 1;
      -webkit-flex: 1;
      -ms-flex: 1;
      flex: 1;
      -webkit-align-self: center;
      -ms-flex-item-align: center;
      align-self: center;
      -webkit-box-pack: center;
      -webkit-justify-content: center;
      -ms-flex-pack: center;
      justify-content: center;
      width: 100%;
      padding:0 5px 0 5px;">
    Education
  </ion-segment-button>
  <ion-segment-button value="animated" style="width: 100%; display: -webkit-box;
      display: -webkit-flex;
      display: -ms-flexbox;
      display: flex;
      -webkit-box-flex: 1;
      -webkit-flex: 1;
      -ms-flex: 1;
      flex: 1;
      -webkit-align-self: center;
      -ms-flex-item-align: center;
      align-self: center;
      -webkit-box-pack: center;
      -webkit-justify-content: center;
      -ms-flex-pack: center;
      justify-content: center;
      width: 100%;
      padding:0 5px 0 5px;">
    Experience
  </ion-segment-button> -->
</ion-segment>

  <ion-card color="light">
    <ion-card-content>
      <table class="fixed" style="width: 100%;">
        <tr style="font-size: 12px;font-weight: bold;">
          <td style="width: 50%;">Employee Id</td>
          <td style="width: 50%;" text-right> {{loginEmployeeDetail.EmployeeID}} </td>
        </tr>
        <div style="height: 10px;"></div>
        <tr style="font-size: 12px;font-weight: bold;">
          <td style="width: 50%;">Phone</td>
          <td style="width: 50%;" text-right> {{loginEmployeeDetail.Mobile}} </td>
        </tr>
        <div style="height: 10px;"></div>
        <tr style="font-size: 12px;font-weight: bold;width: 100%;">
          <td style="width: 100%;">Email </td>
          <td style="width: 50%;" text-right>{{loginEmployeeDetail.Email01}}</td>
        </tr>
        <div style="height: 10px;"></div>
        <tr style="font-size: 12px;font-weight: bold;">
          <td style="width: 50%;">Birthday</td>
          <td style="width: 50%;" text-right> {{loginEmployeeDetail.DateOfBirth}} </td>
        </tr>
        <div style="height: 10px;"></div>
        <tr style="font-size: 12px;font-weight: bold;">
          <td style="width: 50%;">Gender</td>
          <td style="width: 50%;" text-right> {{loginEmployeeDetail.Gender}} </td>
        </tr>
        <div style="height: 10px;"></div>
        <tr style="font-size: 12px;font-weight: bold;width: 100%;">
          <td style="width: 100%;">Address </td>
          <td style="width: 50%;" text-right>{{loginEmployeeDetail.Address}}</td>
        </tr>
        <div style="height: 10px;"></div>
        <tr style="font-size: 12px;font-weight: bold;">
          <td style="width: 50%;">Hire Date</td>
          <td style="width: 50%;" text-right> {{loginEmployeeDetail.HireDate}} </td>
        </tr>
        <div style="height: 10px;"></div>
        <tr style="font-size: 12px;font-weight: bold;">
          <td style="width: 50%;">Department</td>
          <td style="width: 50%;" text-right> {{loginEmployeeDetail.DepartmentID}} </td>
        </tr>
        <div style="height: 10px;"></div>
        <tr style="font-size: 12px;font-weight: bold;width: 100%;">
          <td style="width: 100%;">Position </td>
          <td style="width: 50%;" text-right>{{loginEmployeeDetail.DepartmentID}}</td>
        </tr>
        <div style="height: 10px;"></div>
        <tr style="font-size: 12px;font-weight: bold;width: 100%;">
          <td style="width: 100%;">Shift </td>
          <td style="width: 50%;" text-right>{{loginEmployeeDetail.DepartmentID}}</td>
        </tr>
        <div style="height: 10px;"></div>
        <tr style="font-size: 12px;font-weight: bold;width: 100%;">
          <td style="width: 100%;">Skills </td>
          <td style="width: 50%;" text-right>{{loginEmployeeDetail.DepartmentID}}</td>
        </tr>
      </table>
    </ion-card-content>
  </ion-card>

</ion-list>

<ion-list *ngSwitchCase="'tvshows'">

  <ion-item>
    <ion-label>
      <span slot="start"
        style="height: 10px;width: 10px;background-color: #10BD7B;border-radius: 50%;display: inline-block;"></span>
      <span style="font-weight: bold;font-size: 15px;color: #000;">International college of arts and Science
      </span>
      <br />
      <span style="font-size: 12px;">BCS Computer Science</span>
      <br />
      <span style="font-size: 10px;">2000-2003</span>
    </ion-label>
  </ion-item>
  <ion-item>
    <ion-label>
      <span slot="start" style="height: 10px;
              width: 10px;
              background-color: rgba(241,37,26,1);
              border-radius: 50%;
              display: inline-block;"></span>
      <span style="font-weight: bold;font-size: 15px;color: #000;">International college of arts and Science
      </span>
      <br />
      <span style="font-size: 12px;">BCS Computer Science</span>
      <br />
      <span style="font-size: 10px;">2000-2003</span>
    </ion-label>
  </ion-item>
</ion-list>

<ion-list *ngSwitchCase="'animated'">
  <ion-item>
    <ion-label>
      <span slot="start"
        style="height: 10px;width: 10px;background-color: #10BD7B;border-radius: 50%;display: inline-block;"></span>
      <span style="font-weight: bold;font-size: 15px;color: #000;">Mobile Application Developer
      </span>
      <br />
      <span style="font-size: 12px;">BCS Computer Science</span>
      <br />
      <span style="font-size: 10px;">2000-2003</span>
    </ion-label>
  </ion-item>
  <ion-item>
    <ion-label>
      <span slot="start" style="height: 10px;
                  width: 10px;
                  background-color: rgba(241,37,26,1);
                  border-radius: 50%;
                  display: inline-block;"></span>
      <span style="font-weight: bold;font-size: 15px;color: #000;">Mobile Application Developer
      </span>
      <br />
      <span style="font-size: 12px;">A2Z Creatorz Mobile Leading Agency</span>
      <br />
      <span style="font-size: 10px;">2000-2003</span>
    </ion-label>
  </ion-item>
  <ion-item>
    <ion-label>
      <span slot="start" style="height: 10px;
                    width: 10px;
                    background-color: rgba(241,37,26,1);
                    border-radius: 50%;
                    display: inline-block;"></span>
      <span style="font-weight: bold;font-size: 15px;color: #000;">Mobile Application Developer
      </span>
      <br />
      <span style="font-size: 12px;">IITCS</span>
      <br />
      <span style="font-size: 10px;">2000-2003</span>
    </ion-label>
  </ion-item>
</ion-list>

this is for html file now below is for ts file

public category: string = ‘movies’;
public categories: Array = [‘movies’, ‘tvshows’, ‘animated’]

customAlertOptions: any = {
header: ‘SAL’,
subHeader: ‘Select Driver’,
message: ‘Select a driver to assign him’,
translucent: true
};

loginEmployeeDetail: any = ;
constructor() {
this.loginEmployeeDetail = ;
this.loginEmployeeDetail = Global.loginEmployeeData;
}
onTabChanged(tabName) {
this.category = tabName;
}

cheers!!