Custom components in Ionic 3 - Tutorial

Ionic provides lot components by default, but if we want to customize our App more we can create custom components. Using custom components reduce a lot of development effort and makes the app development faster & optimized.

This tutorial describes creating custom components and using them in the pages across the App and also describes passing data between page and custom component. 

Let's get started...

First, generate a component using the following command in the ionic CLI. In this scenario, we are using an input text custom component.

ionic generate component my-text

The above command will create my-text component under src/components directory

src/components/my-text.ts

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

/**
 * Generated class for the MyTextComponent component.
 *
 * See https://angular.io/api/core/Component for more info on Angular
 * Components.
 */
@Component({
  selector: 'my-text',
  templateUrl: 'my-text.html'
})
export class MyTextComponent {

text: string;

  constructor() {

    console.log('Hello MyTextComponent Component');

    this.text = 'Hello World';

  }

}

Before using the component we have to set it up in app.module.ts

app.module.ts

import { BrowserModule } from '@angular/platform-browser';
import { ErrorHandler, NgModule } from '@angular/core';
import { IonicApp, IonicErrorHandler, IonicModule } from 'ionic-angular';

import { MyApp } from './app.component';
import { HomePage } from '../pages/home/home';
import { ListPage } from '../pages/list/list';

import { StatusBar } from '@ionic-native/status-bar';
import { SplashScreen } from '@ionic-native/splash-screen';

import { MyTextComponent } from '../components/my-text/my-text';

@NgModule({
  declarations: [
    MyApp,
    HomePage,
    ListPage,
    MyTextComponent
  ],
  imports: [
    BrowserModule,
    IonicModule.forRoot(MyApp),
  ],
  bootstrap: [IonicApp],
  entryComponents: [
    MyApp,
    HomePage,
    ListPage
  ],
  providers: [
    StatusBar,
    SplashScreen,
    {provide: ErrorHandler, useClass: IonicErrorHandler}
  ]
})
export class AppModule {}

Now we can use the component across all the pages. Let's declare the component in the home page.

home.html

<ion-header>
  <ion-navbar>
    <button ion-button menuToggle>
      <ion-icon name="menu"></ion-icon>
    </button>
    <ion-title>Home</ion-title>
  </ion-navbar>
</ion-header>

<ion-content padding>

  <my-text> </my-text>

</ion-content>

In the below image the component is imported and displayed with the default value 'Hello World.'

Let's design our custom component; 

src/components/my-text.html

<div>
  <ion-item>
  <ion-input [placeholder]="text" (keyup)="sendData('Kinns Tech')"></ion-input>
  </ion-item>
</div>

src/components/my-text.ts

import { Component, Input, Output, EventEmitter } from '@angular/core';

/**
 * Generated class for the MyTextComponent component.
 *
 * See https://angular.io/api/core/Component for more info on Angular
 * Components.
 */
@Component({
  selector: 'my-text',
  templateUrl: 'my-text.html'
})
export class MyTextComponent {

  text: string;

  @Input("plc") plc;

  @Output() opt = new EventEmitter();

  constructor() {
    console.log('Hello MyTextComponent Component');
    this.text = 'Hello World';
  }

  ngAfterViewInit(){
  this.text = this.plc;
  }

  sendData(val){
  this.opt.emit(val);
  }


}

In the above code, one input and one output variables are created in custom component for receiving data from the page and sending data to the page when an event occurs.

 Input variable is used to assign a value to the placeholder of the component's ion-input and the output variable is used to send some data(string) to the page where the component is used or declared when the keyup event(when a key is pressed) occurs using sendData() function.

Now let's declare the updated custom component in the home page;

home.html

<ion-header>
  <ion-navbar>
    <button ion-button menuToggle>
      <ion-icon name="menu"></ion-icon>
    </button>
    <ion-title>Home</ion-title>
  </ion-navbar>
</ion-header>

<ion-content padding>

  <my-text plc="Enter your email" (opt)="receiveData($event)"> </my-text>

</ion-content>

home.ts

import { Component } from '@angular/core';
import { NavController } from 'ionic-angular';

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

opt;

  constructor(public navCtrl: NavController) {

  }

  receiveData(val){
  console.log('Received value is '+val);
  }

}

In the above code, the custom component is declared in the home page.  The output is received through the opt output variable using receiveData($event) function. ie., when a key has pressed a string or data is received in the page.

On keyup event data will be received in the home page.

Here is the video tutorial

:) Thanks for visiting this blog, if you have any questions please comment in the comment box below. If you like this blog please don't forget to like, follow & share this blog. Subscribe to my YouTube channel for updates.

Kinns Tech

Facebook:  /kinnstech

Twitter:      /KinnsTech

YouTube:   Kinns Tech