0

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?

tekin
  • 145
  • 4
  • 15
  • Remove the `_` and `.scss` from the import. – Klooven Dec 11 '17 at 10:39
  • you mean from the core? let me try. – tekin Dec 11 '17 at 11:25
  • @import "../../../../node_modules/ng2-tag-input/dist/modules/core/styles/core/core"; used this but no difference I am afraid. Even tried using !important tag on the properties. – tekin Dec 11 '17 at 11:27
  • Do I need to use [StyleURls] in the component? As you can see I am bundling theme with bootstrap since I need to use my variables too so that doesn't make sense to me. – tekin Dec 14 '17 at 09:52
  • Did you get the solution ? i am having same situation. – faizan Aug 12 '18 at 08:49
  • I haven't yet. I actually didn't look at it again but did a course on Angular animations which goes into component css. So I may try again, using default theme at the moment. :ng-deep is deprectaed This is interesting from angular documentation: :host-context Sometimes it's useful to apply styles based on some condition outside of a component's view. For example, a CSS theme class could be applied to the document element, and you want to change how your component looks based on that. – tekin Aug 13 '18 at 13:51

2 Answers2

2

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.

Luis U.
  • 2,500
  • 2
  • 17
  • 15
  • I have tried this too, but it did not work for me. I think the question is where do you put the code? to be able to use my ark-theme.scss together with my bootstrap variables I need to keep them outside the component called by the CLI.json file. but my doubt is if :host ::ng-deep really working from there. – tekin Nov 30 '18 at 09:59
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.

tekin
  • 145
  • 4
  • 15