In Angular, you can separate features with the help of feature modules. This helps you easily maintain applications. Feature modules also help you to track errors quickly. You can use a feature module in many other modules, but these feature modules will not able to access other modules unless they are exposed. You must understand how to expose a feature so it they can be imported into other modules.
Angular comes with many predefined feature modules. These modules expose the components, pipes, or directives that help you build apps faster without implementing every single thing.
A couple of them are listed below:
ReactiveForms Module
: This module exports the required directive, like formControlName
or formGroup
, that helps you create reactive forms.
routerLink
or routerLinkActive
, that help you create client-side routing.In this feature module, you'll make a pipe that will use a date format. You'll pass a date in yyyy-mm-dd
format, and it will return the date in dd-mm-yyyy
format.
Create a project using the following command.
1$ ng new features-export-demo
Create a feature module using the following command.
1$ ng g m date-format
Create a pipe using the following command.
1$ ng g pipe /date-format/date-format
The environment is created, now you'll write the code for Pipe.
date-format.pipe.ts
1import { Pipe, PipeTransform } from "@angular/core";
2
3@Pipe({
4 name: "dateFormat",
5})
6export class DateFormatPipe implements PipeTransform {
7 transform(value: any, ...args: any[]): any {
8 return value.split("-").reverse().join("-");
9 }
10}
date-format.module.ts
1import { NgModule } from "@angular/core";
2import { CommonModule } from "@angular/common";
3import { DateFormatPipe } from "./date-format.pipe";
4
5@NgModule({
6 declarations: [DateFormatPipe],
7 imports: [CommonModule],
8 exports: [DateFormatPipe],
9})
10export class DateFormatModule {}
In DateFormatModule
, we're exposing a DateFormatPipe
so that other modules can get the advantage of this pipe.
DateFormat
pipe is ready to use. To you can use it in AppComponent
you need to import the DateFormatModule
in app.module.ts
.
app.module.ts
1import { BrowserModule } from "@angular/platform-browser";
2import { NgModule } from "@angular/core";
3
4import { AppRoutingModule } from "./app-routing.module";
5import { AppComponent } from "./app.component";
6import { DateFormatModule } from "./date-format/date-format.module";
7
8@NgModule({
9 declarations: [AppComponent],
10 imports: [BrowserModule, AppRoutingModule, DateFormatModule],
11 providers: [],
12 bootstrap: [AppComponent],
13})
14export class AppModule {}
DateFormatModule
has been imported with the help of the imports
array of NgModule
. You can use the features of the DateFormatModule
within the AppComponent
.
Create a variable in app.component.ts
that contains a date in yyyy-mm-dd
format.
app.component.ts
1import { Component } from "@angular/core";
2
3@Component({
4 selector: "app-root",
5 templateUrl: "./app.component.html",
6 styleUrls: ["./app.component.scss"],
7})
8export class AppComponent {
9 testDate: string;
10
11 constructor() {
12 this.testDate = "2019-05-06";
13 }
14}
You have defined the variable testDate
in yyyy-mm-dd
format and assigned a value in a constructor. You can use interpolation to bind the value of testDate
with the HTML template and use the pipe to transform the date format.
app.component.html
1{{testDate| dateFormat}}
The application is now ready. Run the project using the following command.
1$ npm start
Check the output; it will convert the date to dd-mm-yyyy
format as shown below.
You have successfully made a pipe in a feature module and exposed it using the exports
array of the NgModule
.
In this guide, we discussed how to expose the features of a feature module so you can use them in other modules. We listed some predefined feature modules, but Angular provides even more feature modules that you can read about here. In this guide, we implemented a simple example of a date format, but I highly recommend that you explore further and add more features to your application.