Angular 4 Router Outlet: A QuickStart

0

This page will guide you over Angular 4 Router Outlet.

It’s important to know the basics of Angular 4 Routing before building an Angular 4 App.

Routing is one of the important aspects of any Single Page Application (SPA).

Getting Started With Angular 4 Router Outlet

RouterOutlet is just a placeholder where contents of particular component will be rendered.

So, whenever we switch routes, our content will be rendered in place of the router-outlet tag.

Moreover, if you click on component A then the contents of component A will be rendered and vice versa.

Now, let’s drive Angular 4 Router Outlet With A Simple Example

Here, we’ll create two components and see how we can navigate using Angular 4 Router Outlet

1.Set up your Angular 4 project

ng new angular4-router-outlet

Do you want learn first, how to set up project in Angular 4? Take me to Angular 4 Hello World

2. Setting up the Routes

Using Router, you can define the routes of your application as shown below. Path is src/app/app.module.ts

//Import core modules
import { BrowserModule } from '@angular/platform-browser';
import { NgModule } from '@angular/core';
//Import App Component
import { AppComponent } from './app.component';
//Import Router modules
import { Routes, RouterModule } from '@angular/router';
//Import Component1
import { Component1Component } from './component1/component1.component';
//Import Component2
import { Component2Component } from './component2/component2.component';

//Define the routes
const appRoutes: Routes = [
//Default path will redirect to component1
  {path: '', redirectTo: '/comp1', pathMatch: 'full' },
//If path matches to comp1, it will render Component1Component
  {path: 'comp1', component: Component1Component},
//If path matches to comp2, it will render Component2Component
  {path: 'comp2', component: Component2Component}
]

@NgModule({
  declarations: [
    AppComponent,
    Component1Component,
    Component2Component
  ],
  imports: [
    BrowserModule,
    RouterModule.forRoot(appRoutes) //Use forRoot
  ],
  providers: [],
  bootstrap: [AppComponent]
})
export class AppModule { }

3. Now, let’s see how to navigate With Router Links

We can use routerLink to navigate on certain destination using a href as shown below. Path is src/app/app.component.html

<div class="container">
  <h1>
    Welcome to {{title}}!
  </h1>
  <div class="row">
    <div class="col-md-6">
      <ul class="nav nav-tabs">
        <li role="presentation">
          <a href="#" 
            routerLink="/comp1">Component 1</a>
        </li>
        <li role="presentation">
          <a href="#" 
            routerLink="/comp2">Component 2</a>
        </li>
      </ul>    
    </div>
  </div>
  <div class="row">
    <div class="col-md-6">
      <router-outlet></router-outlet>
    </div>
  </div>
</div>

Here is, component 1 HTML, path is src/app/component1/component1.component.html

<p>
  <b>component1 works!</b>
</p>
<p>
Lorem Ipsum is simply dummied text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s when an unknown printer took a galley of type and scrambled it to make a type specimen book. It has survived not only five centuries, but also the leap into electronic typesetting, remaining essentially unchanged. 
</p>

Next is, component 2 HTML, path is src/app/component2/component2.component.html

<p>
  <b>component2 works!</b>
</p>
<p>
Lorem Ipsum is simply dummied text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s when an unknown printer took a galley of type and scrambled it to make a type specimen book. It has survived not only five centuries, but also the leap into electronic typesetting, remaining essentially unchanged. 
</p>

Here, in this example I’ve used bootstrap.

Do you want to use bootstrap and create HTML forms in your app? Take me to learn Angular 4 Forms Using Bootstrap

4. Next, let’s make Active Router Link

To make your router link active by default you can use routerLinkActiveOptions with routerLinkActive as shown below.

<ul class="nav nav-tabs">
  <li role="presentation" 
     routerLinkActive="active" 
     [routerLinkActiveOptions]="{exact: true}" >
      <a href="#" 
      routerLink="/comp1">Component 1</a>
  </li>
  <li role="presentation"
     routerLinkActive="active">
       <a href="#" 
       routerLink="/comp2">Component 2</a>
   </li>
</ul> 

5. Finally, let’s see how Manual Navigation works!

Moreover, you want to navigate manually on any action.

You can use navigate method as shown below.

Don’t forget to include Router in your component.

this.router.navigate(['/comp1']);

Next, you can go through the Angular 4 Router Outlet, project directory structure.


Angular 4 Router Outlet - Project Directory Structure

Now, let’s run our Angular 4 Router Outlet App.

angular4-router-outlet > ng-serve

Here we go! You can run http://localhost:4200 in your browser.

Output could see below


Angular 4 Router Outlet - Output

That’s more-or-less all the basics you should know to get routing up and running for your Angular App.

Now, are you excited to build your first Angular 4 Authentication App using Angular 4 Router Outlet? Take me to Angular 4 Authentication App

Furthermore, do you want dig into more?Take Me Deep Into Angular 4 Routing And Navigation

If you’ve any questions/suggestion, please share your comments below that will help me to provide more improved version of article.

Happy Coding!

Leave a Reply

avatar
  Subscribe  
Notify of