File
Implements
Metadata
| selector |
mat-contact-menu |
| styleUrls |
./mat-contact-menu.component.scss |
| templateUrl |
./mat-contact-menu.component.html |
Index
Properties
|
|
|
Methods
|
|
|
Outputs
|
|
|
Methods
|
onSelectedFiltersChange
|
onSelectedFiltersChange($event: MatSelectionListChange)
|
|
|
Parameters :
| Name |
Type |
Optional |
| $event |
MatSelectionListChange
|
No
|
|
|
onSelectedOptionsChange
|
onSelectedOptionsChange(values: Filter[])
|
|
|
|
|
|
filters
|
Default value : Filter
|
|
|
import {Component, EventEmitter, OnInit, Output} from '@angular/core';
import {Filter} from '../../../enums';
import {MatSelectionListChange} from '@angular/material';
@Component({
selector: 'mat-contact-menu',
templateUrl: './mat-contact-menu.component.html',
styleUrls: ['./mat-contact-menu.component.scss']
})
export class MatContactMenuComponent implements OnInit {
@Output()
onFilterChanged: EventEmitter<Filter> = new EventEmitter<Filter>();
filters = Filter;
selectedFilters: Filter[];
constructor() {
}
ngOnInit() {
}
onSelectedFiltersChange($event: MatSelectionListChange) {
console.log('onSelectedFiltersChange', $event);
}
onSelectedOptionsChange(values: Filter[]) {
this.selectedFilters = values;
console.log('onSelectedOptionsChange', values);
}
// setFilter(filter: Filter) {
// console.log('on changed filter: ', filter);
// this.selectedFilter = filter;
// this.onFilterChanged.emit(filter);
// }
}
<mat-card class="menu-card mat-elevation-z4">
<!--<mat-card-header fxLayoutAlign="center">-->
<!--<avatar style="width: 60px;height: 60px"-->
<!--[email]="'Your Email'"-->
<!--[name]="'Your Name'"-->
<!--[displayType]="'circle'">-->
<!--</avatar>-->
<!--</mat-card-header>-->
<mat-card-content>
<mat-selection-list #selectionFilter
[ngModel]="selectedFilters"
(ngModelChange)="onSelectedOptionsChange($event)"
(selectionChange)="onSelectedFiltersChange($event)">
<mat-list-option #all [value]="filters.ALL"
(click)="all.selected ? selectionFilter.selectAll() : selectionFilter.deselectAll()">
<div fxLayout="row">
<mat-icon [color]="all.selected ? 'accent':''">done_all</mat-icon>
<span class="menu-item"> All contacts</span>
</div>
</mat-list-option>
<mat-list-option #private [value]="filters.PRIVATE">
<div fxLayout="row">
<mat-icon [color]="private.selected ? 'accent':''">lock</mat-icon>
<span class="menu-item"> Private contacts</span>
</div>
</mat-list-option>
<mat-list-option #shared [value]="filters.SHARED">
<div fxLayout="row">
<mat-icon [color]="shared.selected ? 'accent':''">shared</mat-icon>
<span class="menu-item">Shared contacts</span>
</div>
</mat-list-option>
<mat-list-option #recently [value]="filters.RECENTLY">
<div fxLayout="row">
<mat-icon [color]="recently.selected ? 'accent':''">history</mat-icon>
<span class="menu-item">Recently contacted</span>
</div>
</mat-list-option>
</mat-selection-list>
</mat-card-content>
</mat-card>
:host{
transition: display 5s ease-out;
}
.menu-card {
padding: 0;
}
.menu-item {
padding: 0 10px 0 10px;
}
.mat-nav-list a.active {
background: blue;
}
.mat-list-item {
//background: red
}
Legend
Html element with directive