How to use Custom style component for tags background color in ng2-tag-input?

Question

How can I add background color to tags in ng2-tag-input plugin,I searched it ,they said that we need to use custom component for styles,I added but getting trigger is not found,i am using this https://github.com/Gbuomprisco/ng2-tag-input website.can any one help me?

video.component.ts file

import { Component, forwardRef } from '@angular/core';
import { TagInputComponent } from 'ng2-tag-input';
import { NG_VALUE_ACCESSOR } from '@angular/forms';

@Component({
     selector: 'custom-tag-input', 
    providers: [{
        provide: NG_VALUE_ACCESSOR,
        useExisting: forwardRef(() => videoComponent ),
        multi: true
    }],
    template:`<tag-input [ngModel]="['Typescript', 'Angular 2']"></tag-input>`,
    styleUrls: [],
     animations: [
        trigger('flyInOut', [
            state('in', style({transform: 'translateX(0)'})),
            transition(':enter', [
                animate(200, keyframes([
                    style({opacity: 0, offset: 0}),
                    style({opacity: 0.5, offset: 0.3}),
                    style({opacity: 1, offset: 1.0})
                ]))
            ]),
            transition(':leave', [
                animate(150, keyframes([
                    style({opacity: 1, transform: 'translateX(0)', offset: 0}),
                    style({opacity: 1, transform: 'translateX(-15px)', offset: 0.7}),
                    style({opacity: 0, transform: 'translateX(100%)', offset: 1.0})
                ]))
            ])
        ])
    ]

})
export class videoComponent extends TagInputComponent{

     constructor(){ }

      public options = {
         readonly: undefined,
        placeholder: 'Add a tag'
    };

    public onAdd(item) {
        console.log(item + ' added');
    }

    public onRemove(item) {
        console.log(item + ' removed');
    }

    public onSelect(item) {
        console.log(item + ' selected');
    }

    public onFocus(item) {
        console.log('input focused: current value is ' + item);
    }

    public onBlur(item) {
        console.log('input blurred: current value is ' + item);
    }

    public transform(item: string): string {
        return `@${item}`;
    }

    private startsWithAt(control: FormControl) {
        if (control.value.charAt(0) !== '@') {
            return {
                'startsWithAt@': true
            };
        }
        return null;
    }
    private endsWith$(control: FormControl) {
        if (control.value.charAt(control.value.length - 1) !== '$') {
            return {
                'endsWith$': true
            };
        }
        return null;
    }
    public validators = [this.startsWithAt, this.endsWith$];
    public errorMessages = {
        'startsWithAt@': 'Your items need to start with "@"',
        'endsWith$': 'Your items need to end with "$"'
    };


}

app.module.ts file

import { TagInputModule } from 'ng2-tag-input';
import { videoComponent } from './videos/video.component'; 


@NgModule({
    imports: [
        BrowserModule,
        CommonModule,
        FormsModule,

        TagInputModule, 
    ],
    declarations: [ Home, videoComponent ], // we need this here
    bootstrap: [ Home ], // this is just an example
    entryComponents: [ Home ] // this is just an example
})
export class AppModule {}
platformBrowserDynamic().bootstrapModule(AppModule);

Answer 1

You need to overwrite tag-input component's style by using parent component's styling. You need to use /deep/ keyword which will tell Angular to make children inherit specified part of CSS. Sometimes you may need to use !important keyword to make sure that values are going to be overwritten.

You need to find corresponding css classes in component whose styling you want to modify.

Example:

/deep/ .example-style-which-can-be-used-by-children {
    background-color: red !important;
}

Look into scss of tag-input here and create corresponding classes in parent's style.