File
|
enableTooltip
|
Type : boolean
|
Default value : false
|
|
|
|
menuOptions
|
Type : string[]
|
|
|
|
selectedItems
|
Type : string[]
|
Default value : []
|
|
|
|
tooltips
|
Type : string[]
|
Default value : []
|
|
|
Outputs
|
selectionChange
|
Type : EventEmitter
|
|
|
Any time a button is clicked, event is emitted.
|
Methods
|
isItemSelected
|
isItemSelected(item: string)
|
|
|
Parameters :
| Name |
Type |
Optional |
| item |
string
|
No
|
|
|
toggleSelection
|
toggleSelection(value: string)
|
|
|
Parameters :
| Name |
Type |
Optional |
| value |
string
|
No
|
|
import { ChangeDetectionStrategy, Component, EventEmitter, Input, Output } from '@angular/core';
@Component({
selector: 'ccf-button-toggle',
templateUrl: './button-toggle.component.html',
styleUrls: ['./button-toggle.component.scss'],
changeDetection: ChangeDetectionStrategy.OnPush,
})
export class ButtonToggleComponent {
@Input() menuOptions!: string[];
@Input() selectedItems?: string[] = [];
@Input() enableTooltip = false;
@Input() tooltips: string[] = [];
/**
* Any time a button is clicked, event is emitted.
*/
@Output() readonly selectionChange = new EventEmitter<string[]>();
isItemSelected(item: string) {
return this.selectedItems?.includes(item);
}
toggleSelection(value: string): void {
if (this.isItemSelected(value)) {
this.selectedItems = this.selectedItems?.filter((el) => el !== value);
} else {
this.selectedItems?.push(value);
}
this.selectionChange.emit(this.selectedItems);
}
}
<mat-button-toggle-group class="toggleGroup" name="menuOptions" aria-label="menuOptions" multiple appearance="standard">
<mat-button-toggle
[class.button-selected]="isItemSelected(item)"
*ngFor="let item of menuOptions; let i = index"
[value]="item"
(change)="toggleSelection($event.value)"
>
<div class="tooltip-content-container" [matTooltip]="tooltips[i]" [matTooltipDisabled]="!enableTooltip">
<mat-icon [class.hidden]="!isItemSelected(item)">done</mat-icon>
<span> {{ item }}</span>
</div>
</mat-button-toggle>
</mat-button-toggle-group>
:host {
font-weight: 400;
font-size: 0.875rem;
.hidden {
display: none;
}
mat-button-toggle {
text-align: center;
width: inherit;
line-height: 0px;
border-right: 1px solid #757575;
.tooltip-content-container {
cursor: pointer;
display: flex;
align-items: center;
gap: 0.5rem;
}
}
.toggleGroup {
border-radius: 35px;
border: 1px solid #757575;
width: 100%;
overflow-x: auto;
mat-button-toggle:last-child {
border-right: 0;
}
}
::ng-deep .mat-button-toggle-label-content {
display: flex;
height: 2rem;
justify-content: center;
padding: 0 !important;
}
}
Legend
Html element with directive