tweet-list.component.html (2399B)
1 <spinner spinner="spinner"></spinner> 2 <div class="gridTweetList"> 3 <mat-card *ngFor="let item of data" style="max-width: 350px;"> 4 <div class="ribbon ribbon-top-right" *ngIf="item.retweet" style="max-width: 22rem"> 5 <span> 6 <i class="fa fa-retweet"></i> 7 </span> 8 </div> 9 <mat-card-header> 10 <img src="https://twitter.com/{{item.username}}/profile_image" mat-card-avatar> 11 <mat-card-title><a rel="noopener noreferrer" target="_blank" href="{{item.userprofile_link}}">{{item.display_name}}</a></mat-card-title> 12 <mat-card-subtitle *ngIf="!item.retweetby_display_name"><i class="fa fa-clock-o"> </i>{{item.created_at.toLocaleString()}}</mat-card-subtitle> 13 <mat-card-subtitle *ngIf="item.retweetby_display_name"><i class="fa fa-clock-o"> </i>{{item.created_at.toLocaleString()}} -- Retweeted by: <a rel="noopener noreferrer" target="_blank" href="{{item.retweetby_userprofile_link}}">{{item.retweetby_display_name}}</a></mat-card-subtitle> 14 </mat-card-header> 15 <a (click)="lightbox.show(lightboxItem)" > 16 <img mat-card-image *ngIf="item.image_urls && item.image_urls[0]" [src]="item.image_urls[0]"> 17 </a> 18 19 <!-- lightbox container hidden with CSS --> 20 <a (click)="lightbox.hide(lightboxItem)" class="lightbox" #lightboxItem> 21 <div class="img-wrapper"> 22 <img *ngIf="item.image_urls && item.image_urls[0]" [src]="item.image_urls[0]"> 23 </div> 24 </a> 25 <mat-card-content> 26 <div [innerHTML]="item.text | linkify"></div> 27 <br> 28 <i class="fa fa-heart"> </i>{{item.favorites.toLocaleString()}} <i class="fa fa-retweet"> </i>{{item.retweets.toLocaleString()}} 29 </mat-card-content> 30 <mat-card-actions> 31 <a mat-button href="{{item.tweet_link}}" rel="noopener noreferrer" target="_blank">OPEN ON TWITTER</a> 32 </mat-card-actions> 33 </mat-card> 34 <!--<ng-container *ngFor="let item of data"> 35 <app-card *ngIf="item.image_urls" [title]="item.display_name" [image]="item.image_urls[0]" [text]="item.text" [retweet]="item.retweet" [retweets]="item.retweets" [created_at]="item.created_at" [favs]="item.favorites"></app-card> 36 <app-card *ngIf="!item.image_urls" [title]="item.display_name" [text]="item.text" [retweet]="item.retweet" [retweets]="item.retweets" [created_at]="item.created_at" [favs]="item.favorites"></app-card> 37 </ng-container>--> 38 </div>