ngx-chips (ng2) tag input component custom theme n

Question

I have not foiund another question that has been answered already. I have looked at the description page of this already and followed the directives there.

So in my Scss folder where I actually define custom bootstrap I created a new tag-input theme and imported its core style in it

@import "../../../../node_modules/ng2-tag-input/dist/modules/core/styles/core/_core.scss";

I also add my theme name in the component like this.

    @Component({
selector: 'tags',
moduleId: module.id,
template: `
            <tag-input [(ngModel)]="tags"
                       (onSelect)="onSelectedTag($event)"
                       [theme]="'ark-tag-theme'"
                       [placeholder]="placeHolderKey | translate"
                       [secondaryPlaceholder]="placeHolderKey | translate"
                       [inputClass]="'input-of-tag-area-class'"
                       (onAdd)="onTagAdded($event)"
                       [addOnBlur]='true'
                       [editable]='true'
                       (onRemove)="onTagRemoved($event)"
                       (onTagEdited)="onTagEdited($event)"
                       [focusFirstElement]="true"
                       [trimTags]="true"
                       [errorMessages]="errorMessages"
                       [validators]="validators"
                       [separatorKeyCodes]="[32,188]"
                       [ngModelOptions]="{ standalone: false }" #input>
            </tag-input>
        `
    })

This is my scss file altogether

    @import "../../../../node_modules/ng2-tag-input/dist/modules/core/styles/core/_core.scss";

    $ark-theme:(

    background-color: theme-color("secondary")
    );

    $ark-tag-theme: (
    background: theme-color("secondary"),
    background-focused: theme-color("secondary"),
    background-active: theme-color("secondary"),
    background-hover: theme-color("secondary"),
    color: #fff,
    color-hover: #fff,
    border-radius: 2px
    );

    ::ng-deep .ng2-tag-input.ark-tag-theme{
     @include tag-theme($ark-theme);
    }

    ::ng-deep .ng2-tag-input.ark-tag-theme tag{
     @include tag-theme($ark-tag-theme);
    }

Here is also my custom bootstrap set up

@import '../../../../node_modules/angular2-toaster/toaster';
// Core variables and mixins
@import "../../../../node_modules/bootstrap/scss/functions";

@import "variables-ark";
@import "../../../../node_modules/bootstrap/scss/bootstrap";

// Reset and dependencies

@import "glyphicons";
@import "ark-tag-theme";
@import "app";
@import "theme";

Ok I get the new ark-tag-theme class at the initial div of the component but everything else still reads the setup bootstrap3 and none of my classes are read for tags. I also used /deep/ instead of ng-deep but same result. Since input component is in node_modules I am sure I should not do anything there anyway because it is always overwritten.

WI tried in firefox also as I heard things about chrome not respecting ng-deep. SO how can I get my classes read for input tags?

Answer 1

By some obscure reason in the way Angular loads the components, default theme's styles override the custom theme styles (for instance, .ng2-tag-input[_ngcontent-c1] wins over .ng2-tag-input.ark-theme).

The easiest way to make it works is to locate all the custom theme code in a local styles of components.

As a workaround, library consumers can make their theme CSS slightly more specific this way:

tag-input .ng2-tag-input.ark-theme 

This will be more specific than the built-in component rule and should work.

Answer 2

Ok, I managed to do this, my mistake was not referring to the scss file from the component and putting it as part of bootstrap sass chain and load it with the app cli. So I took ark-theme.scss file from bootstrap. Put it inside the common component folder the tag input component is. And loading it from inside the component just as any css file for the component encapsulation.

I am also importing not just ngx-chips core but once again the function and custom variables, or bootstrap variables file too.

@import "~ngx-chips/dist/modules/core/styles/core/core";
@import "~bootstrap/scss/functions";
@import "~assets/sass/_variables-ark.scss";

$ark-theme:(
    background-color: theme-color("secondary")!important
);

$ark-tag-theme: (
background: theme-color("secondary"),
background-focused: theme-color("secondary"),
background-active: theme-color("secondary"),
background-hover: theme-color("secondary"),
color: #fff,
color-hover: #fff,
border-radius: 2px
);

:host ::ng-deep .ng2-tag-input.ark-tag-theme{
 @include tag-theme($ark-theme);
}

:host ::ng-deep .ng2-tag-input.ark-tag-theme tag{
 @include tag-theme($ark-tag-theme);
}

And that's it. no need to increase specificity. This way I can use my own variables and functions while defining the theme. Plus I have a copy of this component for email add/remove functionality, so I can actually reuse the scss file.