File
Metadata
| selector |
filter-state-display |
| templateUrl |
./filter-state-display.component.html |
Index
Properties
|
|
|
Methods
|
|
|
Inputs
|
|
|
Outputs
|
|
|
Methods
|
removeAgeGroup
|
removeAgeGroup(group: number)
|
|
|
Parameters :
| Name |
Type |
Optional |
| group |
number
|
no
|
|
|
ageRanges
|
ageRanges:
|
Default value : ageRanges
|
|
|
import { Component, Input, Output, EventEmitter } from '@angular/core';
import { ageRanges } from '@enterprise-example/age-range';
import { ViewsFilterState } from '../+state/video-stats.interfaces';
@Component({
selector: 'filter-state-display',
templateUrl: './filter-state-display.component.html'
})
export class FilterStateDisplayComponent {
@Input() viewsFilterState: ViewsFilterState;
@Output() removeGroup = new EventEmitter<number>();
ageRanges = ageRanges;
removeAgeGroup(group: number) {
this.removeGroup.emit(group);
}
}
<div *ngIf="viewsFilterState && viewsFilterState.region">
<span>Region:</span>
<div class="chip">{{viewsFilterState.region}}</div>
<span>Date Range:
<div class="chip">{{viewsFilterState.dateFrom | date:'shortDate'}}</div>
<div class="chip">{{viewsFilterState.dateTo | date:'shortDate'}}</div>
</span>
<span>
Age Groups:
<span *ngFor="let range of ageRanges ; let index = index">
{{ index }}
<span *ngIf="viewsFilterState.ageRanges[index]" class="chip">
{{index | enumToRange}}
<i (click)="removeAgeGroup(index)" class="close material-icons">x</i>
</span>
</span>
</span>
</div>
Legend
Html element with directive