CODEWITHSUNDEEP
angularionic-frameworkionic3
Taieb
Taieb

Reputation: 920

Display different view on condition

I want to get a different view if i get a null on my ngfor 

    <ion-select interface="popover" [ngModel]="selectedKidId">
      <ion-option *ngFor="let kid of kids" [value]="kid.id">{{kid.name}}</ion-option>
    </ion-select>
  </ion-item>

This will show me a list of kids name, i want to get a different view that call a component that i created if there is no kid on the list. is there a way to do it ?

Thank you

kids.ts

export class KidsPage {
  selectedKidId: string
  kids: Kid[] = []
  loveAmount: number

  constructor(
    public navCtrl: NavController,
    public navParams: NavParams,
    public modalCtrl: ModalController,
    private kidProvider: kidProvider,
  ) {
  }

  ionViewDidLoad() {

    this.initKids()
  }

  initkids() {
    this.kidProvider.getkid().subscribe(
      ({ data }) => {
        this.kids = data['mykids']
        if (this.kids.length > 0) {
          this.selectedKidId= this.kids[0].id
        }
      },
      (error) => {
        console.log(`getKids failed: ${JSON.stringify(error)}`)
      })
    this.kidProvider.subscribeToKids()
  }

Upvotes: 0

Views: 43

Answers (1)

Pardeep Jain
Pardeep Jain

Reputation: 86730

You can use if-else condition in your view as well like this :

<div *ngIf='kids.length'>
  <ion-select interface="popover" [ngModel]="selectedKidId">
    <ion-option *ngFor="let kid of kids" [value]="kid.id">{{kid.name}}</ion-option>
  </ion-select>
</div>
<add-kid *ngIf='!kids.length'></add-kid>

Upvotes: 1

Related Questions