Custom Component in Ionic 4

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 anywhere. Data in the component are private.
  2. Component name <app-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: Create a person component  

ionic generate component person

Step 3: Add the following code in person.component.html

<ion-list>
  <ion-item>
    <ion-label>Profile</ion-label>
    <ion-toggle (click)="isClicked(data.myToggle)" [(ngModel)]="data.myToggle" color="primary">
    </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 4: Add the following code in person.component.html

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

@Component({
  selector: 'app-person',
  templateUrl: './person.component.html',
  styleUrls: ['./person.component.scss'],
})
export class PersonComponent implements OnInit {

  data: any = { myToggle: true };
  constructor() { }

  ngOnInit() { }

}

Step 4:  Import custom component in a page where we want to use, in our case home.module.ts. Add PersonComponen in @NgModule declarations, entry component.

import { NgModule } from '@angular/core';
import { CommonModule } from '@angular/common';
import { IonicModule } from '@ionic/angular';
import { FormsModule } from '@angular/forms';
import { RouterModule } from '@angular/router';

import { HomePage } from './home.page';
import { PersonComponent } from '../../app/person/person.component';

@NgModule({
  imports: [
    CommonModule,
    FormsModule,
    IonicModule,
    RouterModule.forChild([
      {
        path: '',
        component: HomePage
      }
    ])
  ],
  entryComponents: [PersonComponent],
  declarations: [HomePage, PersonComponent]
})
export class HomePageModule {}

Step 5: Now we can use our custom component in our page, add custom component tag in home.html

<ion-header>
  <ion-toolbar>
    <ion-title>
      Ionic Custom Component
    </ion-title>
  </ion-toolbar>
</ion-header>

<ion-content>
  <ion-card>
    <ion-card-header>
      Person Profile
    </ion-card-header>
    <ion-card-content>
      Check Person profile of Lecture & Student!
    </ion-card-content>
  </ion-card>

  <app-person></app-person>
</ion-content>