Ionic custom component in details

The ionic component is one of the building blocks of the ionic framework. Ionic has lots of pre-built components like cards, lists, tabs, a grid, and more. Ionic apps are made of high-level building blocks called components, which allow us to construct the UI for our application. Here we will be creating our own custom component in Ionic. Ionic components are the class, with an HTML template. For our custom component in the Ionic Angular project have a decorator that is @Component, to add metadata to a class to describe the component.

Ionic custom component example

Let’s create our own ionic custom component called app-person. If you have not yet installed an Ionic CLI on your system. Then we need to install an Ionic CLI first.

Ionic CLI allows us to create an Angular project, generate application and library code, and perform a variety of ongoing development tasks such as testing, bundling, and deployment. To install the Ionic CLI, open a terminal, and run the following command:

$ npm install -g @ionic/cli

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

In our Apps we have a custom component in ionic with its own variables and template.

Step 1: Creating an ionic custom component example

Let’s first create an ionic custom component project and we’ll also create components called person. Angular components are the class, with an HTML template. With the release of ionic version 4, no longer limited to angular, we can create the ionic projects in different front-end frameworks like Angular, Vue, and React. In these articles, we’re using the Ionic

Angular project and our angular custom component have a decorator that is @Component, to add metadata to a class to describe the component. The easiest and quickest create an Ionic component is using Ionic CLI. To generate an Ionic component, we need to run the following command

ionic start myComponent blank --type=angular
ionic generate component person

Step 2: 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 lines="none">
      <ion-item>
        Name : xyz
      </ion-item>

      <ion-item>
        Course : Bachelor of Computer
      </ion-item>
      <ion-item>
        Year : 2nd Year
      </ion-item>
    </ion-list>
  </ion-card>
</ng-template>

<ng-template #lecture>
  <ion-card>
    <ion-card-header>
      Lecture Profile
    </ion-card-header>

    <ion-list lines="none">
      <ion-item>
        Name : ABC
      </ion-item>
      <ion-item>
        Department : Computer
      </ion-item>
      <ion-item>
        Salary : $ 1000
      </ion-item>
    </ion-list>
  </ion-card>
</ng-template>

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

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

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

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

Step 4: Import Ionic custom components to 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 on our page, and add a 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>

You can check Angular official documentation on the Angular custom component.

Related posts

Ionic custom Component with an examples

Ionic custom Component with an examples

Ionic custom component example

Step 1: Creating an ionic custom component example

Leave a Reply Cancel reply