libs/video-stat-dashboard/src/top-list/top-list-display.component.ts
| selector | top-list-display |
| styleUrls | top-list-display.component.css |
| templateUrl | ./top-list-display.component.html |
Methods |
Inputs |
Outputs |
currentSelectionID
|
Type: |
topList
|
Type: |
setCurrentVideo
|
$event type: EventEmitter
|
| selectVideo | ||||||
selectVideo(id: string)
|
||||||
|
Parameters :
Returns :
void
|
import { Component, Input, Output, EventEmitter } from '@angular/core';
import { Video } from '../+state/video-stats.interfaces';
@Component({
selector: 'top-list-display',
templateUrl: './top-list-display.component.html',
styleUrls: ['./top-list-display.component.css']
})
export class TopListDisplayComponent {
@Input() topList: Video[];
@Input() currentSelectionID: string;
@Output() setCurrentVideo = new EventEmitter<string>();
selectVideo(id: string) {
this.setCurrentVideo.emit(id);
}
}
<div class="card">
<div class="card-content">
<div class="card-title">Top 5 Preview</div>
<div class="collection">
<a *ngFor="let video of topList"
class="collection-item"
(click)="selectVideo(video.id)"
[class.active]="currentSelectionID == video.id">
<div class="card horizontal">
<div class="card-image">
<img src="http://img.youtube.com/vi/{{video.id}}/0.jpg">
</div>
<div class="card-stacked">
<div class="card-content">
<p>{{video.title}}</p>
<p>{{video.author}}</p>
</div>
<div class="card-action">
<span>{{video.viewDetails.length}}</span>
</div>
</div>
</div>
</a>
</div>
</div>
</div>