### File

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

### Implements

`OnInit` `AfterViewChecked` `DoCheck`

### Metadata

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

### Index

###### Properties
Private addClass Public doChecked Private Readonly tagClass
###### Methods
Public ngAfterViewChecked Public ngDoCheck Public ngOnInit Private removeTag Private setLargeSizeInTags
###### Inputs
placeholder size value
###### Outputs
onChange

### Constructor

`constructor(element: ElementRef, window)`
Defined in projects/commons/src/lib/elements/inputs/components/tags/input-tag.component.ts:30
Parameters :
Name | Type | Optional
element | `ElementRef` | No
window |  | No

### Inputs

placeholder
Type : `string`
Default value : `''`
Defined in projects/commons/src/lib/elements/inputs/components/tags/input-tag.component.ts:24

size
Type : `Sizes`
Defined in projects/commons/src/lib/elements/inputs/components/tags/input-tag.component.ts:23

value
Type : `string`
Defined in projects/commons/src/lib/elements/inputs/components/tags/input-tag.component.ts:22

### Outputs

onChange
Type : `EventEmitter<string>`
Defined in projects/commons/src/lib/elements/inputs/components/tags/input-tag.component.ts:26

### Methods

Public ngAfterViewChecked
`ngAfterViewChecked()`
Defined in projects/commons/src/lib/elements/inputs/components/tags/input-tag.component.ts:61
Returns : `void`

Public ngDoCheck
`ngDoCheck()`
Defined in projects/commons/src/lib/elements/inputs/components/tags/input-tag.component.ts:41
Returns : `void`

Public ngOnInit
`ngOnInit()`
Defined in projects/commons/src/lib/elements/inputs/components/tags/input-tag.component.ts:37
Returns : `void`

Private removeTag
`removeTag(childNodes: Node[], text: string)`
Defined in projects/commons/src/lib/elements/inputs/components/tags/input-tag.component.ts:81
Parameters :
Name | Type | Optional
childNodes | `Node[]` | No
text | `string` | No
Returns : `void`

Private setLargeSizeInTags
`setLargeSizeInTags(childNodes: Node[])`
Defined in projects/commons/src/lib/elements/inputs/components/tags/input-tag.component.ts:93
Parameters :
Name | Type | Optional
childNodes | `Node[]` | No
Returns : `void`

### Properties

Private addClass
Default value : `() => {...}`
Defined in projects/commons/src/lib/elements/inputs/components/tags/input-tag.component.ts:104

Public doChecked
Type : `boolean`
Defined in projects/commons/src/lib/elements/inputs/components/tags/input-tag.component.ts:28

Private Readonly tagClass
Type : `string`
Default value : `'padding: 0; margin-bottom: 0 !important; margin-top: 0 !important; '`
Defined in projects/commons/src/lib/elements/inputs/components/tags/input-tag.component.ts:30

    import {
        AfterViewChecked,
        Component,
        DoCheck,
        ElementRef,
        EventEmitter,
        Inject,
        Input,
        OnInit,
        Output
    } from '@angular/core';

    import { Sizes } from '../../../../shared/enums';

    @Component({
        selector: 'cmn-input-tag',
        templateUrl: './input-tag.component.html',
        styleUrls: [ './input-tag.component.scss' ],
    })

    export class InputTagComponent implements OnInit, AfterViewChecked, DoCheck {
        @Input() public value: string;
        @Input() public readonly size: Sizes;
        @Input() public readonly placeholder: string = '';

        @Output('onChange') public readonly fireChange: EventEmitter<string> = new EventEmitter<string>();

        public doChecked: boolean;

        private readonly tagClass = 'padding: 0; margin-bottom: 0 !important; margin-top: 0 !important; ';

        constructor(
            private readonly element: ElementRef,
            @Inject('window') private readonly window,
        ) {}

        public ngOnInit(): void {
            this.window.bulmaTagsinput.attach();
        }

        public ngDoCheck(): void {
            const tagInputElement = this.element.nativeElement.firstChild.childNodes[0] || {};

            this.doChecked = this.doChecked || this.value === tagInputElement.value;

            if (this.doChecked && this.value !== tagInputElement.value) {
                const elements = tagInputElement.value.split(',');

                if (elements.indexOf(elements[elements.length - 1]) < 0) {
                    this.value = tagInputElement.value;

                    this.fireChange.emit(this.value);
                } else {
                    tagInputElement.value = this.value;

                    this.removeTag(this.element.nativeElement.firstChild.childNodes[1].childNodes, elements[elements.length - 1]);
                }
            }
        }

        public ngAfterViewChecked(): void {
            const tagInputElement = this.element.nativeElement.firstChild.childNodes[1];

            if (tagInputElement) {
                this.addClass(tagInputElement, this.size);

                tagInputElement.setAttribute('style', 'margin-bottom: 0; padding: 0 14px');

                this.setLargeSizeInTags(tagInputElement.childNodes);

                this.addClass(tagInputElement.lastChild, 'input');
                this.addClass(tagInputElement.lastChild, this.size);

                tagInputElement.lastChild.setAttribute('placeholder', '');
                tagInputElement.lastChild.setAttribute('size', tagInputElement.lastChild.value.length);
                tagInputElement.lastChild.setAttribute('style', `${ this.tagClass } ` +
                    `width: ${ tagInputElement.lastChild.value.length ? 'auto' : '5px' };`);
            }
        }

        private removeTag(childNodes: Node[], text: string) {
            let count = 0;

            for (const element of childNodes) {
                if (element.childNodes[0] && element.childNodes[0].childNodes[0].textContent.trim() === text) {
                    count > 0 ? (element as any).remove() : count++;
                }
            }

            (childNodes[childNodes.length - 2].childNodes[0].childNodes[0] as any).classList.add('is-active');
        }

        private setLargeSizeInTags(childNodes: Node[]) {
            for (const element of childNodes) {
                if (element.childNodes[0]) {
                    (element.childNodes[0] as any).setAttribute('style', 'margin: .15rem 0 0 !important;');

                    this.addClass(element.childNodes[0].childNodes[0], this.size);
                    this.addClass(element.childNodes[0].childNodes[1], this.size);
                }
            }
        }

        private addClass = (element: any, clazz: string) => {
            element.classList.remove(clazz);
            element.classList.add(clazz);
        }
    }

    <div class="control">
        <input class="input {{ size }}"
               type="tags" [value]="value">
    </div>

`./input-tag.component.scss`

Legend
Html element
Component
Html element with directive

# result-matching ""

# No results matching ""