File
Metadata
| selector |
cmn-tag |
| styleUrls |
./tag.component.scss |
| templateUrl |
./tag.component.html |
|
background
|
Type : Colors
|
Default value : colorsEnum.light
|
|
|
import { Component, Input } from '@angular/core';
import { Colors, colorsEnum } from '../../../shared/enums';
@Component({
selector: 'cmn-tag',
templateUrl: './tag.component.html',
styleUrls: [ './tag.component.scss' ],
})
export class TagComponent {
@Input() public readonly label: string;
@Input() public readonly color: Colors;
@Input() public readonly category: string;
@Input() public readonly background: Colors = colorsEnum.light;
}
<ng-container *ngIf="category; then tags else tag"></ng-container>
<ng-template #tags>
<div class="tags has-addons">
<span class="tag {{ background }}">
{{ category }}
</span>
<span class="tag {{ color || background }}">
{{ label }}
</span>
</div>
</ng-template>
<ng-template #tag>
<span class="tag {{ color || background }}}">
{{ label }}
</span>
</ng-template>
Legend
Html element with directive