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

Add the following code in header.component.ts

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

ngOnInit() {
}

signin() {

this.route.navigateByUrl('/registration');

}
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';

@NgModule({
declarations: [HeaderComponent],
imports: [
CommonModule,
],
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

<app-header></app-header>
<ion-content>
<ion-header>
<ion-toolbar color="primary">
<ion-title >
{{LOGIN}}
</ion-title>
</ion-toolbar>
</ion-header>
<div>
<form [formGroup]="loginForm">
<ion-item lines="none">
<ion-input formControlName="email" type="email" placeholder={{email}></ion-input>
</ion-item>
</div>
<br>
<ion-item lines="none ">
<ion-input formControlName="password" placeholder={{password}}></ion-input>
<ion-icon [name]="passowrdToggleIcon" item-right (click)="togglePassword()"></ion-icon>
</ion-item>
</div>
<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>
</form>
<span class="divider line one-line ">{{or}}</span>
<span class="already ">{{Don’t have an Account? }}
<a (click)="register() " class="small-text ">{{signup}}</a>
</span>
</div>
</div>
</ion-content>

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 './login.page';
import { SharedComponentModule } from '../component/shared-component.module';
import { ReactiveFormsModule } from '@angular/forms';

@NgModule({
imports: [
CommonModule,
IonicModule,
LoginPageRoutingModule,
SharedComponentModule,
ReactiveFormsModule
],
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.

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

Conclusion

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