CODEWITHSUNDEEP
sassangular6
Shaun Chua
Shaun Chua

Reputation: 713

::ng-deep angular 6 style pierce ngx-chips tag-input component

Having major trouble trying to change simple style properties of this ngx-chips tags input component.

Looked up the documentation to find out that I have to do :ng-deep to the tags to change the styling https://github.com/gbuomprisco/ngx-chips/blob/master/docs/custom-themes.md

Problem is, their suggestion did not work.

Realized that the right way to use this method is ::ng-deep, not :ng-deep. But that still did not work.

I was able to go to my browser and directly change my styling, but can't seem to do this with my scss code.

Here is my scss styling:

// apply theme to the tags
::ng-deep .ng2-tag-input.bootstrap tag {
   align-items: center !important;
   background: #63c2de !important;
}

Here are the tags associated to the ngx-chips component

      <tag-input formControlName="tags" theme="bootstrap">
        <tag-input-dropdown [autocompleteItems]="uniqueTags" [matchingFn]="matchingFn">
        </tag-input-dropdown>
      </tag-input>

Upvotes: 0

Views: 2291

Answers (1)

Sachin Shah
Sachin Shah

Reputation: 4533

As a look in you scss you have used this ...

::ng-deep .ng2-tag-input.bootstrap tag { ... }

In you code you haven't give any class. Please check that. If all the thing is right then try this also.

:host ::ng-deep .ng2-tag-input.bootstrap tag { ... }

Here you should use :host to apply your css.

Note: :host will work on that component only in which you have used :host.

Upvotes: 2

Related Questions