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