Ionic 4 custom components

Question

How do you load a component in ionic 4 after running the command ionic g component myComponent? I want to add a new generated custom component to my home page.

Answer 1

Finally figured this out, here's a repro that works:

ionic start myProject blank --type=angular
ionic g module components
ionic g component components/myComponent --export

This adds both a declaration and export to the components module for "myComponent".

To use the component just add ComponentsModule to your imports in your page module, e.g.

@NgModule({
imports: [
    CommonModule,
    FormsModule,
    IonicModule,
    ComponentsModule,
    RouterModule.forChild([
        {
            path: '',
            component: HomePage
        }
    ])
],
declarations: [HomePage]
})
export class HomePageModule { }

This way nothing is added to app.module.ts which is how it should be.

Also note if you want to use ANY components in your own custom components, you need to add IonicModule to the imports in components.module.ts

Hope this helps :-)

Answer 2

Basically, ionic g component myComponent will update the app.module.ts and create the component inside the app folder.

But if you want a more elegant way to add the components. Here is the steps:

ionic g module components

will generate a module folder called components. Then generate a bunch of components:

ionic g component components/myComponent --export
ionic g component components/myComponent2 --export
ionic g component components/myComponent3 --export
ionic g component components/myComponent4 --export

Inside components.module.ts could be write like this :

...
import { CommonModule } from '@angular/common';
import { FormsModule } from '@angular/forms';
import { IonicModule } from '@ionic/angular';

import { MyComponentComponent } from './my-component/my-component.component';
import { MyComponentComponent2 } from './my-component2/my-component2.component';
import { MyComponentComponent3 } from './my-component3/my-component3.component';
import { MyComponentComponent4 } from './my-component4/my-component4.component';

@NgModule({
  declarations: [
    MyComponentComponent,
    MyComponentComponent2,
    MyComponentComponent3,
    MyComponentComponent4
  ],
  imports: [
    CommonModule,
    FormsModule,
    IonicModule,
  ],
  exports: [
    MyComponentComponent,
    MyComponentComponent2,
    MyComponentComponent3,
    MyComponentComponent4
  ]
})
export class ComponentsModule {}

and then make sure to import the components module inside the app.module.ts:

...
import { ComponentsModule } from './components/components.module';
...

@NgModule({
  declarations: [AppComponent],
  imports: [
    ...
    ComponentsModule,
    ...
  ],
  providers: [
    ...
  ],
  bootstrap: [AppComponent]
})
export class AppModule {}

To test the components, you need to create a page or component again.

ionic g page testing

Import components module into your testing component/page or (into your current home page similarly):

...
import { ComponentsModule } from '../components/components.module';
...

@NgModule({
  imports: [
     ...
     ComponentsModule,
     ...
  ],
  declarations: [TestingPage]
})
export class TestingPageModule {}

Finally, just write the component inside the testing page by using the component selector. e.g.

<app-my-component></app-my-component>
<app-my-component2></app-my-component2>
<app-my-component3></app-my-component3>
<app-my-component4></app-my-component4>

Hope this might help.

Answer 3

This is your selector in components>foot-card>foot-card.ts:

import { Component } from '@angular/core';

@Component({
  selector: 'foot-card',
  templateUrl: 'foot-card.html'
})
export class FootCardComponent {

  text: string;

  constructor() {
    console.log('Hello FootCardComponent Component');
    this.text = 'Hello World';
  }

}

This is your components.module.ts:

import { NgModule } from '@angular/core';
import { FootCardComponent } from './foot-card/foot-card';
import { IonicModule } from 'ionic-angular';

@NgModule({
    declarations: [FootCardComponent],
    imports: [IonicModule],
    exports: [FootCardComponent]
})

export class ComponentsModule {}

This is your app.module.ts:

import { FootCardComponent } from '../components/foot-card/foot-card';
import { ComponentsModule } from '../components/components.module'

@NgModule({
  declarations: [

  ],
  imports: [
    ComponentsModule,
    IonicModule.forRoot(MyApp)
  ],
  bootstrap: [IonicApp],
  entryComponents: [
    FootCardComponent
  ],
  providers: [
  ]
})
export class AppModule {}

You have to import component-module in import and declare component-name in entry components in app.module.ts.

In components.module.ts, You have to declare and export the component but don't forget to import IonicModule.

I was facing the same problem but no one told to import IonicModule In Components.module.ts and In app.module.ts, only add to entryComponent and import componentModule.

Answer 4

After doing all the above ...

only worked in home.page.html adding app before the name of my component like :

<app-my-component></app-my-component>

Answer 5

The key is to include a new module, specifically for your custom component.

I just do not understand why the command "ionic generate component components/myComponent --export" no longer creates this outmoded module. I went through this same problem here.

Answer 6

Testes this solution on Ionic 6.11.0. Works perfectly. Flows to create a reusable component named 'FeaturedProduct' -

Step 1: Create a component ionic g component components/FeaturedProduct

Step 2: Create a module for this component. ionic g module components/FeaturedProduct

Step 3: Import FeaturedProductComponent to featured-product.module.ts file

@NgModule({
  declarations: [FeaturedProductComponent],
  exports: [FeaturedProductComponent],
  imports: [
    CommonModule
  ]
})

Step 4: Import FeaturedProductModule on the module.ts file of your desired page.

@NgModule({
  imports: [
    ...
    ...
    FeaturedProductModule
  ],
  declarations: [Tab2Page]
})

Now the component can be used by this tag <app-featured-product></app-featured-product>

Answer 7

In your src/components folder

myComponent.html:

//Here your component HTML Code. For example:
<ion-list radio-group (ionSelect)="change($event, item.type);" 
  ... 
</ion-list>

components.module.ts:

import {myComponentComponent} from "./myComponent/myComponent";
@NGModule({
  declatations: [myComponentComponent],
  imports:[],
  exports: [myComponentComponent]
})
export class ComponentsModule{}

In your src/app folder

app.module.ts:

import { MyComponentComponent } from "../components/myComponent/myComponent";

@NGModule({
   declarations: [
      yourPages....,
     MyComponentComponent
   ]
)}

To use it:

For example in HomePage.html:

<myComponent> </myComponent>

Answer 8

simply enter below command to genrate custom component

ionic g component components/Component-Name

add component to html