Multi-select dropdown in angular 2

Question

I need to add customize CSS to angular2-multiselect-dropdown. I referred this link: https://www.npmjs.com/package/angular2-multiselect-dropdown. I added my code here. Please help me to solve this problem. Thanks in advance.

I coded the same what they coded in the link. But not works for me. HTML Page:

<div class="col-lg-10 col-md-10 col-sm-10 col-xs-10">
<angular2-multiselect [data]="itemList" [(ngModel)]="selectedItems" [settings]="settings" (onSelect)="onItemSelect($event)"
(onDeSelect)="OnItemDeSelect($event)" (onSelectAll)="onSelectAll($event)" (onDeSelectAll)="onDeSelectAll($event)">

CSS file need to add:

.inputField {
border: 0;
outline: 0; 
background: transparent; 
border-bottom: 1px solid #7C7C81;
width: 100%;
margin-bottom: 10px; 
}
.inputField .c-token{
background: #38d574 !important;
}
.inputField .pure-checkbox label::before {
border-color: #38d574 !important;
}
.inputField .pure-checkbox input[type="checkbox"]:checked + 
label[_ngcontent-c1]:before {
background: #38d574 !important;
}

.inputField .c-btn {
border: 0 !important;
outline: 0 !important;  
background: transparent !important; 
border-bottom: 1px solid #7C7C81 !important;
width: 100% !important;
margin-bottom: 10px !important; 
}

.ts file:

import { Component, OnInit } from '@angular/core';

@Component({
selector: 'dropdown',
templateUrl: './dropdown.component.html',
styleUrls: ['./dropdown.component.css']
})
export class DropdownComponent implements OnInit {

itemList = [];
selectedItems = [];
settings = {};

constructor() { }

ngOnInit() {

this.itemList = [
 { "id": 1, "itemName": "India" },
  { "id": 2, "itemName": "Singapore" },
  { "id": 3, "itemName": "Australia" },
  { "id": 4, "itemName": "Canada" },
  { "id": 5, "itemName": "South Korea" },
  { "id": 6, "itemName": "Brazil" }
];

this.settings = {
  text: "Select Countries",
  selectAllText: 'Select All',
  unSelectAllText: 'UnSelect All',
  classes: "myclass inputField"
};
}
onItemSelect(item: any) {
console.log(item);
console.log(this.selectedItems);
}
OnItemDeSelect(item: any) {
console.log(item);
console.log(this.selectedItems);
}
onSelectAll(items: any) {
console.log(items);
}
onDeSelectAll(items: any) {
console.log(items);
}

}

Krzysztof Raciniewski Krzysztof Raciniewski · Accepted Answer · 2017-12-29T09:51:21

You should use custom class for this angular component, you are going in the right direction :)

Problem is in your styles. Custom class defined in configuration is added to angular2-multiselect component, so your styles should look like this:

.inputField {
    color: #ccc;
}
.inputField .c-token{
    background: #38d574 !important;
}
.inputField .pure-checkbox label::before {
    border-color: #38d574 !important;
}
.inputField .pure-checkbox input[type="checkbox"]:checked + 
 label[_ngcontent-c1]:before {
    background: #38d574 !important;
}

This is an example from documentation, you can see this here: https://cuppalabs.github.io/angular2-multiselect-dropdown/#/styling

If you want to change input style, write this code in scss file:

.inputField .c-btn {
    border: 0;
    outline: 0; 
    background: transparent; 
    border-bottom: 1px solid #7C7C81;
    width: 100%;
    margin-bottom: 10px; 
}

You should add your styles to global "app.css" file imported directly in HTML view. If you attach styles in your component by styleUrls you should become familiar with the hierarchical styles in Angular2 and use /deep/. So if you want to attach styles to your component, styles should have :host /deep/ selectors to override all components contains by your DropdownComponent:

:host /deep/ .inputField .c-btn {
    border: 0;
    outline: 0; 
    background: transparent; 
    border-bottom: 1px solid #7C7C81;
    width: 100%;
    margin-bottom: 10px; 
}

For fast checking use this code in your component:

styles: ['
    :host /deep/ .inputField .c-btn {
        border: 0;
        outline: 0; 
        background: transparent; 
        border-bottom: 1px solid #7C7C81;
        width: 100%;
        margin-bottom: 10px; 
    }
']

instead

styleUrls: ['./dropdown.component.css']

More about hierarchical component styles in angular you can read here: https://v2.angular.io/docs/ts/latest/guide/component-styles.html

Multi-select dropdown in angular 2

1 Answers