Author avatar

Gaurav Singhal

Exposing Features Using the Exports Array in Angular

Gaurav Singhal

  • May 11, 2020
  • 5 Min read
  • 5,483 Views
  • May 11, 2020
  • 5 Min read
  • 5,483 Views
Languages Frameworks and Tools
Front End Web Developer
Client-side Frameworks
Angular
Introduction

Introduction

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.

Predefined Feature Modules in Angular

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:

  1. ReactiveForms Module : This module exports the required directive, like formControlName or formGroup, that helps you create reactive forms.

  2. RouteModule : This module exports the required directive and providers, like routerLink or routerLinkActive, that help you create client-side routing.

Create a Feature Module

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
console

Create a feature module using the following command.

1$ ng g m date-format
console

Create a pipe using the following command.

1$ ng g pipe /date-format/date-format
console

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}
ts

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 {}
ts

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 {}
ts

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}
ts

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}}
html

The application is now ready. Run the project using the following command.

1$ npm start
console

Check the output; it will convert the date to dd-mm-yyyy format as shown below.

imagur

You have successfully made a pipe in a feature module and exposed it using the exports array of the NgModule.

Conclusion

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.

LEARN MORE