16. Twitter Component

Put together everything we have learned so far.

Reuse like component,

Create tweet component

Use media object in bootstrap

getbootstrap.com

In components page, 'Media Object'

http://getbootstrap.com/components/#media-default

<div class="media">
 <div class="media-left">
   <a href="#">
     <img class="media-object" src="..." alt="...">
   </a>
 </div>
 <div class="media-body">
   <h4 class="media-heading">Media heading</h4>
   ...
 </div>
</div>

Use previous like component like.component.ts

import { Component,Input} from '@angular/core';

@Component({
 selector: 'like',
 template: `
   <i
   class="glyphicon glyphicon-heart"
   [class.highlighted]="iLike"     
   (click)="onClick()">
 </i>
 <span>{{totalLikes}}</span>
 `,

 styles: [`
   .glyphicon-heart {
       color: #ccc;
       cursor:pointer;
   }

   .highlighted{
       color: deeppink;
   }

 `]
})

export class LikeComponent {
 //isFavorite = false;   // currently private, not exposed to outside
 @Input() totalLikes = 0;
 @Input() iLike = false;   

 onClick(){
     this.iLike = !this.iLike;
     this.totalLikes += this.iLike ? 1 : -1;
 }
}

tweet.component.ts

import {Component, Input} from '@angular/core';
import {LikeComponent} from './like.component';

@Component({
   selector: 'tweet',
   template: `
<div class="media">
 <div class="media-left">
   <a href="#">
     <img class="media-object" src="{{ data.imageUrl }}">
   </a>
 </div>
 <div class="media-body">
   <h4 class="media-heading">
       {{ data.author }} <span class="handle">{{ data.handle }}</span>
   </h4>
   {{ data.body }}
   <div>
       <like [totalLikes]="data.totalLikes" [iLike]="data.iLike"></like>
   </div>
 </div>
</div>    
   `,
   styles: [`
       .handle {
           color: #ccc;
       }
       
       .media {
           margin-bottom: 20px;
       }
       
       .media-object {
           border-radius: 10px;
       }
   `],
   directives: [LikeComponent]
})
export class TweetComponent {
   constructor(){
       console.log(this.data);
   }
   @Input() data;
}

tweets.component.ts

import {Component} from '@angular/core';

import {TweetService} from './tweet.service';

import {TweetComponent} from './tweet.component';

@Component({

   selector: 'tweets',

   template: `

       <div *ngFor="#tweet of tweets">

           <tweet [data]="tweet"></tweet>

       </div>

   `,

   providers: [TweetService],

   directives: [TweetComponent]

})

export class TweetsComponent {

   tweets: any[];

   constructor(tweetService: TweetService) {

       this.tweets = tweetService.getTweets();

   }

}

tweet.service.ts

export class TweetService {

   getTweets() {

       return [

       {

           imageUrl: "http://lorempixel.com/100/100/people?1",

           author: "Windward",

           handle: "@windwardstudios",

           body: "Looking for a better company reporting or docgen app?",

           totalLikes: 0,

           iLike: false

       },

       {

           imageUrl: "http://lorempixel.com/100/100/people?2",

           author: "AngularJS News",

           handle: "@angularjs_news",

           body: "Right Relevance : Influencers, Articles and Conversations ",

           totalLikes: 5,

           iLike: true

       },

       {

           imageUrl: "http://lorempixel.com/100/100/people?3",

           author: "UX & Bootstrap",

           handle: "@3rdwave",

           body: "10 Reasons Why Web Projects Fail ",

           totalLikes: 1,

           iLike: true

       }];

   }

}

app.component.ts

import { Component } from '@angular/core';

import {TweetsComponent} from './tweets.component'

@Component({

 moduleId: module.id,

 selector: 'app-root',

 template: `

       <h1>Tweets</h1> <tweets></tweets>

   `,

   directives: [TweetsComponent]   

})

export class AppComponent {

}