Angular 2 Challenge Day 12 - Deep Linking in the Router

On Day 12 we turn the Angular 2 Router up to 11 by deep linking to specific friend in our friends component.

You can always grab tagged source code on the GitHub repo which will be tagged day1, day2, etc.

You can Subscribe to my Fresh Bytecode channel for regular Java/Web-related screencasts, or if you’re just into Angular, checkout the YouTube Playlist where I update all the episodes in this series as they come out.

Here’s the script so you can follow along at home:

[ ] First, let’s implement our Friends Component

import { FeedService } from '../feed.service';

friends = [ ];

  constructor(private feedService : FeedService) { 

  }

  ngOnInit() {
    this.friends = this.feedService.getFriends();
    console.log(this.friends);
  }

[ ] Implement our getFriends() method

getFriends() : Array<string> {

    return [ 'Mary', 'Joe', 'Karen', 'Phil', 'Toni' ];

}

[ ] Update the view

<div class="ui comments" *ngIf='friends.length'>
  <div class="comment" *ngFor='let friend of friends'>
    <a class="avatar">
      <img src="./avatars/{{friend.toLowerCase()}}.jpg">
    </a>
    <div class="content">
      <a class="author">{{friend}}</a>
      
      <div class="actions">
        <a >Details</a>
      </div>
    </div>
  </div>
</div>

<div *ngIf='!friends.length'>
  <h2>THere are not any friends here</h2>
</div>

[ ] Show the friends list

[ ] Let’s create a component for deep linking into our friends details

ng g c friend

[ ] Update our app.routing.ts to point to the new component

import { FriendComponent } from './friend';

{ path: 'friends/:friendId', component: FriendComponent },

[ ] Implement the new component friend.component.ts logic to get params

  friendId = '';

  constructor(private route : ActivatedRoute) { }

  ngOnInit() {
    this.route.params.map(params => params['friendId']).subscribe((friendId) => {
      this.friendId = friendId;
      console.log(friendId);
    })
  }

[ ] Update the friend.component.html view file to output the friend:

<h2>
  This friend is {{ friendId }}
</h2>

[ ] Update our router link in feeds.component.html to pass the parameters:

routerLink="/friends/{{friend}}"

[ ] Run it and cheer!

[ ] Next up we’ll start looking into http for remote data fetching