• Email Address: forum@outsourcepath.com
English
  • English
Topics related to angular reusable modules

Custom Component and Shared Module in Ionic

This article will guide you on how to create custom components and shared modules in Ionic App.
#IonicModule is an #NgModule that #bootstraps an #Ionic #App. By passing a root component, IonicModule will make sure that all of the components, directives, and providers from the framework are imported. Any configuration for the app can be passed as the second argument to forRoot .
To create a shared module and include that new shared module as an import for the page modules that need the header:
shared.module.ts

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

@NgModule({
    imports: [
        CommonModule,
        IonicModule
    ],
    declarations: [HeaderComponent],
    exports: [HeaderComponent]
})
export class SharedModule {}

Then for the home.module.ts
@NgModule({
  imports: [
    CommonModule,
    FormsModule,
    IonicModule,
    SharedModule,
    RouterModule.forChild(routes),  
  ],
  declarations: [HomePage]
})
export class HomePageModule {}

Recent Post