Angular is a single-page application development framework. In a single-page application, only one HTML page is rendered to the end-user, and that one page has a placeholder element in which HTML for all different routes of the application is rendered and shown to the end-user. This placeholder element is called the router-outlet. The single page that is rendered on the first load of the application never takes a round trip back to the server. In this guide, you will learn how to use a router-outlet to render the output of different routes to the end-user. You will create a demo application having a navigation bar with links to two routes of the application.
To complete this guide, you must have the following:
ng new router-outlet-demo
The next step is to install Twitter Bootstrap and jQuery and reference them in the project so you can use some of the form styles to make the form look good.
cd router-outlet-demo
npm i jquery
npm i bootstrap
angular.json
.styles
array before src/style.css
."node_modules/bootstrap/dist/css/bootstrap.min.css",
scripts
array:"node_modules/jquery/dist/jquery.min.js",
"node_modules/bootstrap/dist/js/bootstrap.min.js"
class="container"
The final code should look like this:
1<body class="container">
2 <app-root></app-root>
3</body>
Now the project is all set to develop the routing.
In Visual Studio Code, open the file src > app > app.module.ts
, delete the existing content, and add the following code. This code imports Angular's router module and creates a routes array in which you will keep all your application routes.
1import { BrowserModule } from '@angular/platform-browser';
2import { NgModule } from '@angular/core';
3
4import { AppComponent } from './app.component';
5import { NavBarComponent } from './nav-bar/nav-bar.component';
6import {RouterModule, Routes} from '@angular/router';
7
8const routes: Routes = [
9];
10
11@NgModule({
12 declarations: [
13 AppComponent,
14 NavBarComponent
15 ],
16 imports: [
17 BrowserModule,
18 RouterModule.forRoot(routes)
19 ],
20 providers: [],
21 bootstrap: [AppComponent]
22})
23export class AppModule { }
24
ng generate component home
src > app > home > home.component.html
, delete the existing content, and add following code:1<h1>Home Component</h1>
2<pre>
3Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.
4Aliquam sem fringilla ut morbi tincidunt. Feugiat nibh sed pulvinar proin gravida hendrerit. Sed blandit libero volutpat sed cras ornare.
5Est lorem ipsum dolor sit amet consectetur adipiscing. Bibendum at varius vel pharetra vel turpis nunc eget. Vulputate dignissim suspendisse in
6est ante in nibh mauris. Magna fermentum iaculis eu non diam phasellus vestibulum lorem sed. Faucibus in ornare quam viverra orci sagittis eu volutpat.
7Ante metus dictum at tempor commodo ullamcorper a lacus vestibulum. Arcu dictum varius duis at consectetur lorem donec massa. Turpis egestas pretium aenean
8pharetra magna ac placerat. Turpis egestas pretium aenean pharetra magna ac placerat vestibulum. Faucibus scelerisque eleifend donec pretium. Vel turpis nunc
9eget lorem dolor sed viverra ipsum nunc. In fermentum et sollicitudin ac orci. Massa massa ultricies mi quis hendrerit dolor magna eget est. Sem integer vitae
10justo eget magna fermentum iaculis eu. Diam sollicitudin tempor id eu nisl nunc mi ipsum. Nunc consequat interdum varius sit amet mattis.
11</pre>
ng generate component about-us
src > app > about-us > about-us.component.html
, delete the contents of the file, and add following code:1<h1>About Us</h1>
2<pre>
3Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.
4Aliquam sem fringilla ut morbi tincidunt. Feugiat nibh sed pulvinar proin gravida hendrerit. Sed blandit libero volutpat sed cras ornare.
5Est lorem ipsum dolor sit amet consectetur adipiscing. Bibendum at varius vel pharetra vel turpis nunc eget. Vulputate dignissim suspendisse in
6est ante in nibh mauris. Magna fermentum iaculis eu non diam phasellus vestibulum lorem sed. Faucibus in ornare quam viverra orci sagittis eu volutpat.
7Ante metus dictum at tempor commodo ullamcorper a lacus vestibulum. Arcu dictum varius duis at consectetur lorem donec massa. Turpis egestas pretium aenean
8pharetra magna ac placerat. Turpis egestas pretium aenean pharetra magna ac placerat vestibulum. Faucibus scelerisque eleifend donec pretium. Vel turpis nunc
9eget lorem dolor sed viverra ipsum nunc. In fermentum et sollicitudin ac orci. Massa massa ultricies mi quis hendrerit dolor magna eget est. Sem integer vitae
10justo eget magna fermentum iaculis eu. Diam sollicitudin tempor id eu nisl nunc mi ipsum. Nunc consequat interdum varius sit amet mattis.
11</pre>
src > app > app.module.ts
.1{path:'home', component: HomeComponent},
2{path:'about', component: AboutUsComponent}
In Visual Studio Code, open the file src > app > app.component.html
, delete the existing content, and add the following code. By doing so, you will be adding the router-outlet component to the mix so that different routes are rendered in it.
1<app-nav-bar></app-nav-bar>
2<router-outlet></router-outlet>
You are now ready to use the router-outlet component.
ng serve
http://localhost:4200
.About-us
component.Congratulations! You have successfully used the router-outlet to render different application routes to the end-users. For more information, please visit Router Outlet in Angular.