Angular 6 Routing

Angular 6 Routing

The route is essentially the move through websites. You've seen lots of related pages that will guide you to a new page. Using routing, this can be done. Here the pages we link to will be component-shaped. We've already seen a part being built. Let's build a template now to see if routing can be done for it.

import { BrowserModule } from '@angular/platform-browser';
import { NgModule } from '@angular/core';
import { RouterModule} from '@angular/router';
import { AppComponent } from './app.component';
import { NewCmpComponent } from './new-cmp/new-cmp.component';
import { ChangeTextDirective } from './change-text.directive';
import { SqrtPipe } from './app.sqrt';
@NgModule({
   declarations: [
      SqrtPipe,
      AppComponent,
      NewCmpComponent,
      ChangeTextDirective
   ],
   imports: [
      BrowserModule,
      RouterModule.forRoot([
         {
            path: 'new-cmp',
            component: NewCmpComponent
         }
      ])
   ],
   providers: [],
   bootstrap: [AppComponent]
})
export class AppModule { }

We now have to include the router module in the main parent component app.module.ts as shown below –

import { RouterModule} from '@angular/router'

The RouterModule is being imported from angular / router here. The module exists in the imports as shown below –

RouterModule.forRoot([
   {
      path: 'new-cmp',
      component: NewCmpComponent
   }
])

RouterModule refers to the forRoot that takes an input as an array that, in effect, has the route object and the part. Path is the router name, and the component is the class name, that is, the component that was created.

Let us now see the file created by the feature –

New-cmp.component.ts

import { Component, OnInit } from '@angular/core';
@Component({
   selector: 'app-new-cmp',
   templateUrl: './new-cmp.component.html',
   styleUrls: ['./new-cmp.component.css']
})
export class NewCmpComponent implements OnInit {
   newcomponent = "Entered in new component created";
   constructor() {}
   ngOnInit() { }
}

The highlighted class is mentioned in the imports of the main module.

New-cmp.component.html

<p>
   {{newcomponent}}
</p>

<p>
   new-cmp works!
</p>

Now, we need to view the above content from the html file whenever the main module needs or clicks on it. To do so we need to apply the specifics of the router to the app.component.html.

<h1>Custom Pipe</h1>
<b>Square root of 25 is: {{25 | sqrt}}</b><br/>
<b>Square root of 729 is: {{729 | sqrt}}</b>
<br />
<br />
<br />
<a routerLink = "new-cmp">New component</a>
<br />
<br/>
<router-outlet></router-outlet>

In the above code, we have created the anchor link tag and given routerLink as "new-cmp". This is referred in app.module.ts as the path.

If a user clicks on a new component the content should be displayed on the page. To do so, we need the tag- <router-outlet> </router-outlet>.

The above tag ensures that when a user clicks on new component, the content in the new-cmp.component.html will appear on the page.

The url will contain http:/localhost:4200 / new-cmp. The new-cmp is added here to the original url, the path provided in app.module.ts and the router-link in app.component.html.

If a user clicks on New component, the page is not updated and the content is presented without reloading. Just a slight side of the web code can restart when clicked. It functionality improves when we have strong page content and need loading depending on user interaction. The functionality also provides a good user experience since the website is not being reloaded.