### File

`projects/commons/src/lib/elements/tags/components/tag.component.ts`

### Metadata

selector | `cmn-tag`
styleUrls | `./tag.component.scss`
templateUrl | `./tag.component.html`

### Index

###### Inputs
background category color label

### Inputs

background
Type : `Colors`
Default value : `colorsEnum.light`
Defined in projects/commons/src/lib/elements/tags/components/tag.component.ts:15

category
Type : `string`
Defined in projects/commons/src/lib/elements/tags/components/tag.component.ts:14

color
Type : `Colors`
Defined in projects/commons/src/lib/elements/tags/components/tag.component.ts:13

label
Type : `string`
Defined in projects/commons/src/lib/elements/tags/components/tag.component.ts:12

    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>

`./tag.component.scss`

Legend
Html element
Component
Html element with directive

# result-matching ""

# No results matching ""