## Custom Template(in beta):
### Variables can be used in template
1. id: return id as number
2. option: return option text. return string
3. isSelected: determine if item is selected or not. returns boolean
Template for each item
```
 Tom Saleeba 💻 |
 Simon Pinfold 💻 |
 Sushil Suthar 💻 |
 Sachin Grover 💻 |
 Mike Roberts 💻 |
 David Sosa 💻 |
 Sergiy Gedeon 💻 |
** if you are using version below 0.2.11, you need to get it from https://github.com/NileshPatel17/ng-multiselect-dropdown/themes/ng-multiselet-dropdown.theme.css
#### Step 2:
1. paste this file in your project wherever you want. Include this file `ng-multiselet-dropdown.theme.css` in `angular-cli.json` (for versions below angular 6) and `angular.json` (for version 6 or more). file name can be anything.
#### Step 3:
1. Change $base-color in 'ng-multiselect-dropdown.theme.scss'
### You can also checkout [sample code](https://codesandbox.io/s/custom-theme-p1556), i created in codesandbox.
================================================
FILE: e2e/app.e2e-spec.ts
================================================
import { NgTest2Page } from './app.po';
describe('ng-test2 App', () => {
let page: NgTest2Page;
beforeEach(() => {
page = new NgTest2Page();
});
it('should display welcome message', () => {
page.navigateTo();
expect(page.getParagraphText()).toEqual('Welcome to app!');
});
});
================================================
FILE: e2e/app.po.ts
================================================
import { browser, by, element } from 'protractor';
export class NgTest2Page {
navigateTo() {
return browser.get('/');
}
getParagraphText() {
return element(by.css('app-root h1')).getText();
}
}
================================================
FILE: e2e/tsconfig.e2e.json
================================================
{
"extends": "../tsconfig.json",
"compilerOptions": {
"outDir": "../out-tsc/e2e",
"baseUrl": "./",
"module": "commonjs",
"target": "es5",
"types": [
"jasmine",
"jasminewd2",
"node"
]
}
}
================================================
FILE: jest.config.js
================================================
const jestConfig = {
"preset": "jest-preset-angular",
"setupFilesAfterEnv": [
"Select Multiple Cities
Option
Settings
{{dropdownSettings | json}}
Select a single city
Option
Settings
{{dropdownSettings | json}}
`,
encapsulation: ViewEncapsulation.None,
styles: [
`
pre{
padding: 0;
margin: 0;
}
code{
margin: 0;
padding-top: 0;
}
/*
Monokai Sublime style. Derived from Monokai by noformnocontent http://nn.mit-license.org/
*/
.hljs {
display: block;
overflow-x: auto;
padding: 0.5em;
background: #23241f;
}
.hljs,
.hljs-tag,
.hljs-subst {
color: #f8f8f2;
}
.hljs-strong,
.hljs-emphasis {
color: #a8a8a2;
}
.hljs-bullet,
.hljs-quote,
.hljs-number,
.hljs-regexp,
.hljs-literal,
.hljs-link {
color: #ae81ff;
}
.hljs-code,
.hljs-title,
.hljs-section,
.hljs-selector-class {
color: #a6e22e;
}
.hljs-strong {
font-weight: bold;
}
.hljs-emphasis {
font-style: italic;
}
.hljs-keyword,
.hljs-selector-tag,
.hljs-name,
.hljs-attr {
color: #f92672;
}
.hljs-symbol,
.hljs-attribute {
color: #66d9ef;
}
.hljs-params,
.hljs-class .hljs-title {
color: #f8f8f2;
}
.hljs-string,
.hljs-type,
.hljs-built_in,
.hljs-builtin-name,
.hljs-selector-id,
.hljs-selector-attr,
.hljs-selector-pseudo,
.hljs-addition,
.hljs-variable,
.hljs-template-variable {
color: #e6db74;
}
.hljs-comment,
.hljs-deletion,
.hljs-meta {
color: #75715e;
}
`
]
})
export class CodeViewerComponent implements OnInit, OnChanges, AfterViewChecked {
@Input() useBr: boolean;
@Input() code: string;
@Input() language: string;
@ViewChild('codeView') codeView: ElementRef;
private needUpdate: boolean;
constructor(private elementRef: ElementRef) {}
ngOnInit() {
if (this.useBr) {
hljs.configure({ useBR: true });
}
}
ngOnChanges(changes: SimpleChanges) {
if (changes['code'] && changes['code'].currentValue) {
this.needUpdate = true;
}
}
ngAfterViewChecked() {
if (!this.needUpdate) {
return;
}
this.needUpdate = false;
if (this.codeView.nativeElement.innerHTML) {
hljs.highlightBlock(this.codeView.nativeElement);
}
}
}
================================================
FILE: src/environments/environment.prod.ts
================================================
export const environment = {
production: true
};
================================================
FILE: src/environments/environment.ts
================================================
// The file contents for the current environment will overwrite these during build.
// The build system defaults to the dev environment which uses `environment.ts`, but if you do
// `ng build --env=prod` then `environment.prod.ts` will be used instead.
// The list of which env maps to which file can be found in `.angular-cli.json`.
export const environment = {
production: false
};
================================================
FILE: src/index.html
================================================
LOADING..
{{_placeholder}}
{{item.text}}
x
+{{itemShowRemaining()}}
-
{{!isAllItemsSelected() ? _settings.selectAllText : _settings.unSelectAllText}}
-
{{item.text}}
-
{{_settings.noFilteredDataAvailablePlaceholderText}}
-
{{_settings.noDataAvailablePlaceholderText}}