Here is the step-by-step guide to create angular modules to organize code.
Step 1: Install Angular
ng new angmodules
Also, add the Bootstrap using the following command.
npm install bootstrap --save
Add the bootstrap file inside the angular.json file.
"styles": [ "src/styles.css", "./node_modules/bootstrap/dist/css/bootstrap.min.css" ],
We can use Bootstrap in our application.
Step 2: Create a new Angular Module
Assuming you already have an app you 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
It will create a folder inside the app directory called a student, and inside the student directory, you can see one file called student.module.ts.
// student.module.ts import { NgModule } from '@angular/core'; import { CommonModule } from '@angular/common'; @NgModule({ declarations: [], imports: [ CommonModule ] }) export class StudentModule { }
So that means if we have any functionalities or components related to the student, they will be imported here 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 the three angular components related to the student module. So let us do that.
Step 3: Create Angular Components
We will create the following three angular components related to a student module.
- student.component.ts
- student-list.component.ts
- student-list-item.component.ts
Type the following command to generate the above 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 of the components are created inside the app >> student folder, and now you can see the student.module.ts file. This is because all three components are automatically imported inside the student.module.ts file.
// student.module.ts import { NgModule } from '@angular/core'; import { CommonModule } from '@angular/common'; import { StudentListComponent } from './student-list/student-list.component'; import { StudentListItemComponent } from './student-list-item/student-list-item.component'; import { StudentComponent } from './student/student.component'; @NgModule({ declarations: [StudentComponent, StudentListComponent, StudentListItemComponent], imports: [ CommonModule ] }) export class StudentModule { }
Import the student.module.ts file inside the app.module.ts file.
// app.module.ts import { BrowserModule } from '@angular/platform-browser'; import { NgModule } from '@angular/core'; import { StudentModule } from './student/student.module'; import { AppComponent } from './app.component'; @NgModule({ declarations: [ AppComponent ], imports: [ BrowserModule, StudentModule ], providers: [], bootstrap: [AppComponent] }) export class AppModule { }
We have registered the new module to the angular application. Now, start the angular development server to see if we do not have errors.
ng serve
Step 4: Create a model and service for student
You can create a service using the following command.
ng g s student/student --spec=false
It will create a file like this.
// student.service.ts import { Injectable } from '@angular/core'; @Injectable({ providedIn: 'root' }) export class StudentService { constructor() { } }
Create one file called student.model.ts inside the student folder and add the following code.
// student.model.ts export class Student { id: Number; name: String; enrollno: Number; college: String; university: String; }
This is our model class, Student. We are displaying this kind of data to the front end.
Write the following 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; } }
The final step is to prepare all the components to display the data coming from the student service.
Step 5: Configure the routing.
Add the following code inside the 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 { }
I have imported the Routes and RouterModule, created an array of routes and registered them to our angular application.
We need to display the component using the router-outlet inside the app.component.html file.
<div class="container"> <router-outlet></router-outlet> </div>
What we have done is if the user goes to http://localhost:4200, we will display the student.component.html view. So our next step is to add the HTML code that views.
Step 6: Display the data.
The first thing is to write the following code inside the student.component.html file.
<div> <app-student-list></app-student-list> </div>
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; }); } }
Write the following 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>
We are passing the data from the parent to the child component. The app-student-list-component will expect the one input value called student.
Write the following 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 http://localhost:4200/, and you will see something like this after 1 second.
That’s it!
juan
so student-list-item.component.ts is only acting as a presenter?
fatih cakiroglu
Thank you for write such a tutorial. this tutorial made me benefit
stef
student.module.ts needs to export some component
@NgModule({
declarations: [StudentComponent, StudentListComponent, StudentListItemComponent],
imports: [
CommonModule
],
exports:[StudentComponent, StudentListComponent]
})
export class StudentModule { }
Milton Gore
Thank you
Alva
While your article may be good your site isn’t. Using FireFox 73.0.1 64 bit the window won’t stop jumping around long enough for me to read the article.
Even typing this comment was a real PITA.
Riyaz
Thanks Kunal, you helped and clear the myth of feature module while creating project from scratch. Thanks.