Category: Angular

only for $ 9999

with all content and post

Contact Address:- ajaykumarui1234@gmail.com

Change Detection means updating the DOM whenever data is changed. Angular provides two strategies for Change Detection.

Change Detection: The process of updating the view (DOM) when the data has changed

<router-outlet></router-outlet>
Where we want to output to display for a route, we can configure using router outlet
by default, angular has one router outlet in app.html

Route Information’s
1-Routing Strategy
2-Base href
3-Router module
4-Router outlet
5-Configuring Router
6-Parameterized Routes
7-Router link
8-Redirecting Routes
9-Wildcard Routes
10-Query params in Routes
11-Child Routes
12-Route Guards

Property decorator that configures a view query
View queries are set before the ngAfterViewInit callback is called.

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

@Component({
  selector: 'app-example',
  templateUrl: './example.component.html',
  styleUrls: ['./example.component.css']
})
export class ExampleComponent implements OnInit, AfterViewInit {

  constructor() { }
  @ViewChild('addBtn') addBtn:ElementRef;
  ngOnInit(): void {
  }
   ngAfterViewInit() {
    // child is set
    console.log(this.addBtn.nativeElement)
  }

}

<button #addBtn>add</button>

…………………………………………………………………………………………………………………………………….

@viewchildren

@viewchildren decorator returns the list of different native DOM elements through og QueryList
@ViewChild() in a component can communicate with another component or a directive.
But if we want to access multiple child references, then we have to use @ViewChildren.

import {AfterViewInit, ElementRef, viewChildren,QueryList} from '@angular/core'
export class AppComponent implements AfterViewInit {
// Accessing multiple native DOM elements using QueryList
  @ViewChildren(HelloComponent) myValue: QueryList<HelloComponent>;
  ngAfterViewInit() {
     console.log("Hello ", this.myValue.toArray(););
  }
}

<hello name="{{ name }}"></hello>

<hello name="{{ name }}"></hello>

<hello name="{{ name }}"></hello>

app-routing.module.ts
 import { PreloadAllModules } from '@angular/router';
 @NgModule({ 
 imports: [
   RouterModule.forRoot(routes, { useHash: false, 
   onSameUrlNavigation: 'reload', 
   preloadingStrategy: PreloadAllModules })
  ],    
 exports: [RouterModule]  
})

.

Custom Preloading Strategy

app-routing.module.ts
import {CustomPreloadingStrategy} from './customPreloadingStrategy';
 import { PreloadAllModules } from '@angular/router';
 @NgModule({ 
 imports: [
   RouterModule.forRoot(routes, { useHash: false, 
   onSameUrlNavigation: 'reload', 
   preloadingStrategy: CustomPreloadingStrategy })
  ],    
 exports: [RouterModule]  
})
///////////////////////////////////////
{ path: 'dashboard', 
    loadChildren: () => import('./dashboard/dashboard.module').then(m => m.DashboardModule),
    data: { preload: true, delay:10000 
}

app.module.ts
import {CustomPreloadingStrategy} from './customPreloadingStrategy';
@NgModule({
  declarations: [
    AppComponent
  ],
  imports: [
  ],
  providers: [CustomPreloadingStrategy],
  bootstrap: [AppComponent]
})

customPreloadingStrategy.ts -- service
import {Injectable} from '@angular/core';
import { PreloadingStrategy, Route } from '@angular/router';
import { Observable, of, timer  } from 'rxjs';
import { flatMap } from 'rxjs/operators';

@Injectable()
export class CustomPreloadingStrategy implements PreloadingStrategy {
    preload(route: Route, loadMe: () => Observable<any>): Observable<any> {
    
        if (route.data && route.data['preload']) {
          var delay:number=route.data['delay']
          console.log('preload called on '+route.path+' delay is '+delay);
          return timer(delay).pipe(
            flatMap( _ => { 
              console.log("Loading now "+ route.path);
              return loadMe() ;
            }));
        } else {
          console.log('no preload for the path '+ route.path);
          return of(null);
        }
      }
}

What are Route Guards?

Angular’s route guards are interfaces that can tell the router whether or not it should allow navigation to a requested route. They make this decision by looking for a true or false the return value from a class that implements the given guard interface.

There are five different types of guards and each of them is called in a particular sequence. The router’s behavior is modified differently depending on which guard is used. The guards are:

There are five different types of guards and each of them is called in a particular sequence. The router’s behavior is modified differently depending on which guard is used. The guards are:

• CanActivate
• CanActivateChild
• CanDeactivate
• CanLoad
• Resolve

import { Injectable } from '@angular/core';
import { HttpClient } from '@angular/common/http'
import { Router } from '@angular/router'
@Injectable()
   export class AuthService {
      constructor(
          private http: HttpClient,
          private _router: Router
         ) { }
       loggedIn() {
          return !!localStorage.getItem('token')
     }
}

CanActivate
import { Injectable } from '@angular/core';
import { CanActivate, Router } from '@angular/router';
import { AuthService } from './auth.service';

@Injectable()
export class AuthGuard implements CanActivate {
  constructor(private _authService: AuthService,
    private _router: Router) { }

  canActivate(): boolean {
    if (this._authService.loggedIn()) {
      console.log('true')
      return true
    } else {
      console.log('false')            
      this._router.navigate(['/login'])
      return false
    }
  }
}