How to Create Custom Component in Ionic 4 and Page Linkup?

The component is one of the building blocks of the ionic framework. Here we will be creating our 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 , in our case. using in home.html page

The following step by step discuss how to create a custom component:

Step 1: First create a ionic 4 project.

Step 2: In your terminal or git bish, comandprompt /terminal of your project path hit the cmd.

ionic g module components

Step 3: Hit the next cmd after the first cmd.

The ionic g component components/myComponent

Step 4: in components.module.ts.

import { NgModule } from '@angular/core';
import { CommonModule } from '@angular/common';
//Important section
import { TabcomponentComponent } from './tabcomponent/tabcomponent.component';
import { VendortabComponent } from './vendortab/vendortab.component';

@NgModule({
  declarations: [
    TabcomponentComponent,
    VendortabComponent
  ],
  imports: [
    CommonModule
  ],
  exports: [
    TabcomponentComponent,
    VendortabComponent
  ]
})
export class ComponentsModule { }

In the above section you see the TabcomponentComponent, VendortabComponent they are two custom components that are imported and add in the declaration and eports section of components.module.ts.

Step 5: tabcomponent.component.ts file

import { Component, OnInit,ViewChild } from '@angular/core';
import { Routes, RouterModule, Router } from '@angular/router';

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

  constructor(public router:Router) { }

  ngOnInit() {}

  home(){
    this.router.navigateByUrl('/home');
  }

  myproject() {
    this.router.navigateByUrl('/mybooking-ongoing-listing');
  }

  profile(){
    this.router.navigateByUrl('/userprofile');
  }

  message(){
    this.router.navigateByUrl('/message-listing');
  }

}

In this above section, you see how-to page is linked up. In this code, you see the selector that is used in HTML for working with this component on the specific HTML page.

Step 6: in home.page.html.

<!-- <MyTabsComponent></MyTabsComponent> -->
<app-tabcomponent></app-tabcomponent>

On this specific page call the selector to do the component call.

Step 7: home.module.ts

import { NgModule,CUSTOM_ELEMENTS_SCHEMA, NO_ERRORS_SCHEMA } from '@angular/core';
import { ComponentsModule } from '../components/components.module'
@NgModule({
  imports: [
    CommonModule,
    FormsModule,
    IonicModule,
    ComponentsModule,//this is component module call..
    RouterModule.forChild([
      {
        path: '',
        component: HomePage
      }
    ])
  ],
  declarations: [HomePage],
  schemas: [CUSTOM_ELEMENTS_SCHEMA,NO_ERRORS_SCHEMA]
})
export class HomePageModule {}

In the above section, two import sections were added and ngmodule imports array added ComponentsModule.In which specific page you want to call custom component then this page module added three parts which are discussed before.

Step 8: How to page linked up that is discussed before but in here call the function from tabcomponent.component.html file.

div class="hm_footer_tab">
  <ul>
    <li (click)="home()"><img src="assets/img/Outcry-home.png"><p>Home</p></li>
    <li (click)="myproject()"><img src="assets/img/Outcry-my-booking.png"><p>My Booking</p></li>
    //Important section
    <li (click)="message()"><div class="hm_red_circle">18</div><img src="assets/img/Outcry-message.png"><p>Message</p></li>
    <li (click)="profile()"><img src="assets/img/Outcry-profile.png"><p>Profile</p></li>
    <div class="hm_clear"></div>
  </ul>
</div>

Conclusion:

It is already tested it works fine if you set up the whole process step by step and you call this component on any page and functionality works everywhere, where it is added.

Please apply for Ionic mobile app development and share your reviews in the comment section.