Using routerLink and ActivatedRoute

src/app/todo/todo.component.html

@@ -38,13 +38,13 @@ <h1>Todo</h1>
     <!-- Remove this if you don't implement routing -->
     <ul class="filters">
       <li>
-        <a class="selected" href="#/">All</a>
+        <a [routerLink]="['/all']" [class.selected]="path === 'all'">All</a>
       </li>
       <li>
-        <a href="#/active">Active</a>
+        <a [routerLink]="['/active']" [class.selected]="path === 'active'">Active</a>
       </li>
       <li>
-        <a href="#/completed">Completed</a>
+        <a [routerLink]="['/completed']" [class.selected]="path === 'completed'">Completed</a>
       </li>
     </ul>
     <!-- Hidden if no completed items are left ↓ -->

src/app/todo/todo.component.ts

@@ -1,4 +1,6 @@
 import { Component, OnInit } from '@angular/core';
+import { ActivatedRoute } from '@angular/router';
+
 import { TodoService } from './todo.service';
 
 @Component({
@@ -11,8 +13,16 @@ export class TodoComponent implements OnInit {
   private todos;
   private activeTasks;
   private newTodo;
+  private path;
+
+  constructor(private todoService: TodoService, private route: ActivatedRoute) { }
 
-  constructor(private todoService: TodoService) { }
+  ngOnInit() {
+    this.route.params.subscribe(params => {
+      this.path = params['status'];
+      this.getTodos();
+    });
+  }
 
   addTodo(){
     this.todoService.add({ title: this.newTodo, isDone: false }).then(() => {
@@ -37,10 +47,6 @@ export class TodoComponent implements OnInit {
     });
   }
 
-  ngOnInit() {
-    this.getTodos();
-  }
-
   destroyTodo(todo) {
     this.todoService.delete(todo).then(() => {
       return this.getTodos();