title: Multi-select dropdown in angular 2
body: <p>I need to add customize CSS to angular2-multiselect-dropdown. I referred this link: <a href="https://www.npmjs.com/package/angular2-multiselect-dropdown" rel="nofollow noreferrer">https://www.npmjs.com/package/angular2-multiselect-dropdown</a>. I added my code here. Please help me to solve this problem. Thanks in advance.</p>
  
  <p>I coded the same what they coded in the link. But not works for me.
  HTML Page:</p>
  
  <pre><code>&lt;div class="col-lg-10 col-md-10 col-sm-10 col-xs-10"&gt;
  &lt;angular2-multiselect [data]="itemList" [(ngModel)]="selectedItems" [settings]="settings" (onSelect)="onItemSelect($event)"
  (onDeSelect)="OnItemDeSelect($event)" (onSelectAll)="onSelectAll($event)" (onDeSelectAll)="onDeSelectAll($event)"&gt;
  </code></pre>
  
  <p>
  </p>
  
  <p>CSS file need to add:</p>
  
  <pre><code>.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; 
  }
  </code></pre>
  
  <p>.ts file:</p>
  
  <pre><code>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);
  }
  
  }
  </code></pre>