Class Decorator in Angular 8

Introduction

Its really interesting to know why we need Decorator in Angular? If we use Decorator what is the benefit of it? These all question will be answered in this tutorial.

What is Decorator in Angular 8?

Decorators are a design pattern that is used to separate modification or decoration of a class without modifying the original source code.

Decorators are of 4 types.

• Class Decorators
• Property Decorator
• Method Decorator
• Parameter Decorator

In this article we will discuss about Class decorator.

Class decorator

Class Decorator

@Component and @NgModule decorator is an example of Class decorator.

If we make a class a component class then we can declare @Component.

If we make a class a child class a module then we can declare @NgModule.

@Component

Component decorator allows you to mark a class as an Angular component and provide additional metadata that determines how the component should be processed, instantiated and used at runtime.

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

@Component({

    selector: 'example-component',

    template: '<div>{{name}}</div>',

})

export class ExampleComponent {

    name: string = "This is my component!!!!!";

}

In the above code we import Component Interface to implement Component decorator(@Component).

@NgModule

@NgModule helps to declare the child module and component to available in the angular application.

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

@NgModule({

    imports: [ ],

    declarations: [ ],

  bootstrap:    [ AppComponent ]

})

export class AppModule { }

In the above we have to import NgModule interface to make a class a module. Then we can use @NgModule decorator .

Under imports section we can register modules and in declarations section we can declare the components available for angular.

Note:-

In both Component class and Module class we can see there is no logic written with in the class to make the class Component or Module in Angular.

So what we need to do is decorate it and angular will do the remaining work for us.

Thanks..........

Share:

Read More

Build in Pipes in Angular 8

What is Pipes in Angular?

Pipes is nothing but transform the data into required format. We use the operator "|" to implement pipes.

In angular there are 2 types of pipes available.

• Build-In Pipes
• Custom Pipes

In this tutorial we will discuss Build-In Pipes. If you want to know more about Custom Pipes i have already a tutorial available . You can check the link How to create Custom Pipes in Angular.

When we go for Build-in Pipes?

When we need to format the data with the help of Out of box functionality or we can say existing functionality then we can use the Build in Pipes.

See the above Image .
Lets say we need to modify the below.

• Name should be in capital 
• Gender should be lower case
• Before the Course fee value a dollar($) symbol should be there.

We can achieve the above criteria with the help of Build-in Pipes.

Lets check the existing code and then we try to modify it.

Existing Code

<table class="table table-responsive table-bordered table-striped">
    <thead>
        <tr>
            <th>Student ID</th>
            <th>Name</th>
            <th>Gender</th>
            <th>Age</th>
            <th>Course Fee</th>
           
        </tr>
    </thead>
    <tbody><tr *ngFor="let s of studentdetails">
    <td>{{s.studentID}}</td>
    <td>{{s.studentName}}</td>
    <td>{{s.gender}}</td>
    <td>{{s.age}}</td>
    <td>{{s.CourseFee}}</td>
   
</tr></tbody>
</table>

Lets modify the above code to achieve the required functionality.

After Modification

<table class="table table-responsive table-bordered table-striped">
    <thead>
        <tr>
            <th>Student ID</th>
            <th>Name</th>
            <th>Gender</th>
            <th>Age</th>
            <th>Course Fee</th>
           
        </tr>
    </thead>
    <tbody><tr *ngFor="let s of studentdetails">
    <td>{{s.studentID}}</td>
    <td>{{s.studentName | uppercase}}</td>
    <td>{{s.gender | lowercase}}</td>
    <td>{{s.age}}</td>
    <td>{{s.CourseFee | currency:'USD':'$'}}</td>
   
</tr></tbody>

</table>

In the above code we change the above highlighted text to achieve the functionality.
we added uppercase,lowercase and currency pipe for Name,gender and course fee respectively.
Output is as below.

In the above table we can see Name values are Capital case,Gender value is small case and Course Fee is appended with $ symbol .

Share:

Read More

Custom Pipes in Angular 8

What is Pipes in Angular 8?

Pipes is nothing but transform the data into a required format. We can use the operator " | " to implement pipes.

Angular-Pipes

In Angular 8 we have 2 types of pipes available.

• Build-in pipes
• Custom Pipes

In this article we will discuss Custom pipes. If you want to know about Build in Pipes visit Build-In Pipes In Angular.

When we go for Custom pipes?

As we know Angular provides build-in pipes, but when we need a different format which is not available in build-pipes, then we go for Custom Pipes.

Example - 

Lets say We have a table as shown below.

Angular Raw Format

In the above table we need to append the Mr and Miss to the Name column based upon the Gender.

This can be implemented using Custom Filter. So that we can get the output as below.

Angular Formatted Table

Steps to create Custom filter

1.Create a folder and create highlighted files under app folder.

Here student.pipes.ts is for Custom pipes.

2. Open student.component.ts and write the below code.

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

@Component(
    {
        selector: 'student-list',
        templateUrl: 'app/student/student.component.html'
    })

export class studentcomponent implements OnInit {
    ngOnInit(): void {
        this.getStudent();
    }
    studentdetails: any[];
    getStudent(): void {
       
        this.studentdetails = [
            { studentID: 1, studentName: 'Steve', gender: 'Male', age: 35},
            { studentID: 2, studentName: 'Bobby', gender: 'Male', age: 32},
            { studentID: 3, studentName: 'Rina', gender: 'Female', age: 45},
            { studentID: 4, studentName: 'Alex', gender: 'Female', age: 24},
            { studentID: 5, studentName: 'Rahul', gender: 'Male', age: 26},
        ];       
    }
}

In the above code we are creating a student table with the details.

3. Open student.pipes.ts and write the below code.

import { Pipe, PipeTransform } from '@angular/core';

@Pipe({
    name:'EmployeeTitle'
})

export class MyEmployeeTitlePipe implements PipeTransform {
    transform(value: string, gender: string): string {
        if (gender.toLowerCase() == 'male') {
            return 'Mr. ' + value;
        }
        else
            return 'Miss. ' + value;
    }

}

In the above code is responsible to create the custom pipes . In this case we need to import Pipe, PipeTransform to implement the custom pipe. Name of custom pipe is EmployeeTitle.
Transform method will help to implement the logic where gender parameter will get the value which is passed from the html file and process the value to a proper format.This case we append the Mr or Miss to Name column. Ex. Stove converted to Mr. Stove.

4.Open student.component.html and write the below code.

<table class="table table-responsive table-bordered table-striped">
    <thead>
        <tr>
            <th>Student ID</th>
            <th>Name</th>
            <th>Gender</th>
            <th>Age</th>
           
        </tr>
    </thead>
    <tbody><tr *ngFor="let s of studentdetails">
    <td>{{s.studentID}}</td>
    <td>{{s.studentName | uppercase|EmployeeTitle:s.gender}}</td>
    <td>{{s.gender | lowercase}}</td>
    <td>{{s.age}}</td>
   
</tr></tbody>

</table>

In the above code we are passing the custom filter data to the student.pipes.ts file and get formatted data. Implementation is highlighted as above.

5. Register the Custom pipe class in App module.

import { MyEmployeeTitlePipe } from './student/student.pipes';


@NgModule({
    imports: [BrowserModule, FormsModule, routing],
    declarations: [AppComponent, EmployeeComponent, EmployeeTitlePipe, mycomponentclass,
        CollegeDetailsComponent, CourseComponent, studentcomponent, MyEmployeeTitlePipe],
  bootstrap:    [ AppComponent ]
})

Implement the above highlighted text.
Run your project and you can able to see the output as expected.


Thanks...............

Share:

Read More

Routing in Angular 8

Introduction

Angular routing is a mechanism where navigation between angular pages takes place and shown in browser. In below image Student List and Course List are two links . Based upon the click the related page will be shown.

Student Angular Route

Course Angular Route

How to Implement Routing mechanism in Angular 8?

1.Create related Typescript file and HTML file for Students and Courses folder as shown below.

Course Student folder Angular Route

2.Add below code for course.component.html

<table class="table table-responsive table-bordered table-striped">

    <thead>

        <tr>

            <th>Course ID</th>

            <th>Name</th>

            <th>Category</th>

        </tr>

    </thead>

    <tbody>

        <tr *ngFor="let s of courseList;">

            <td>{{s.courseID}}</td>

            <td>{{s.courseName | uppercase}}</td>

            <td>{{s.category}}</td>

        </tr>

    </tbody>

</table>

3.Add below code for course.component.ts

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

@Component({

    selector: 'course-list',

    templateUrl: 'app/course/course.component.html'

})

export class CourseComponent implements OnInit {

    courseList: any[];

    getCourses(): void {

        this.courseList = [

            { courseID: 101, courseName: 'BCA', category: 'IT' },

            { courseID: 102, courseName: 'MCA', category: 'IT' },

            { courseID: 103, courseName: 'MBA', category: 'MANAGEMENT' },

            { courseID: 104, courseName: 'B.TECH', category: 'CS' },

            { courseID: 105, courseName: 'B.ARCH', category: 'ARCHITECTURE' },

            { courseID: 106, courseName: 'BBA', category: 'MANAGEMENT' },];

    }

    ngOnInit(): void {

        this.getCourses();

    }

}

4.Add below code for student.component.html

<table class="table table-responsive table-bordered table-striped">

    <thead>

        <tr>

            <th>Student ID</th>

            <th>Name</th>

            <th>Gender</th>

            <th>Age</th>

           

        </tr>

    </thead>

    <tbody><tr *ngFor="let s of studentdetails">

    <td>{{s.studentID}}</td>

    <td>{{s.studentName | uppercase}}</td>

    <td>{{s.gender | lowercase}}</td>

    <td>{{s.age}}</td>

   

</tr></tbody>

</table>

5.Add below code for student.component.ts

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

@Component(

    {

        selector: 'student-list',

        templateUrl: 'app/student/student.component.html'

    })

export class studentcomponent implements OnInit {

    ngOnInit(): void {

        this.getStudent();

    }

    studentdetails: any[];

    getStudent(): void {

        

        this.studentdetails = [

            { studentID: 1, studentName: 'Steve', gender: 'Male', age: 35},

            { studentID: 2, studentName: 'Bobby', gender: 'Male', age: 32},

            { studentID: 3, studentName: 'Rina', gender: 'Female', age: 45},

            { studentID: 4, studentName: 'Alex', gender: 'Female', age: 24},

            { studentID: 5, studentName: 'Rahul', gender: 'Male', age: 26},

        ];        

    }

}

6. Create a type script file called app.routes.ts under app folder and write the below code.

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

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

import { CourseComponent } from './course/course.component';

export const routes: Routes = [

    { path: '', redirectTo: 'student-list', pathMatch: 'full' },

    { path: 'student-list', component: studentcomponent },

    { path: 'course-list', component: CourseComponent }

];

export const routing = RouterModule.forRoot(routes);

Student-list and Course-list are the link to be displayed in the browser for studentComponent and CourseComponent respectively.
RouterModule.forRoot is used to defining the Route config file in the main module(app.module.ts)

7. Under app.component.html write the below code.

<table>

    <tr style="font-weight:bold;color:blue;border:none;background-color:yellow;">

        <td><a routerLink="/student-list">Student List</a></td>

        <td><a routerLink="/course-list">Course List</a></td>

    </tr>

</table>

<br />

<br />

<router-outlet></router-outlet>

routerLink used to create a link to the component to display the component.
router-outlet is used to show the content of the link clicked.

8. Under App.Module.ts add the below highlighted code .

import { CourseComponent } from './course/course.component';

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

import { routing } from './app.routes';

@NgModule({

    imports: [BrowserModule, FormsModule, routing],

    declarations: [AppComponent, EmployeeComponent, EmployeeTitlePipe, mycomponentclass,

        CollegeDetailsComponent, CourseComponent, studentcomponent],

  bootstrap:    [ AppComponent ]

})

We are done!!!!!!!!!
When we run the application we can able to see the output as expected.

Share:

Read More