Author: admin

What is Lazy Loading in Angular 4 ?

Lazy Loading means load component after click on navigation.

But this will be work with module, if you remember we create Child Routing | forChild() 

There we need to call just module file instead of component with loadChildren

 

–TS file (app-routing.module.ts)

import { NgModule } from "@angular/core";
import { Routes, RouterModule } from "@angular/router";

import { ShoppingListComponent } from "./shopping-list/shopping-list.component";
import { HomeComponent } from "./home/home.component";

const appRoutes: Routes = [
    { path: '', component: HomeComponent},
    { path: 'recipes', loadChildren: './recipes/recipes.modules#RecipesModule' },
    { path: 'shopping-list', component: ShoppingListComponent},
];

@NgModule({
    imports: [RouterModule.forRoot(appRoutes)],
    exports: [RouterModule]
})
export class AppRoutingModule{

}

Why need Lazy Loading ?

This will be increase site speed. Not load unnecessary component or module. Until you want.

What is forChild routing ?

Whenever we want to create a separate  module and routing file.

Like I don’t want to put all component in module.ts file of one section.

–TS File (recipes.modules.ts)

import { NgModule } from "@angular/core";
import { CommonModule } from "@angular/common";
import { ReactiveFormsModule } from "@angular/forms";

import { RecipesComponent } from '../recipes/recipes.component';
import { RecipeListComponent } from '../recipes/recipe-list/recipe-list.component';
import { RecipeDetailComponent } from '../recipes/recipe-detail/recipe-detail.component';
import { RecipeItemComponent } from '../recipes/recipe-list/recipe-item/recipe-item.component';
import { RecipeStartComponent } from '../recipes/recipe-start/recipe-start.component';
import { RecipeEditComponent } from '../recipes/recipe-edit/recipe-edit.component';
import { RecipesRoutingModule } from "../recipes/recipes-routing.module";

@NgModule({
    declarations: [
        RecipesComponent,
        RecipeListComponent,
        RecipeDetailComponent,
        RecipeItemComponent,
        RecipeStartComponent,
        RecipeEditComponent
    ],
    imports: [
        CommonModule,
        ReactiveFormsModule,
        RecipesRoutingModule        
    ]
})

export class RecipesModule {}

Use there forChild instead of forRoot

–TS File (recipes-routing.module.ts)

import { NgModule } from "@angular/core";
import { Routes, RouterModule } from "@angular/router";

import { RecipesComponent } from "../recipes/recipes.component";
import { RecipeStartComponent } from "../recipes/recipe-start/recipe-start.component";
import { RecipeDetailComponent } from "../recipes/recipe-detail/recipe-detail.component";
import { RecipeEditComponent } from "../recipes/recipe-edit/recipe-edit.component";

const receipesRoutes: Routes = [
    { path: '', redirectTo: '/recipes', pathMatch: 'full'},
    { path: 'recipes', component: RecipesComponent, children: [
        { path: '', component: RecipeStartComponent},
        { path: 'new', component: RecipeEditComponent},
        { path: ':id', component: RecipeDetailComponent},
        { path: ':id/edit', component: RecipeEditComponent}
    ] },
]

@NgModule({
    imports: [
        RouterModule.forChild(receipesRoutes)
    ],
    exports: [RouterModule]
})

export class RecipesRoutingModule {}

You can see I already import recipes-routing.modue in recipes.modules file.

Because module always import.

Now Register recipes.module file

import { RecipesModule } from "./recipes/recipes.modules";

@NgModule({
  imports: [
    RecipesModule
  ],
})
export class AppModule { }

What is Routing in Angular 4 ?

Basically this is a linking to one page to other page without reload window

Generate routing file

—-COMMAND LINE

ng generate module app-routing --flat --module=app

Create Manually

–TS file (app-routing.module.ts)

import { NgModule } from "@angular/core";
import { Routes, RouterModule } from "@angular/router";

import { RecipesComponent } from "./recipes/recipes.component";
import { ShoppingListComponent } from "./shopping-list/shopping-list.component";

const appRoutes: Routes = [
    { path: '', component: RecipesComponent},
    { path: 'shopping-list', component: ShoppingListComponent}
];

@NgModule({
    imports: [RouterModule.forRoot(appRoutes)],
    exports: [RouterModule]
})
export class AppRoutingModule{}

–HTML file

<nav class="navbar navbar-default">
<div class="container-fluid">
<div class="collapse navbar-collapse">
<ul class="nav navbar-nav">
<li><a routerLink="">Recipes</a></li>
<li><a routerLink="shopping-list">Shopping List</a></li>
</ul>
</div>
</div>
</nav>

import routing file into module.ts

all module files should be import in module.ts

–TS File (module.ts)

import { BrowserModule } from '@angular/platform-browser';
import { NgModule } from '@angular/core';
import { FormsModule, ReactiveFormsModule } from '@angular/forms';
import { HttpModule } from '@angular/http';

import { AppRoutingModule } from "./app-routing.module";

@NgModule({
  imports: [
    AppRoutingModule
  ],
})
export class AppModule { }

add router-outlet tag in app.component.html file

–HTML File (app.component.html)

<router-outlet></router-outlet>

We need to add filter with our data. So, there we need to create custom pipe.

–TS File (filter.pipe.ts)

import { Pipe, PipeTransform } from '@angular/core';
@Pipe({
  name: 'filter'
})

export class FilterPipe implements PipeTransform {
  transform(servers: any, term: any): any {
    //check if search term is undefined
    if (term === undefined) return servers;
    //return updated ninjas array
    return servers.filter(function(server){
      return server.name.toLowerCase().includes(term.toLowerCase());
    });
  }
}

register pipe in module.ts file

import { FilterPipe } from "../shared/filter.pipe";

@NgModule({
  declarations: [
    FilterPipe
  ],
})

–HTML File (user.component)

<div class="form-group">
<input class="form-control"type="text"placeholder="Filter" [(ngModel)]="term">
</div>
<table class="table">
<thead>
<th>Name</th>
<th>Joining Date</th>
<th>Age</th>
</thead>
<tbody>
<tr *ngFor="let user of list | filter:term">
<td>{{user.name}}</td>
<td>{{user.joining_date}}</td>
<td>{{user.age}}</td>
</tr>
</tbody>
</table>

What is Pipe in Angular 4 ?

“|” this called pipe and pipe using for transform data.

–HTML File

<table class="table">
<tbody>
<tr *ngFor="let user of list">
<td>{{user.name}}</td>
<td>{{user.joining_date}}</td>
<td>{{user.age}}</td>
</tr>
</tbody>
</table>

There you can see some names are title case and some are uppercase. I want to all of lowercase.

<table class="table">
<tbody>
<tr *ngFor="let user of list">
<td>{{user.name | lowercase}}</td>
<td>{{user.joining_date}}</td>
<td>{{user.age}}</td>
</tr>
</tbody>
</table>

Now I want to all names should be in uppercase.

<table class="table">
<tbody>
<tr *ngFor="let user of list">
<td>{{user.name | uppercase}}</td>
<td>{{user.joining_date}}</td>
<td>{{user.age}}</td></tr>
</tbody>
</table>

Now I want there should be a filter like

Custom Directive

—-ts file (dropdown.directive)

import { Directive, HostListener, HostBinding } from "@angular/core";

@Directive({
    selector: '[appDropdwon]'
})
export class DropdownDirective{
    @HostBinding('class.open') isOpen = false;

    @HostListener('click') toggleOpen(){
        this.isOpen = !this.isOpen;
    }
}

—-ts file (highlight.directive)

<nav class="navbar navbar-default">
<div class="container-fluid">
<div class="collapse navbar-collapse">
<ul class="nav navbar-nav navbar-right">
<li class="dropdown" appDropdwon>
<a class="dropdown-toggle" style="cursor: pointer;" role="button">Manage </a>
<ul class="dropdown-menu">
<li><a style="cursor: pointer;">Save Data</a></li>
<li><a style="cursor: pointer;">Fetch Data</a></li>
</ul>
</li>
</ul>
</div>
</div>
</nav>

ngFor Directive using for show list data.

—-html file (user.component)

<table class="table">
<tbody>
<tr *ngFor="let user of list;">
<td>{{user.name}}</td>
<td>{{user.joining_date}}</td>
<td>{{user.age}}</td>
</tr>
</tbody>
</table>

—-html file (user.component)

list = [{
    name: "Jon", 
    joining_date:"23/10/2015", 
    age: 23
    },
    {
    name:"Viki", 
    joining_date:"24/01/2015", 
    age: 20
    },
    {
    name: "Abc", 
    joining_date:"25/10/2015", 
    age: 43
    },{
    name: "XYZ", 
    joining_date:"28/10/2015", 
    age: 21
    }];

---

Getting the Index when using ngFor

—-html file (user.component)

<table class="table">
<tbody> 
<tr *ngFor="let user of list; let i = index"> 
<td>{{i}}</td> 
<td>{{user.name}}</td> 
<td>{{user.joining_date}}</td> 
<td>{{user.age}}</td> 
</tr> 
</tbody> 
</table>

Applying CSS Classes with ngClass

—-Html file (server.component)

<p
[ngClass]="{online}">
{{ 'Server' }} with ID {{ serverId }} is {{ getServerStatus() }}</p>
 

—-Ts file (server.component)

styles: [`
.online {
color: white
}

Styling Elements Dynamically with ngStyle

<p [ngStyle]="{backgroundColor: black}">{{ 'Server' }} with ID {{ serverId }} is {{ getServerStatus() }}</p>

Enhancing ngIf with an Else Condition

<p *ngIf="serverCreated; else noServer">Server was created, server name is {{ serverName }}</p>

<ng-template #noServer>No server was created!</ng-template>