Where To Register Angular 1.4 Directive

RouterModule provides RouterLink directives in Angular. The RouterModule adds router directives and providers. RouterLink lets us link to the specific routes in our angular awarding.

Angular RouterLink

RouterLink is a built-in Angular Directive that lets you lot link to specific routes in your app. In the SPA(single-folio awarding), you alter what the user sees by showing or hiding portions of the display that correspond to detail components, rather than going out to the server to go a new page.

As users demand to perform application tasks, they must move between the views you have defined. To implement navigation betwixt dissimilar routes within your single-folio app, use the Angular Router.

Consider the post-obit road configuration: [{ path: 'customer/:id', component: CustComponent }]. When linking to this customer/:id road, you employ the RouterLink directive.

If there is a static link, y'all can employ the directive as follows: <a routerLink="/client/21″>link to cust component</a>

If you use dynamic values to generate a link, you tin can pass the array of path segments, followed by the parameters for each segment.

For instance ['/group', groupId, 'user', userName, {full: truthful}] means that we desire to generate a link to /grouping/21/user/billy;full=true.

Routing segments

The first segment name can be prepended with /, . /, or . . /:

1. If the first segment begins with /, the router will look upwards the route from the app's root.
2. Suppose the first segment begins with . And then,/, or doesn't kickoff with a slash, the router will instead look in the children of the current activated route.
3. And if the outset segment begins with . . /, the router will go upwards one level.

Set Query Parameters in Angular

To set query parameters in Angular, use the following syntax.

<a [routerLink]="['/customer/jt']" [queryParams]="{purchase: true}">   link to client component </a>

RouterLink will apply these to generate this link:/customer/jt;purchase=true.

You can provide aland value to be persisted to the browser'southward History.state belongings.

<a [routerLink]="['/customer/jt']" [country]="{transactionId: 123}">   link to customer component </a>

Method of RouterLink

The RouterLink provides i method calledonClick().

The onClick() method does non accept a single parameter and returns a Boolean value.

Example of RouterLink directive

To create an Athwart 12 project, you must upgrade Angular CLI.

To create a new Angular project, type the following command.

While creating a new projection, please enable the routing by selecting y in the options.

ng new angularguard

You can proper name your project whatever you want.

Now, go inside the project folder and install Bootstrap CSS Framework.

npm install bootstrap --relieve

Register the CSS file inside theangular.jsonfile.

"styles": [        "src/styles.css",        "./node_modules/bootstrap/dist/css/bootstrap.min.css" ],

Now, create the following two new Athwart components.

1. HomeComponent
2. DashboardComponent

Please type the following commands to create it.

ng g c dwelling --skipTests=true ng g c dashboard --skipTests=true

After creating components, we will ascertain the routes array containing different objects.

And so, write the post-obit code inside theapp-routing.module.tsfile.

// app-routing.module.ts  import { NgModule } from '@angular/core'; import { Routes, RouterModule } from '@angular/router'; import { HomeComponent } from './dwelling house/home.component'; import { DashboardComponent } from './dashboard/dashboard.component';  const routes: Routes = [   { path: 'home', component: HomeComponent},   { path: 'dashboard', component: DashboardComponent } ];  @NgModule({   imports: [RouterModule.forRoot(routes)],   exports: [RouterModule], }) export course AppRoutingModule { }

Y'all tin can map the dissimilar routes to different components here and, finally, register all the routes usingRouterModule.forRoot() function.

The Router-Outlet is the directive provided by the angular router library where the router adds the component that gets matched based on the electric current browser's URL.

Let's write <router-outlet>directive inside theapp.component.htmlfile in our instance. Nosotros will likewise add the navigation bar inside the app.component.htmlas well.

<nav class="navbar navbar-light navbar-expand-lg" style="background-color: #e3f2fd;">   <div class="container">     <a class="navbar-brand">AppDividend</a>     <div class="collapse navbar-collapse" id="navbarSupportedContent">       <ul class="navbar-nav ml-machine">           <li class="nav-particular">             <a grade="nav-link">             Dwelling house             </a>           </li>           <li form="nav-particular">             <a class="nav-link">             Dashboard             </a>           </li>       </ul>     </div>   </div> </nav> <div class="container">   <router-outlet></router-outlet> </div>

You tin can see that we take not written a routerLink directive inside theanchor tag.

To navigate from ane route to some other, we must put the routerLink directive.

TherouterLink directive takes a route path that we accept already divers within theroutes assortment.

Let's add the directive.

<!-- app.component.html -->  <nav class="navbar navbar-calorie-free navbar-expand-lg" style="background-colour: #e3f2fd;">   <div form="container">     <a routerLink="/" grade="navbar-make" routerLinkActive="active" >AppDividend</a>     <div course="collapse navbar-collapse" id="navbarSupportedContent">       <ul grade="navbar-nav ml-auto">         <ng-container>           <li grade="nav-detail">             <a routerLink = "home" class="nav-link">             Home             </a>           </li>           <li grade="nav-detail">             <a routerLink = "dashboard" grade="nav-link">             Dashboard             </a>           </li>          </ng-container>       </ul>     </div>   </div> </nav> <div form="container">   <router-outlet></router-outlet> </div>

Okay, so now nosotros have ii views, and we can navigate between those views using routerLink.

We can too write therouterLinkdirective like this.

<ng-container>       <li form="nav-item">          <a [routerLink] = "['/home']" class="nav-link">             Home          </a>       </li>       <li grade="nav-item">          <a [routerLink] = "['/dashboard']" form="nav-link">             Dashboard          </a>       </li> </ng-container>

Laissez passer Query Parameters in Angular

To laissez passer the query parameters, you can write the ballast tag.

<ng-container>        <li grade="nav-item">           <a [routerLink] = "['/domicile']" [queryParams] = "{success: true}" class="nav-link">             Home           </a>         </li>         <li grade="nav-particular">           <a [routerLink] = "['/dashboard']" class="nav-link">             Dashboard           </a>         </li> </ng-container>

Start the dev server with the following control.

ng serve -o

It will open up the browser with http://localhost:4200 URL.

Click on thedwellinglink, and y'all will see the following URL.

http://localhost:4200/home?success=true

That is it. Nosotros accept successfully passed the query parameters to the HomeComponent.

Nosotros tin capture the parameter and put some atmospheric condition based on that parameter values. For example, brandish the notification like a bootstrap alert box on success or failure.

Write the following code inside thehome.component.tsfile.

// home.component.ts  import { Component, OnInit } from '@angular/core'; import { Router, ActivatedRoute } from '@angular/router'; @Component({   selector: 'app-dwelling',   templateUrl: './home.component.html',   styleUrls: ['./home.component.css'] }) export class HomeComponent implements OnInit {    notify: cord;   constructor(private router: Router, individual road: ActivatedRoute) { }    ngOnInit(): void {     this.road.queryParams.subscribe(params => {       if (params.success === 'true') {         this.notify = 'You have passed data';       }     });   } }        

In this code, nosotros have used the queryParams.subscribe()office to get the query parameters passed to the current URL.

Based on the condition, nosotros are setting thenotifymessage.

Now, write the following code inside thedomicile.component.htmlfile.

<!-- home.component.html -->  <div *ngIf="notify" grade="alert alert-success">     {{ notify }} </div> <p>abode works!</p>        

Okay, now encounter the output in the browser.

If you remove the query parameters from the URL and only hit this URL: http://localhost:4200/home, you will not get whatever notification bulletin.

Conclusion

In this example, we take seen how to use routerLink directive in navigation, pass query parameters and capture the queryParams using ActivatedRoute.

That'due south it for this tutorial.

Come across likewise

Athwart router navigate

Angular route guard

Angular Tutorial

Source: https://appdividend.com/2022/01/21/angular-routerlink/

Posted by: stewartproughat.blogspot.com

Share this post