Ionic 4 Make Component

Ionic 4 allows developers to create their own reusable components easily. Components are reusable building blocks that can be used in multiple parts of an application. In this tutorial, we will learn how to make a component in Ionic 4.

Making a Component

To make a component in Ionic 4, we need to use the ionic generate component command. This command will generate the files required for the new component.

ionic generate component <component-name>

For example, to create a component called myComponent, we would run the following command:

ionic generate component myComponent

This will generate a myComponent folder in the src/app directory with the following files:

myComponent/
|-- myComponent.module.ts
|-- myComponent.page.html
|-- myComponent.page.scss
|-- myComponent.page.spec.ts
|-- myComponent.page.ts

The myComponent.module.ts file exports the component and makes it available to other modules. The myComponent.page.html file is the template for the component. The myComponent.page.scss file is the component's stylesheet. The myComponent.page.spec.ts file contains the unit tests for the component. The myComponent.page.ts file contains the TypeScript code for the component.

Using the Component

To use the component, we need to import it into the module where we want to use it. We can then use the component in our template by using its selector.

import { NgModule } from '@angular/core';
import { CommonModule } from '@angular/common';
import { IonicModule } from '@ionic/angular';

import { myComponent } from './myComponent.page';

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

In the above example, we import the myComponent component and declare it in the declarations array. We also import the CommonModule and IonicModule and add them to the imports array. Finally, we export myComponent so it can be used in other modules.

We can then use the myComponent component in our templates like this:

<ion-content>
  <myComponent></myComponent>
</ion-content>

Conclusion

In this tutorial, we learned how to make a component in Ionic 4. We used the ionic generate component command to create the necessary files and then imported and used the component in our module. Components are a powerful tool for developing reusable code and can help to make our applications more modular and maintainable.