Routing in Angular is a feature which helps
us to load different components in the UI based on user actions like clicking a
link etc. Apart from clicking on the links we can also change the URL in the
browser and view the components mapped to the various routes.
Let us start with a basic Routing example, let us begin by creating a new component routeApp by running the ng generate component command as follows.
ng generate component routeApp
Let us start with a basic Routing example, let us begin by creating a new component routeApp by running the ng generate component command as follows.
ng generate component routeApp
We will also create 2 other components which will be loaded when the corresponding route in invoked. Let us create an about and a contact component, this time we will use a short form of the ng generate command as follows.
ng g c About
ng g c
Contact
Now we have all the components to code our router, let us start by adding the routing components to the Module. To start with routes in Angular we need to import RouterModule and Routes from @angular/router. We will have to add these to the application module as follows.
import { BrowserModule } from '@angular/platform-browser';
Now we have all the components to code our router, let us start by adding the routing components to the Module. To start with routes in Angular we need to import RouterModule and Routes from @angular/router. We will have to add these to the application module as follows.
import { BrowserModule } from '@angular/platform-browser';
import
{ NgModule } from '@angular/core';
import { RouterModule, Routes } from
'@angular/router';
import { RouteAppComponent } from
'./route-app/route-app.component';
import { AboutComponent } from
'./route-app/about/about.component';
import { ContactComponent } from
'./route-app/contact/contact.component';
const
appRoutes: Routes = [
{ path: 'about', component: AboutComponent },
{ path: 'contact', component:
ContactComponent }
];
@NgModule({
declarations: [
RouteAppComponent,
AboutComponent,
ContactComponent
],
imports: [
RouterModule.forRoot(appRoutes),
BrowserModule,
],
providers: [],
bootstrap:
[RouteAppComponent]
})
export
class AppModule { }
In the above module code we have imported the RouteModule and Routes from Angular, we have also imported 3 components which we will use for different routes. Also we have specified the RouteAppComponent component as the bootstrap, this component will be loaded when the Application starts.
In this example we will not make any changes to the component.ts file of any of the 3 components, we will just update the templates of the components with a message and configure the route components template to load the other 2 components on a specific link click. The route component’s template will look like this.
<table class="layoutTable">
In the above module code we have imported the RouteModule and Routes from Angular, we have also imported 3 components which we will use for different routes. Also we have specified the RouteAppComponent component as the bootstrap, this component will be loaded when the Application starts.
In this example we will not make any changes to the component.ts file of any of the 3 components, we will just update the templates of the components with a message and configure the route components template to load the other 2 components on a specific link click. The route component’s template will look like this.
<table class="layoutTable">
<tr>
<td
class="leftMenu">
<a routerLink="/about"
routerLinkActive="active">About</a><br/>
<a routerLink="/contact"
routerLinkActive="active">Contact</a><br/>
</td>
<td
class="content">
This is the Home page of the Routing
Component
<router-outlet></router-outlet>
</td>
</tr>
</table>
This is the base component, the routeLink specifies the route and the component to be loaded when the route is invoked. In this case we have 2 links about and contact which will load the about and contact components. The router-outlet is the placeholder to load the components, when any of the route is invoked the components will be loaded in this place.
The other 2 components templates will be very simple, we will just display a message as follows.
<p>
This is the base component, the routeLink specifies the route and the component to be loaded when the route is invoked. In this case we have 2 links about and contact which will load the about and contact components. The router-outlet is the placeholder to load the components, when any of the route is invoked the components will be loaded in this place.
The other 2 components templates will be very simple, we will just display a message as follows.
<p>
About page, activated using the /about Route.
</p>Since we changed the bootstrap component in our app module, make sure that you change the selector tag in the root index.html page to load the new routing component's selector.
<body>
<app-route-app></app-route-app>
</body>
Let us compile and run the sample using the serve command as follows.
ng serve –o
The output will be as follows, we can click on the about and contact links and the corresponding components will get loaded in the root component in place of the router-outlet.
No comments:
Post a Comment