Add Router

We will have two pages, one is chat page, another is profile page.

In chat page, we can also navigate between different channels.

We will have two kind of routes below:

/channel/general
/channel/channel1
/channel/channel2
/channel/...

/profile

We will add profile component later. Let's add the router for the chat part first.

Basic routes

First create our routes.

src/app/shared/routes/app.routes.ts

import { Routes } from '@angular/router';

import { ChatComponent }  from '../../chat/components/chat.component';

export const routes: Routes = [
  {
    path: 'channel',
    component: ChatComponent
  },
  {
    path: '**',
    redirectTo: 'channel'
  }
];

ChatComponent corresponds to the path channel.

Then we need import our routes to the NgModule.

src/app/app.module.ts

import { RouterModule } from '@angular/router';
// ...

@NgModule({
  imports: [
    // ...
    RouterModule.forRoot(routes),
  ],
  // ...
})

At last, change the AppComponent template. The directive <router-outlet> marks where the router should display a view.

src/app/app.component.ts

<router-outlet></router-outlet>

Try on your browser, when you open http://localhost:4200/channel, it will show the ChatComponent page.

If you open http://localhost:4200/hello, since hello does not exist in routes, the app will redirect you to the http://localhost:4200/channel.

Redirect

If you open http://localhost:4200/hello, since hello does not exist in routes, the app will give us error.

So we can let the app redirect the addresses that not exist to an existing address.

src/app/shared/routes/app.routes.ts

export const routes: Routes = [
  // ...
  {
    path: '**',
    redirectTo: 'channel'
  }
];

Note that we need add the path '**' at the bottom of the routes. The order matters. If we add on the top of the routes, it will always redirect us to the path channel.

Route with a Parameter

It will be convenient to users if they can bookmark that channel link and open that link later.

The links look like:

• http://localhost:4200/channel/general
• http://localhost:4200/channel/channel1

We can use :name parameter which stand for general and channel1, etc. Also, don't forget to change redirectTo to make it specific.

src/app/shared/routes/app.routes.ts

import { Routes } from '@angular/router';

import { ChatComponent }  from '../../chat/components/chat.component';

export const routes: Routes = [
  {
    path: 'channel/:name',
    component: ChatComponent
  },
  {
    path: '**',
    redirectTo: '/channel/general'
  }
];

src/app/chat/components/chat.component.ts

import { Component, OnInit, OnDestroy } from '@angular/core';
import { ActivatedRoute, Router } from '@angular/router';
import { Subscription } from 'rxjs/Subscription';

// ...
export class ChatComponent implements OnInit, OnDestroy {
  constructor(
    private router: Router,
    private route: ActivatedRoute,
    // ...
  ) {}

  ngOnInit() {
    this.chatService.getChannels();

    this.subsParams = this.route.params.subscribe(params => {
      const channelName = params['name'];
      this.chatService.getMessages(channelName);
    });
  }

  ngOnDestroy() {
    this.subsParams.unsubscribe();
  }

  onSelectChannel(channel: Channel) {
    this.chatService.selectChannel(channel);
    this.router.navigate(['/channel', channel.name]);
  }

  // ...
}

this.route.params is an observable. It will emit a new value when the set of the parameters changes.

Once we subscribe this.route.params, do not forget to unsubscribe it in the ngOnDestroy.

Remember the :name in the routes? We can get the channel name by params['name']. For example, when we open http://localhost:4200/channel/general, params['name'] value will be general.

At last, we need added this.router.navigate(['/channel', channel.name]); in onSelectChannel function. When we select different channel, it helps us navigate to different page.

Run the live example for this part.