In today’s episode, we finally implement a nice looking timeline! Along the way we learn about ngFor, ngIf, and the Date Pipe.

Our Twitter Timeline is taking shape!

Here’s some cool resources to checkout from today’s show:

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 cheat sheet to follow along at home…

[ ] Copy our avatars into public/avatars

[ ] First of all add an Array of Objects/Maps to timeline.component.ts to hold our tweets:

tweets = [ 
    { body: 'Some tweet text', author: 'Glen' },
    { body: 'Some other text', author: 'Karen' },
]

[ ] Put in our layout code from Semantic UI into timeline.component.html

<div class="ui comments">
  <div class="comment" *ngFor='let tweet of tweets'>
    <a class="avatar">
      <img src="/avatars/{{tweet.avatar}}">
    </a>
    <div class="content">
      <a class="author">{{tweet.author}}</a>
      <div class="metadata">
        <span class="date"> {{tweet.date  }}</span>
      </div>
      <div class="text">
        {{tweet.body}}
      </div>
      <div class="actions">
        <a class="reply">Reply</a>
        <a class="like">
          <i class="like icon"></i> {{tweet.favorites.length}} Favourites
        </a>

        <a class="retweet">
          <i class="retweet icon"></i> {{tweet.retweets.length}} Retweets
        </a>
      </div>
    </div>
  </div>
</div>

[ ] Then fill it out with some real data

tweets = [

    { body: 'Always code as if the guy who ends up maintaining your code will be a violent psychopath who knows where you live.', author: 'Glen', avatar: 'glen.jpg', date: new Date(), retweets: [ 'Joe'], favorites: [] },
    { body: 'Measuring programming progress by lines of code is like measuring aircraft building progress by weight', author: 'Joe', avatar: 'joe.jpg', date: new Date(), retweets: [], favorites: ['Mary'] },
    { body: 'Debugging is twice as hard as writing the code in the first place. Therefore, if you write the code as cleverly as possible, you are, by definition, not smart enough to debug it.', author: 'Mary', avatar: 'mary.jpg', date: new Date(), retweets: ['Glen'], favorites: ['Mary'] },
    { body: 'People think that computer science is the art of geniuses but the actual reality is the opposite, just many people doing things that build on each other, like a wall of mini stones', author: 'Glen', avatar: 'glen.jpg', date: new Date(), retweets: [ 'Joe', 'Mary'], favorites: [] },
    { body: 'You can’t have great software without a great team, and most software teams behave like dysfunctional families.', author: 'Joe', avatar: 'joe.jpg', date: new Date(), retweets: [], favorites: ['Mary', 'Glen'] },

  ]

[ ] Put in our conditional show of tweets or “No tweets today” using *ngIf

<div class="ui comments" *ngIf='tweets.length'>
 
</div>

<div *ngIf='!tweets.length'>
  <h2>No tweets today.</h2>
</div>

[ ] Put in our pipe for the date to get a nicer layout

{{tweet.date | date:'h:mm:ss dd/mm/yy' }}

[ ] Deploy to crowd applause