nm-icon
src/app/shared/widgets/imarket/icon-component/icon.component.ts
| selector | nm-icon |
| styleUrls | icon.component.scss |
| templateUrl | ./icon.component.html |
Widget inputs |
Widget outputs |
Inputs |
Outputs |
constructor()
|
data
|
Type: |
flagIcons
|
Type:
Default value: |
selectedIcon
|
$event type: EventEmitter
|
import { Component, EventEmitter, Input, Output } from "@angular/core";
@Component({
selector: "nm-icon",
templateUrl: './icon.component.html',
styleUrls: ['./icon.component.scss']
})
export class IconComponent {
@Input() public data: any;
@Input() public flagIcons: boolean = false;
@Output() public selectedIcon = new EventEmitter<any>();
constructor() {
}
}
<div *ngIf="data" class="nm-icon">
<ng-container *ngIf="flagIcons; else normalIcons">
<span *ngFor="let flagIcon of data.flagIcons" matTooltip="{{flagIcon.name | translate}}"
class="flag-icon nm-icon__flag" [ngClass]="'flag-icon-' + flagIcon.country"
(click)="selectedIcon.emit({event: flagIcon, payload: data})"></span>
</ng-container>
<ng-template #normalIcons>
<span *ngFor="let icon of data.icons">
<button mat-icon-button color="primary" [class.--normal-icon]="!icon.clickable" (click)="selectedIcon.emit(icon)">
<mat-icon *ngIf="icon.isSvg; else noSvg" matTooltip="{{icon.tooltip | translate}}"
[svgIcon]="icon.iconName">
</mat-icon>
<ng-template #noSvg>
<mat-icon matTooltip="{{icon.tooltip | translate}}" >
{{icon.iconName}}
</mat-icon>
</ng-template>
</button>
</span>
</ng-template>
</div>