Routing in Angular

Routing in Angular

1. Create routing in app module.
2. Command's to create a routing file new project or existing project.
3. Creating 3 Components.
4. Creating routes for 3 component's
5. How to route from one page to other page.

Create routing in app module

1. Create an angular project with the following command 
    Command: ng new routing-sample
2. The above command creates angular project with app component as default. 
3. Now generate three component's as below 
   1. ng generate component template-forms --spec=false
   2. ng generate component list --spec=false
   3. ng generate component pageNotFound --spec=false
4. The above 3 generated component's should be linked and imported 
   to app.module.ts
5. In app.module.ts import RouterModule and Routes type from @angular/router;
   import {Routes, RouterModule} from '@angular/router';
6. Create an array of path's and pass the value to 
    RouterModule.forRoot() [Only when we have Parent routes] or 
    RouterModule.forChild() [Only when we have child routes].7. The above RouterModule.forRoot(ROUTES_ARRAY) 
    or RouterModule.forChild(ROUTES_ARRAY)  in import section of@ngModule().

The Updated routing code in app.module.ts will be as follow's

import { BrowserModule } from '@angular/platform-browser';
import { NgModule } from '@angular/core';
import {Routes, RouterModule} from '@angular/router';
import {FormsModule} from '@angular/forms';
import { AppComponent } from './app.component';
import { TemplateFormsComponent } 
   from './template-forms/template-forms.component';
import { ListComponent } from './list/list.component';
import { PageNotFoundComponent } 
    from './page-not-found/page-not-found.component';

const routes: Routes = [
  {
    path: '',
    redirectTo: '/login',
    pathMatch: 'full'
  },
  {
    path: 'login',
    component: TemplateFormsComponent
  },
  {
    path: 'list',
    component: ListComponent
  },
  {
    path: '404',
    component: PageNotFoundComponent
  },
  {
    path: '**',
    redirectTo: '/404',
    pathMatch: 'full'
  }
];

@NgModule({
  declarations: [
    AppComponent,
    TemplateFormsComponent,
    ListComponent,
    PageNotFoundComponent
  ],
  imports: [
    BrowserModule,
    RouterModule.forRoot(routes),
    FormsModule
  ],
  providers: [],
  bootstrap: [AppComponent]
})
export class AppModule { }

1. In the above code when path: '' it is called a default route
2. If path:'**' it is used for page not found or path not found
3. Always use default path as 1st object and path not found as 
   last object in routes array

Where the navigated component will be rendered ?

1. Angular have provided an element i.e.. 
   <router-outlet></router-outlet>
2. Here based on route the router-outlet element 
   will be internally replaced with selector of the particular 
   route component and will render the view.

Where to use router-outlet?

1. <router-outlet> should be used in parent html of route's
    (Here we use app.component.html as this is the parent).

app.component.html looks like below 

<router-outlet></router-outlet>

How to navigate from one component to other component?

1. Create one component html with a button and on clicking on the button 
   we navigate to other component 
   let us consider 2 components and navigation from login to list 
3. We can do this 2 approach's 
   a. From view 
   b. From controller

template-forms.component.html looks like below (View approach)

<button routerLink="/list">Navigate to list page from HTML itself</button>

1. Here RouterLink is an angular directive which takes one of the 
   route path as an argument
2. Now on clicking on the above button it will navigate to list page and 
   list component will be rendered
3. In this user navigation happen's without interacting to controller

template-forms.component.html looks like below (Controller approach)

  <button (click)="navigateToList()">
      Navigate to list page from Controller
  </button>
Here navigation happen's from the controller

1. when user perform click operation i will call navigateToList()
   which is in controller and will perform the operation's in 
  controller 

template-forms.component.ts looks like below (Controller approach)

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

import { Router } from '@angular/router';

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


  constructor(private _router: Router) { }

  ngOnInit() {
  }

  navigateToList() {
    this._router.navigate(['list']);
           or
    this._router.navigateByUrl('/list);
  }
}

Here either we can use either navigate method or navigateByUrl. 

1. When use navigate method the path's should be passed in 
   array format
2. When we use navigateByUrl we need to pass the exact path as 
   parameter

When to use View approach and Controller Approach

1. When user want to navigate without any operation's then 
   use View Approach
2. When User want to navigate after performing some operation's 
   use Controller Approach.

routerLinkActive directive

 1. When we want apply some active class for any path based on 
   the page we are, we can use routerLinkActive="SOME CSS CLASS"

EXAMPLE : <a routerLinkActive = "active" routerLink="/list"> </a>

when user is in list page list link will be in active state 
or active class is applied