### File

`projects/commons/src/lib/elements/badge/directives/badge.directive.ts`

### Implements

`AfterViewInit`

### Metadata

Selector | `[cmnBadge]`

### Index

###### Methods
Private addCustomClasses Public ngAfterViewInit
###### Inputs
cmnBadge color position

### Constructor

`constructor(el: ElementRef)`
Defined in projects/commons/src/lib/elements/badge/directives/badge.directive.ts:12
Parameters :
Name | Type | Optional
el | `ElementRef` | No

### Inputs

cmnBadge
Type : `string`
Defined in projects/commons/src/lib/elements/badge/directives/badge.directive.ts:11

color
Type : `BadgeColor`
Defined in projects/commons/src/lib/elements/badge/directives/badge.directive.ts:10

position
Type : `BadgePosition`
Defined in projects/commons/src/lib/elements/badge/directives/badge.directive.ts:12

### Methods

Private addCustomClasses
`addCustomClasses()`
Defined in projects/commons/src/lib/elements/badge/directives/badge.directive.ts:25
Returns : `void`

Public ngAfterViewInit
`ngAfterViewInit()`
Defined in projects/commons/src/lib/elements/badge/directives/badge.directive.ts:16
Returns : `void`

    import { AfterViewInit, Directive, ElementRef, Input, } from '@angular/core';

    import { BadgeColor, BadgePosition } from '../enums';

    @Directive({
        selector: '[cmnBadge]',
    })

    export class BadgeDirective implements AfterViewInit {
        @Input() public readonly color: BadgeColor;
        @Input('cmnBadge') public readonly data: string;
        @Input() public readonly position: BadgePosition;

        constructor(private readonly el: ElementRef) {}

        public ngAfterViewInit(): void {
            if (this.data) {
                this.el.nativeElement.classList.add('has-badge-rounded');
                this.el.nativeElement.setAttribute('data-badge', this.data);

                this.addCustomClasses();
            }
        }

        private addCustomClasses() {
            if (this.position) {
                this.el.nativeElement.classList.add(`has-badge-${ this.position }`);
            }

            if (this.color) {
                this.el.nativeElement.classList.add(`has-badge-${ this.color }`);
            }
        }
    }

# result-matching ""

# No results matching ""