Components in Ionic Framework 3

Components are one of the best features, that we can find out in the ionic framework. In Simple words, we can say " Components are reusable blocks".

Let's check how we can use this feature in ionic applications. Here I am going to create a 'slides component' and using it on different pages.

First, we can Install the ionic using the following commands

npm install -g cordova ionic
ionic start myApp tabs

We can run the application using these commands

cd myApp
ionic serve

yes, its working perfectly !!! So next am going to add a 'slides component'

we can generate a component using the following command, (ionic framework provides commands for everything you can check it here generate commands)

ionic generate component slides

'slides' is the component name, after executing this command we can verify this by checking the components folder (/src/components/), you can see a folder named 'slides' and inside the folder there will be 3 more files slides.html, slides.scss, slides.ts

So our next step would be adding the slides code to our new component, open components/slides/slides.html and add the code (remove everything), it should be like this

<ion-slides>
    <ion-slide>
        <h1>Home Page Slide 1</h1>
    </ion-slide>

    <ion-slide>
        <h1>Home Page Slide 2</h1>
    </ion-slide>

    <ion-slide>
        <h1>Home Page Slide 3</h1>
    </ion-slide>
</ion-slides>

Our 'slides' component is ready !!!!

Now Back to our home page, Open home.ts and import the slider component

import { SlidesComponent } from "../../components/slides/slides";

Next we need to create a home.module.ts under 'pages/home/' folder and import Ngmodule,IonicPageModule,homepage and componentsModule to 'home.module.ts' page

import { NgModule } from "@angular/core";
import { IonicPageModule } from "ionic-angular";
import { HomePage } from "./home";
import { ComponentsModule } from "../../components/components.module";

After that declare the homepage and import ComponentsModule

@NgModule({
  declarations: [HomePage],
  imports: [
    IonicPageModule.forChild(HomePage),
    ComponentsModule
  ]
})
export class HomePageModule {}

'HomePageModule' is the module name, Here we imported ComponentsModule Lets take a look in our components.module.ts (src/components/) file, there we can see that slidecomponent is already imported

Here we need to import CUSTOM_ELEMENTS_SCHEMA , which is using for custom HTML tags

import { NgModule, CUSTOM_ELEMENTS_SCHEMA } from '@angular/core';
import { SlidesComponent } from './slides/slides';
import { IonicPageModule } from "ionic-angular";
@NgModule({
    declarations: [SlidesComponent],
    imports: [IonicPageModule.forChild(SlidesComponent)],
    exports: [SlidesComponent],
  schemas: [CUSTOM_ELEMENTS_SCHEMA]

})
export class ComponentsModule {}

Finally we need to make some changes in our app.module.ts, Open src/app/app.module.ts file

remove this line

import { HomePage } from '../pages/home/home';

and add

import { HomePageModule } from '../pages/home/home.module';

add 'HomePageModule' under imports remove HomePage from declarations and entryComponents

All the process are done, now we need to call the slide slidecomponent in the home page, we are using the following custom html for that

<slides></slides>

slides is our component name, we can use it in any place inside the page

Lets check how we can implement this by passing data dynamically

We are going to pass the 'slider content' to component and display it

First add an array variable in 'home.ts' and add data manually

slideContent: Array<{ content: string; }>;
this.slideContent = [
      { content: "Content home page 1"},
      { content: "Content home page 2"},
      { content: "Content home page 3"}
    ];

Next we need to pass this data to component, we can pass like this

<slides [slideContent]="slideContent"></slides>

Next open the slide.ts file and declare the slideContent

@Input() slideContent: Array<{ content: string; }>; 

Inside slides.html (component/slides/), loop and display slide using ngfor

<ion-slides>
    <ion-slide *ngFor="let c of slideContent;">
        <h1>{{c.content}}</h1>
    </ion-slide>
</ion-slides>

We can use components for different purposes, we can make our header/sidemenu/footer as a component and use it all pages.

download code: https://github.com/PRADEEPPP/ionic-Components