Call Us! 1-800-383-5193
Call Us! 1-800-383-5193
Call Us! 1-800-383-5193

Need Help?

Emergency Response Time custom

Our experts have had an average response time of 12.45 minutes in December 2020 to fix urgent issues.

We will keep your servers stable, secure and fast at all times for one fixed price.

Custom Component and Shared Module in Ionic – How we create it

by | Jan 9, 2021

Wondering how to create a Custom Component and Shared Module in Ionic? We can help you with it.

Here at Bobcares, we have seen several such App-related queries as part of our Development Services for developers.

Today, we will take a look at how to create a custom component and shared module in Ionic App.


Custom Component and Shared Module in Ionic

Now let’s see how our Engineers create a Shared Module in Ionic Application.

1. Create a new Ionic Application

First, we create an Ionic application using the latest Ionic CLI. For that, we use the below command.

$ npm install -g @ionic/cli

Next, we create a new Angular Ionic blank application. For that, we run the below command.

$ ionic start IonicComponents blank –type=angular


2. Create an ionic custom component

Now, we create a component by running the below command.

$ ionic g component components/header

After that, we add the following code in header.component.html

<ion-toolbar color="primary">
<ion-title(click)="openLanguagePopover($event)" slot="end">{{language}}</ion-title>
<ion-title (click)="Signin()" slot="end">{{Sign Up}}</ion-title>

Add the following code in header.component.ts

import { Component, OnInit } from '@angular/core';
import { Storage } from '@ionic/storage';
import { PopoverController } from '@ionic/angular';
selector: 'app-header',
templateUrl: './header.component.html',
styleUrls: ['./header.component.scss'],
export class HeaderComponent implements OnInit {
public popoverController: PopoverController,
public storage: Storage,
) { }

ngOnInit() {

signin() {


async presentPopover(ev: any) {
const popover = await this.popoverController.create({
component: PopoverComponent,
event: ev,
translucent: true
return await popover.present();


3. Create a Shared Module

In order to create a shared module, we make use of the below command.

$ ionic g module modules/shared

We can declare the components only in one module and their access is inherited in any way. It means if we declare a component in the main app module then we can’t access it in any other module. However, if we wish to use a component in other modules then the best solution to it is to create a shared module.

To access the component we created that is the header component in a different part of the app we need to import it into the shared module like this,

import { NgModule } from '@angular/core';
import { CommonModule } from '@angular/common';
import { HeaderComponent } from './header/header.component';

declarations: [HeaderComponent],
imports: [
exports: [HeaderComponent],
export class SharedComponentModule { }

This way, we can import multiple components into the shared module. After importing the components in the shared module we will import the shared module in a page where we want to use the header component like this.

In login.html

<ion-toolbar color="primary">
<ion-title >
<form [formGroup]="loginForm">
<ion-item lines="none">
<ion-input formControlName="email" type="email" placeholder={{email}></ion-input>
<ion-item lines="none ">
<ion-input formControlName="password" placeholder={{password}}></ion-input>
<ion-icon [name]="passowrdToggleIcon" item-right (click)="togglePassword()"></ion-icon>
<a style="padding-top:2% " (click)="forgotpassword() " class="password ">{{forgot}}</a>
<ion-button (click)="login() " [disabled]="!loginForm.valid " color="primary " fill="solid " expand="block ">{{LOGIN}}</ion-button>
<span class="divider line one-line ">{{or}}</span>
<span class="already ">{{Don’t have an Account? }}
<a (click)="register() " class="small-text ">{{signup}}</a>

In login.module.ts add the shared module,

import { NgModule } from '@angular/core';
import { CommonModule } from '@angular/common';
import { IonicModule } from '@ionic/angular';
import { LoginPageRoutingModule } from './login-routing.module';
import { LoginPage } from './';
import { SharedComponentModule } from '../component/shared-component.module';
import { ReactiveFormsModule } from '@angular/forms';

imports: [
declarations: [LoginPage]
export class LoginPageModule { }

SharedModule includes components, directives, and pipes that we use everywhere in an app. This module should consist entirely of declarations, most of them exported.

For example, here is an image of how the shared module with the header component will look like on the login page.

Custom Component and Shared Module in Ionic

[Need any further assistance with the Ionic Application? – Our experts can help you]



Today, we saw how our Engineers create custom components and shared modules in Ionic App.


Never again lose customers to poor server speed! Let us help you.

Our server experts will monitor & maintain your server 24/7 so that it remains lightning fast and secure.


var google_conversion_label = "owonCMyG5nEQ0aD71QM";


Submit a Comment

Your email address will not be published. Required fields are marked *

Related Posts