Skip to main content

Posts

Showing posts with the label RouterLink

Create a Menu Using Navigation Using RouterLink, Navigate or NavigateByUrl in Angular 7

In this example, I’m sharing to “ How to create a menu using Angular 7 routing? ”   Using Navigation Using RouterLink, Navigate or NavigateByUrl. Let’s see the example:- App component page – < nav class = "navbar navbar-light bg-faded" >   < ul class = "nav navbar-nav" >       < li class = "nav-item active" >           < a class = "nav-link" href = "/Calculator" > Calculator </ a >         </ li >     < li class = "nav-item active" >       < a class = "nav-link" href = "/holiday" > Holiday </ a >     </ li >   </ ul > </ nav > < router-outlet ></ router-outlet > App routing module page - import { NgModule } from '@angular/core' ; import { Routes , RouterModule } from '@angular/rou...

What Is Router Imports in Angular?

What Is Router imports? It is an optional service that presents a special component view for a given URL. It has own library package- @angular/router and It is not a part of an Angular core. The Angular package looks like this. import  { Routes ,  RouterModule ,}    from   '@angular/router' ; And    //Composability and Grouping    //imports used for composing modules together.    imports:  [      BrowserModule ,      //enableTracing enables debugging purposes only      //useHash enables the location strategy that uses the URL fragment instead of the history API.      RouterModule . forRoot ( appRoots , {  enableTracing:   true ,  useHash: true  })    ], For more detail kindly refer the link - https://www.code-sample.com/2018/05/angular-5-6-7-routing-and-navigation.html

Angular 5/4 Routers, Navigation (RouterLink and RouterOutlet) Menus, Component and Services Examples

In this article we’ve shown “ How to navigate between the different routes in an Angular application? ” using the Routers and RouterLink directives. Also explain “how to CREATE and use the Angular services ?” ü   Stayed Informed – Angular 5 and Angular 4 documentation and example The Angular router is very easy to use, and below I’ll share some of the basics -     <!-- App Router Link -->     < a routerLink = "/app-user" routerLinkActive = "active" > Users </ a >     < a routerLink = "/app-bill" routerLinkActive = "active" > Bills </ a >        <!-- App Router Outlet -->     < router-outlet ></ router-outlet > And   RouterModule . forRoot ([       {         path: 'app-user' , component:UserComponent       },   ...