Where Do You Register Angular Components

In this tutorial, we will see how to create Angular Modules to organize code. Characteristic modules are NgModules to organize lawmaking. Equally your app scales, you lot tin can organize lawmaking relevant to a specific feature. In improver, characteristic Modules help united states of america utilise clear boundaries for your features. With Feature Modules, you can continue code related to the particular functionality or characteristic separate from other code.

Departure b/west Feature Modules and Root Modules

The characteristic module is an organizational best practice instead of the concept of the core Angular API. The feature module delivers a cohesive ready of functionality focused on a specific application demand, such as the user workflow, routing, or forms. While y'all can practice everything within the root module, characteristic modules help you division the app into focused areas.

Angular Modules

Modules in Angular are a groovy way to organize an application and extend it with capabilities from external libraries. Angular libraries are NgModules, such as FormsModule, HttpClientModule, and RouterModule. Many third-party libraries are bachelor as NgModules, such every bit Material Blueprint, Ionic, and AngularFire2. Angular Modules tin can also add together services to the application. Such services might be internally adult, like something y'all prepare for your application.

Permit us install a brand new Angular project, and and so nosotros utilise Feature Modules to organize our project.

Step 1: Install Angular

Let the states create a new Athwart Project.

ng new angmodules

How To Create Angular Modules To Organize Code

We volition use Angular Routing, but Angular CLI does not provide information technology because it is unnecessary. And then, nosotros volition be creating merely one route for this demo. Now, go inside the folder and open the project on your editor. I am using VSCode.

cd angmodules && code .

As well, add the Bootstrap using the following command.

npm install bootstrap --relieve

Now, add the bootstrap file within theangular.jsonfile.

"styles": [    "src/styles.css",    "./node_modules/bootstrap/dist/css/bootstrap.min.css" ],

At present, we can use Bootstrap in our awarding.

Step 2: Create a new Angular Module

Bold you already have an app, you lot created with the Angular CLI, create the characteristic module using an Angular CLI past entering the following command in the root project directory.

ng one thousand module student

Information technology will create a folder inside theappdirectory chosena educatee, and within thestudentdirectory, you tin see i file chosenpupil.module.ts.

// pupil.module.ts  import { NgModule } from '@athwart/core'; import { CommonModule } from '@angular/common';  @NgModule({   declarations: [],   imports: [     CommonModule   ] }) consign class StudentModule { }

And so that ways if we have any functionalities or components related to the pupil, information technology volition exist imported here in thiseducatee.module.tsfile and not directly inside theapp.module.tsfile as we generally used to do.

The adjacent pace is to create the three angular components related to the student module. Then let u.s.a. do that.

Stride iii: Create Angular Components

Nosotros volition create the following three angular components related to a educatee module.

pupil.component.ts
student-list.component.ts
pupil-list-item.component.ts

So type the post-obit command to generate the above angular components.

ng g c student/student --spec=faux ng g c student/educatee-list --spec=false ng thousand c student/pupil-list-item --spec=false

You can see that all of the components are created within theapp >> studentfolder, and now y'all can come across the student.module.tsfile. This is because all of the 3 components are automatically imported inside the educatee.module.tsfile.

// student.module.ts  import { NgModule } from '@angular/core'; import { CommonModule } from '@angular/common'; import { StudentListComponent } from './educatee-list/pupil-list.component'; import { StudentListItemComponent } from './student-list-item/student-listing-item.component'; import { StudentComponent } from './pupil/pupil.component';  @NgModule({   declarations: [StudentComponent, StudentListComponent, StudentListItemComponent],   imports: [     CommonModule   ] }) export class StudentModule { }

Import thestudent.module.tsfile inside theapp.module.tsfile.

// 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 form AppModule { }

And so, now nosotros take registered the new module to the angular application. Now, start the angular development server to meet if nosotros do not have errors.

ng serve

Angular 7 Modules Example Tutorial

Stride iv: Create a model and service for student

You tin create a service using the following command.

ng g s student/educatee --spec=fake

It will create a file similar this.

// student.service.ts  import { Injectable } from '@athwart/core';  @Injectable({   providedIn: 'root' }) export grade StudentService {    constructor() { } }

Now, create 1 file called student.model.ts inside the student folder and add together the post-obit code.

// student.model.ts  export grade Student {     id: Number;     name: String;     enrollno: Number;     college: String;     university: String; }

So, this is our model class, Pupil. We are displaying this kind of data to the frontend.

At present, write the following code inside thestudent.service.tsfile.

// student.service.ts  import { Injectable } from '@angular/cadre'; import { Observable } from 'rxjs';  import { Student } from './student.model';  @Injectable({   providedIn: 'root' }) export class StudentService {      students: Educatee[] = [{         id: one,         name: 'Krunal',         enrollmentnumber: 110470116021,         college: 'VVP Technology College',         academy: 'GTU'     },     {         id: two,         name: 'Rushabh',         enrollmentnumber: 110470116023,         college: 'VVP Engineering science College',         academy: '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);             }, one thousand);         });          return studentsObservable;     } }

Then, in this file, we have defined the getStudents function that will return the Observables. So when the subscriber wants the information from the publisher, information technology will subscribe to this studentsObservable, and the publisher starts publishing the values, and eventually, the subscriber gets the data. Please check out this Angular Observables Tutorial With Example article if you are unfamiliar with Observables.

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 lawmaking inside theapp.module.tsfile.

// app.module.ts  import { BrowserModule } from '@angular/platform-browser'; import { NgModule } from '@athwart/core'; import { Routes, RouterModule } from '@angular/router';  import { StudentModule } from './student/pupil.module';  import { AppComponent } from './app.component'; import { StudentComponent } from './pupil/student/educatee.component';  const routes: Routes = [     {         path: '',         component: StudentComponent     } ];  @NgModule({   declarations: [     AppComponent   ],   imports: [     BrowserModule,     StudentModule,     RouterModule.forRoot(routes),   ],   providers: [],   bootstrap: [AppComponent] }) export class AppModule { }

I take imported the Routes and RouterModule and then created an array of routes and registered them to our angular application.

Nosotros demand to display the component using the router-outletinside theapp.component.htmlfile.

<div class="container">     <router-outlet></router-outlet> </div>

So till now, what nosotros have washed is if the user goes to the http://localhost:4200, we volition display thestudent.component.htmlview. So our next step is to add the HTML code that views.

Footstep 6: Display the data.

The first matter is to write the following lawmaking inside thestudent.component.htmlfile.

<div>     <app-student-listing></app-student-list> </div>

So this is our outermost component, and inside this component, there is the student-list.component.htmlcomponent.

Now, write the following code inside thestudent-listing.component.tsfile.

// student-list.component.ts  import { Component, OnInit } from '@athwart/core'; import { StudentService } from '../educatee.service'; import { Pupil } from '../pupil.model';  @Component({   selector: 'app-student-listing',   templateUrl: './pupil-list.component.html',   styleUrls: ['./student-list.component.css'] }) export class StudentListComponent implements OnInit {      students: Pupil[] = [];      constructor(private studentservice: StudentService) { }      ngOnInit() {         const studentObservable = this.studentservice.getStudents();         studentObservable.subscribe((studentsData: Student[]) => {             this.students = studentsData;         });     } }

Also, write the following HTML inside thepupil-listing.component.htmlfile.

<div grade="row">     <div class="col-doc-3 col-xs-6" *ngFor="let student of students">         <app-student-listing-item [student]="student"></app-student-listing-particular>     </div> </div>

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

Now, write the post-obit code inside the educatee-listing-item.component.ts file.

// student-list-detail.component.ts  import { Component, OnInit, Input } from '@athwart/core';  @Component({   selector: 'app-student-list-item',   templateUrl: './student-list-particular.component.html',   styleUrls: ['./student-list-particular.component.css'] }) export course StudentListItemComponent implements OnInit {      @Input() educatee: any;      constructor() { }      ngOnInit() {     }  }

Add the HTML code inside thestudent-list-particular.component.htmlfile.

<div class="card">     <div course="card-trunk">         <h5 form="menu-title">{{ student.name }}</h5>         <h6 class="card-subtitle">{{ student.enrollmentno }}</h6>         <p class="card-text">{{ student.higher }}</p>         <p class="card-text">{{ pupil.university }}</p>         <a class="btn btn-primary" href="#" >Go somewhere</a>     </div> </div>

Salvage the file and become to http://localhost:4200/, and you will see something like this later on 1 second.

Angular Modules Example

Decision

So, we have taken our whole project module-wise for the student by creating a file called pupil.module.ts.

All the functionality and lawmaking related to the student will reside on the app >> educateefolder, and yous tin can create as many modules as you want by separating them to each of that respected folders.

Feature Modules is the best way to organize your scalable code; y'all exercise not need to annals all of your components inside theapp.module.tsfile; you will create i module file respected to your functionality and add your components within them.

Finally, y'all can add the module inside theapp.module.tsfile, and y'all are practiced to become. This is one of the best ways to organize your project.

That's it for this tutorial.