How to use Routing & Navigation in Angular

 Routing & Navigation

The Angular Router enables navigation from one view to the next as users perform application tasks.

 Overview

The browser is a familiar model of application navigation:

• Enter a URL in the address bar and the browser navigates to a corresponding page.
• Click links on the page and the browser navigates to a new page.
• Click the browser's back and forward buttons and the browser navigates backward and forward through the history of pages you've seen.

 A few essential concept of routing

An introduction to a few core router concepts will help orient you to the details that follow.

• <base href=""> </base> Most routing applications should add a element to the index.html as the first child in the tag to tell the router how to compose navigation URLs. If the app folder is the application root, as it is for the sample application, set the href value exactly as shown here.
  Index.html <base href="/"> </base>
• Router imports
  The Angular Router is an optional service that presents a particular component view for a given URL. It is not part of the Angular core. It is in its own library package, @angular/router. Import what you need from it as you would from any other Angular package. See below code. Module name : app.module.ts import { Routes, RouterModule } from '@angular/router';
• Configuration
  A routed Angular application has one singleton instance of the Router service. When the browser's URL changes, that router looks for a corresponding Route from which it can determine the component to display. A router has no routes until you configure it. The following example creates five route definitions, configures the router via the RouterModule.forRoot() method, and adds the result to the AppModule's import array.
  See below code AppRouting Module : app-routing.module.ts import { CountiresComponent } from './countires/countires.component'; import { IndexComponent } from './index/index.component'; import { HomeComponent } from './home/home.component'; import { CountryComponent } from './country/country.component'; import { NgModule } from '@angular/core'; import { Routes, RouterModule } from '@angular/router'; const routes: Routes = [ { path: 'Country/:code', component: CountryComponent }, { path: 'Home', component: HomeComponent }, { path: 'Index', component: IndexComponent }, { path: 'Countries', component: CountiresComponent }, { path: '**', redirectTo: 'Countries', pathMatch: 'full' } ]; @NgModule({ imports: [RouterModule.forRoot(routes)], exports: [RouterModule] }) export class AppRoutingModule { } The :code in the second route is a token for a route parameter. In a URL such as'Country/AZ', "AZ" is the value of the id parameter. The corresponding CountryComponent will use that value to find and present the hero whose id is AZ. You'll learn more about route parameters later in this guide.
  The ** path in the last route is a wildcard. The router will select this route if the requested URL doesn't match any paths for routes defined earlier in the configuration. This is useful for displaying a "404 - Not Found" page or redirecting to another route.
  The order of the routes in the configuration matters and this is by design. The router uses a first-match wins strategy when matching routes, so more specific routes should be placed above less specific routes. In the configuration above, routes with a static path are listed first, followed by an empty path route, that matches the default route. The wildcard route comes last because it matches every URL and should be selected only if no other routes are matched first.
  If you need to see what events are happening during the navigation lifecycle, there is the enableTracing option as part of the router's default configuration. This outputs each router event that took place during each navigation lifecycle to the browser console. This should only be used for debugging purposes. You set the enableTracing: true option in the object passed as the second argument to the RouterModule.forRoot() method.
• Router outlet
  The RouterOutlet is a directive from the router library that is used like a component. It acts as a placeholder that marks the spot in the template where the router should display the components for that outlet. See below code
  <router-outlet></router-outlet>

 Example

• Let's take one example where we want to navigate among different pages

We will take below-mentioned step to complete it.

• Step 1 : Create 4 different componenet using command ng generate componenet componenetName
• Step 2 : Create one common service using command ng generate service serviceName
• Step 3 : Open app-routing.module.ts and place above mentioned routing configuration
• Step 4 : Open common.service.ts  and place below code 
  getCountries() { return this.countryListAllIsoData; } getCountryByCode(code) { return this.countryListAllIsoData.find(country =&gt; country.code === code); } Note countryListAllIsoData is a variable name that I have used to store data on service layer. you can find this variable in git repository. mentioned in ref link
• Open countires.component.ts and place below code in same file.
  countries = []; constructor(private commonService: CommonService) { } ngOnInit(): void { this.countries = this.commonService.getCountries(); }
• Step 5 :Open  countires.component.html and place below code 
  <h1>List of Countries</h1> <h1> Navigate to : <a href="https://www.blogger.com/u/1/null" ome="" routerlink="">Home</a> <br /> <a href="https://www.blogger.com/u/1/null" ndex="" routerlink="">Index</a> </h1> <table class="blueTable"> <thead> <tr> <th>Detail </th> <th>Code</th> <th>Name</th> </tr> </thead> <tbody> <tr ngfor="let country of countries"> <td><a country.code="" href="https://www.blogger.com/u/1/null" ountry="" routerlink="">Detail</a></td> <td>{{country.code}}</td> <td>{{country.name}}</td> </tr> </tbody> </table>
• Step 6: hit ng serve command and get the result

 Ref Link

• Git :
   https://github.com/coremicroservices/lazy-loading-Angular
• Facebook :
  https://www.facebook.com/coremicroservices/?modal=admin_todo_tour
• Youtube :
  https://www.youtube.com/watch?v=oQgvz-f3ARU