src/app/search-ui/search-result/search-result.component.ts
| selector | app-search-result |
| styleUrls | search-result.component.css |
| templateUrl | ./search-result.component.html |
Methods |
Inputs |
constructor()
|
entries
|
Type: |
| entryName | ||||||||
entryName(entry: Application)
|
||||||||
|
Use the entry (appliation) name as a unique key for the trackBy function.
Parameters :
Returns :
any
|
| ngOnInit |
ngOnInit()
|
|
Returns :
void
|
import { Application } from './../search.service';
import { Component, OnInit, Input } from '@angular/core';
@Component({
selector: 'app-search-result',
templateUrl: './search-result.component.html',
styleUrls: ['./search-result.component.css']
})
export class SearchResultComponent implements OnInit {
@Input() entries: Application[];
constructor() {}
ngOnInit() {}
/**
* Use the entry (appliation) name as a unique key for the trackBy function.
* @param entry The current entry to use as a filter.
*/
entryName(entry: Application) {
return entry && entry.name;
}
}
<!-- TODO: alternative view
<mat-grid-list cols="2" rowHeight="2:1">
<mat-grid-tile *ngFor="let entry of (entries$ | async)">
<a href="{{ entry.link }}">
<img [src]="entry.image" [alt]="entry.name">
<h6>{{ entry.name }}</h6>
<span>
stars {{rating}}
</span>
<span>
price {{price}}
</span>
</a>
</mat-grid-tile>
</mat-grid-list> -->
<mat-nav-list>
<a mat-list-item target="__blank" href="{{entry.link}}" *ngFor="let entry of entries; trackBy: entryName">
<img class="mat-nav-list_application-logo" matListAvatar [src]="entry.image" [alt]="entry.name">
<h3 matLine [innerHTML]="entry._highlightResult.name.value"></h3>
<h6 class="mat-nav-list_application-category" matLine>{{ entry.category }}</h6>
<p matLine>
<span appRating [rating]="entry.rating"></span>
</p>
<mat-chip-list class="mat-nav-list_application-price">
<mat-chip aria-orientation="horizonta" [selected]="entry.price !== 0">{{entry.price | currency:'$' | freePriceLabel:'$':'free' }}</mat-chip>
</mat-chip-list>
</a>
</mat-nav-list>