Ngx-chips: Please make custom theme tutorial more descriptive

[Celebes]

I'm submitting a ... (check one with "x")

[ ] bug report => search github for a similar issue or PR before submitting
[ ] feature request
[x] support request/question

Current behavior

I am trying to implement a custom theme, but official guide (https://github.com/Gbuomprisco/ng2-tag-input/blob/master/docs/custom-themes.md) is not descriptive enough. It doesn't say where to put theme's (.scss) file or how to make our own component aware of said file and how to use it inside component's html file. Do I have to put it inside my node_modulesng2-tag-input\dist\modules\core\styles\themes folder? Or is there other way? Do I need to modify any files in my angular-cli project to make it work? Do I need to install any additional libraries like scss support? How do I attach it to my component so that I can use it? etc.

Expected behavior

I followed all the steps in official custom theme guide, but I don't know how to use created .scss file in my angular-cli project. I'd like to be able to do that.

Minimal reproduction of the problem with instructions (if applicable)

1) Generate new angular-cli project
2) Generate new component called MyComponent
3) Add newest ng2-tag-input library into project
4) Follow official guide for custom theme, create .scss theme file inside MyComponent's folder
5) ???

What is the motivation / use case for changing the behavior? (if applicable)

I am writing here because I want to style my ng2-tag-input and I think others might want to do it too and may not be fluent with technologies like scss

What do you use to build your app? (SystemJS, Webpack, angular-cli, etc.). Please specify the version

I am using default angular-cli v1.0.0

Angular version:

^4.1.1

ng2-tag-input version:

^1.2.5

Browser: [all | Chrome XX | Firefox XX | IE XX | Safari XX | Mobile Chrome XX | Android X.X Web Browser | iOS XX Safari | iOS XX UIWebView | iOS XX WKWebView ]

Firefox 53.0.2 (32 bits)

[Gbuomprisco]

Hi @Celebes,

Check out the demo here and especially this file https://github.com/Gbuomprisco/ng2-tag-input/blob/master/demo/home/home.scss.

You do not need to put your file in node_modules, but anywhere in your project, as long as you import it in the parent component containing ng2-tag-input.

[JBrownie77]

+1, I've done it both in the component's scss file and in a separate scss file that is imported into the component's, but neither are doing the trick

[Celebes]

Here's how I did it:

1. I created a new Angular component where I used tag-input with attribute theme="custom-theme", for example:

  <tag-input [(ngModel)]="invitationEmails"
             theme="custom-theme">
  </tag-input>

2) I created new file custom-theme.scss in the same folder as my new component (ofcourse make sure your path to _core.scss in import is correct):

@import "../../../node_modules/ngx-chips/core/styles/core/_core.scss";

$custom-primary: #707070;
$custom-primary-dark: #343434;

$custom-theme: (
  container-border-bottom: none !important,
  container-border-bottom-focused: none !important
);

$custom-tag-theme: (
  background: $custom-primary,
  background-focused: $custom-primary-dark,
  background-active: $custom-primary-dark,
  background-hover: $custom-primary-dark,
  color: #fff,
  color-hover: #0FF,
  border-radius: 0px,
  font-family: 'nimbus-regular'
);

$custom-icon-theme: (
  fill: #fff,
  fill-focus: #eee,
  transition: all 0.35s
);

/deep/ .ng2-tag-input.custom-theme {
  @include tag-input-theme($custom-theme);
}

/deep/ .ng2-tag-input.custom-theme tag {
  @include tag-theme($custom-tag-theme);
}

/deep/ .ng2-tag-input.custom-theme tag delete-icon {
  @include icon-theme($custom-icon-theme);
}

/deep/ .ng2-tag-input.custom-theme .progress-bar {
  display: none !important;
}

3) In my component's typescript file I added my new theme in styleUrls attribute of @Component annotation:

@Component({
  selector: 'app-custom',
  templateUrl: './custom.component.html',
  styleUrls: ['./custom.component.css', './custom-theme.scss']
})

And that's it, should work now.

[JBrownie77]

Thanks! It turned out that :ng-deep wasn't working

[kultigin]

I know this is closed but I am still having issues with this because my variables are bootstrap variables for the colours that matches my bootstrap theme, I can not use them as they give error. How can I make the component also recognise bootstrap variables that are imported with the cli? Or do I just have to create variables in the file once again?

[kultigin]

Ok I managed to get it working. I had to refer to the scss file from the component and put it in the same folder by taking it out from the usual bootstrap scss build chain. But import all my functions and variables again for this scss only so I can use my variables and functions.

[aaron2693]

For all the guys who have issues with changing style, you can override the ngx-chips style. In my case i needed to change the width of the text-input and placeholder, so instead of creating a custom theme, you can use, in your css or scss file, the ::ng-deep special selector for an specific class. It took me 1 week or so to achieve this and to understand it completely. Im using angular 8, and ngx-chips 2.1.0

This is how i changed width and font for in the css file of my component:

.card-body {
display: inline-flex;
}

.search-img {
cursor: pointer;
position: absolute;
padding: 10px;
}

**THIS IS THE PART PREVIOUS MENTIONED

::ng-deep .ng2-tag-input__text-input {
width: 600px;
font-family: "Arial";
/display: none !important;/
}**

I hope this is help you all, cause i had to figure it out by my own, if you have any questions, please let me know.