Angular Feature Modules

Angular Feature Modules

Feature modules are NgModules that organize code. As your app scales, you can organize your relevant code for a specific feature. Feature Modules helps us to apply clear boundaries for our features. With the help of Feature/Custom Modules, we can keep code related to a particular functionality or feature separate from other code.

Difference b/w Feature Modules and Root Modules

The feature/custom module is an organization's best practice, as opposed to the concepts of the core Angular API. These modules deliver a set of functionalities that focus on a specific application's need such as the user workflow, routing, or forms. While we can do everything within the root module, feature modules help you partition the app into focused areas.

Step 1: Installing Angular 7

-> ng new angmodules

We will be using Angular Routing, but not provided by Angular CLI because it's not needed. We will create only one route for demo. Now, go inside the folder and open the project on your editor. I am using VSCode.

-> cd angmodules && code .

Also install Bootstrap using the following command.

-> npm install bootstrap --save

Now, we need to add the bootstrap file inside our angular.json file.

Step 2: Creating a new Angular Module

Assuming that you already have an application created with the Angular CLI, create the feature module using an Angular CLI by entering the following command in the root project directory.

-> ng g module student

This will create a folder inside the app directory called student, and inside this directory, you can see one file called student.module.ts.

So this means if we have any functionalities or components related to the student module, it will be imported in this student.module.ts file and not directly inside the app.module.ts file as we generally used to do.

The next step is to create three angular components related to student module.

Step 3: Creating Angular Components

Type the following command to generate angular components.

ng g c student/student --spec=false

ng g c student/student-list --spec=false

ng g c student/student-list-item --spec=false

You can see that all the above components are created inside the app >> student folder and now you can see the student.module.ts file. All these three components are automatically imported inside the student.module.ts file.

Now we need to import the student.module.ts file inside the app.module.ts file.

So, now we have registered our new feature/custom module to the angular application. Now, start the angular server to see if we get any errors.

-> ng serve

Step 4: Creating a model and service for student

Create a service by typing the following command.

-> ng g s student/student --spec=false

Now, inside your student folder, create one file called student.model.ts and add the following code.

export class Student {

id: Number;

name: String;

enrollno: Number;

college: String;

university: String;

}

This is our model class Student. We are displaying this type of data in the frontend.

Now, write this code inside the student.service.ts file.

/ student.service.ts

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

import { Observable } from 'rxjs';

import { Student } from './student.model';

@Injectable({

providedIn: 'root'

})

export class StudentService {

students: Student[] = [{

id: 1,

name: 'Krunal',

enrollmentnumber: 110470116021,

college: 'VVP Engineering College',

university: 'GTU'

},

{

id: 2,

name: 'Rushabh',

enrollmentnumber: 110470116023,

college: 'VVP Engineering College',

university: 'GTU'

},

{

id: 3,

name: 'Ankit',

enrollmentnumber: 110470116022,

college: 'VVP Engineering College',

university: 'GTU'

}];

constructor() { }

public getStudents(): any {

const studentsObservable = new Observable(observer => {

setTimeout(() => {

observer.next(this.students);

}, 1000);

});

return studentsObservable;

}

}

In this file, we have defined a getStudents() function that will return the Observables. So when the subscriber wants the data from the publisher, it will subscribe to this students Observable and publisher starts publishing the values, and eventually, subscriber gets the data.

Now, this final step is to prepare all the components to display the data from student service.

Step 5: Configure the routing.

Add this code in your app.module.ts file.

// app.module.ts

import { BrowserModule } from '@angular/platform-browser';

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

import { Routes, RouterModule } from '@angular/router';

import { StudentModule } from './student/student.module';

import { AppComponent } from './app.component';

import { StudentComponent } from './student/student/student.component';

const routes: Routes = [

{

path: '',

component: StudentComponent

}

];

@NgModule({

declarations: [

AppComponent

],

imports: [

BrowserModule,

StudentModule,

RouterModule.forRoot(routes),

],

providers: [],

bootstrap: [AppComponent]

})

export class AppModule { }

Here, I have imported the Routes and RouterModule and then will create an array of route and register to our angular application.

Now, we will display the component by using router-outlet inside the app.component.html file.

<div class="container">

<router-outlet></router-outlet>

</div>

Step 6: Displaying the data

Write the following code inside the student.component.html file.

<div>

<app-student-list></app-student-list>

</div>

So this is the outer most component, and inside this component, there is student-list.component.html component.

Now, we will write the following code inside the student-list.component.ts file.

// student-list.component.ts

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

import { StudentService } from '../student.service';

import { Student } from '../student.model';

@Component({

selector: 'app-student-list',

templateUrl: './student-list.component.html',

styleUrls: ['./student-list.component.css']

})

export class StudentListComponent implements OnInit {

students: Student[] = [];

constructor(private studentservice: StudentService) { }

ngOnInit() {

const studentObservable = this.studentservice.getStudents();

studentObservable.subscribe((studentsData: Student[]) => {

this.students = studentsData;

});

}

}

Now, write this HTML inside the student-list.component.html file.

<div class="row">

<div class="col-md-3 col-xs-6" *ngFor="let student of students">

<app-student-list-item [student]="student"></app-student-list-item>

</div>

</div>

So, we are passing the data from the parent to the child component. So, the app-student-list-component will have one input value called student.

Now, write this code inside the student-list-item.component.ts file.

// student-list-item.component.ts

import { Component, OnInit, Input } from '@angular/core';

@Component({

selector: 'app-student-list-item',

templateUrl: './student-list-item.component.html',

styleUrls: ['./student-list-item.component.css']

})

export class StudentListItemComponent implements OnInit {

@Input() student: any;

constructor() { }

ngOnInit() {

}

}

Add the HTML code inside the student-list-item.component.html file.

<div class="card">

<div class="card-body">

<h5 class="card-title">{{ student.name }}</h5>

<h6 class="card-subtitle">{{ student.enrollmentno }}</h6>

<p class="card-text">{{ student.college }}</p>

<p class="card-text">{{ student.university }}</p>

<a class="btn btn-primary" href="#">Go somewhere</a>

</div>

</div>

Save the file and go to the http://localhost:4200/ and you will see something like this after 1 second.

We are an ERP development company with a goal of transforming enterprises with our futuristic AI-enabled ERP systems. Our developers hold expertise in custom-designing ERP solutions to best suit enterprise needs. Aligned with your business goals, we provide ERP with WFM, CRM, SCM, and SaaS integrations to optimize your consumer goods enterprise. Get in touch with us to unleash the maximum potential of your business with our Custom ERP development services.