Custom Tag or Component & If and Else in Ionic 3

The component is one of the building blocks of the ionic framework. Here we will be creating our own custom component. Components are the class, with HTML template. For our custom component have a decorator that is @Component, to add metadata to a class to describe the component.

Important concept:

  1. We can create a custom component, that can be used in anywhere. Data in the component are private.
  2. Component name <person>, in our case. using in home.html page
  3. Learning *ngIf and else condition

Our Apps we have a custom component with its own variables and template.

Step 1: ionic start MyComponent blank
Step 2: Add the following code in home.html

<ion-header>
  <ion-navbar color="primary">
    <ion-title center>
      University Record
    </ion-title>
  </ion-navbar>
</ion-header>
 
<ion-content padding>
    <ion-card>
      <ion-card-header>
        Person Profile
      </ion-card-header>
      <ion-card-content>
          Check Person profile of Lecture & Student!
      </ion-card-content>
    </ion-card>
 
    <person></person>
</ion-content>

We will create a custom tag called, is custom tag or component, where toggle on Person Profile will display Student information and toggle off will display lecture information as shown in above example.

Step 3: Add the following code in home.ts

import { Component } from '@angular/core';
import { NavController } from 'ionic-angular';
import { PersonComponent } from '../../components/person/person';

@Component({
  selector: 'page-home',
  templateUrl: 'home.html'
})
export class HomePage {

  constructor(public navCtrl: NavController) {

  }

}

Step 3: We need to create custom component code.

ionic g component Person

Add the following code in src/components/person/person.ts

import { Component } from '@angular/core';

@Component({
  selector: 'person',
  templateUrl: 'person.html'
})
export class PersonComponent {

  public data: any = {myToggle : true};

  constructor() {
    console.log('Hello PersonComponent Component');
  }

}

Step 4: We need to add following code in person.html

<ion-list>
  <ion-item>
      <ion-label>Profile</ion-label>
      <ion-toggle (click) = "isClicked(data.myToggle)" [(ngModel)] = "data.myToggle">
      </ion-toggle>
  </ion-item>
</ion-list>
  <div *ngIf="data.myToggle; then student else lecture"></div>  

  <ng-template #student>
    <ion-card>
      <ion-card-header>              
        Student Profile
      </ion-card-header>
    
      <ion-list >
        <button ion-item>
          Name : xyz
        </button>
        
        <button ion-item>
          Course : Bachelor of Computer 
        </button>
        <button ion-item>
          Year : 2nd Year
        </button>
      </ion-list>
    </ion-card>
  </ng-template>

  <ng-template #lecture>
      <ion-card>
          <ion-card-header>
              Lecture Profile
          </ion-card-header>
    
          <ion-list>
              <button ion-item>
                  Name : ABC
              </button>
              <button ion-item>
                  Department : Computer
              </button>
              <button ion-item>
                  Salary : $ 1000 
              </button>
          </ion-list>
      </ion-card>
  </ng-template>

 

Step 5: Import MyComponet in app.module.ts. Add MyComponent in @NgModule declarations, entry component.