import {AfterViewInit, Component, ElementRef} from '@angular/core'; import {Subscription} from 'rxjs/Subscription'; import {IOption} from 'ng-select'; declare var hljs: any; import {OptionService} from '../../services/option.service'; @Component({ selector: 'option-template', templateUrl: 'option-template.component.html', styleUrls: ['option-template.component.scss'] }) export class OptionTemplate implements AfterViewInit { countries: Array = this.optionService.getCountries(); selectedCountry: string = 'NL'; selectedCountries: Array = ['BE', 'LU', 'NL']; markedCharacters: Array = this.optionService.getCharactersWithMarked(); constructor( private elementRef: ElementRef, private optionService: OptionService ) {} ngAfterViewInit() { hljs.initHighlighting(); let nodes: NodeList = this.elementRef .nativeElement .querySelectorAll('.typescript, .html, .css'); for (let i = 0; i < nodes.length; i++) { hljs.highlightBlock(nodes[i]); } } html0: string = `

<div>Selected option: {{selectedCountry}}</div>
<ng-select
    placeholder="Select a country"
    [options]="countries"
    [allowClear]="true"
    [(ngModel)]="selectedCountry">
    <ng-template
        #optionTemplate
        let-option="option">
        <div class="famfamfam-flags {{option?.value.toLowerCase()}}"></div>
        {{option?.label}}
    </ng-template>
</ng-select>

`; ts0: string = `

export class OptionTemplateExample {

    countries: Array<IOption> = this.optionService.getCountries();
    selectedCountry: string = 'NL';

    constructor(
        private optionService: OptionService
    ) {}
}

`; html1: string = `

<div>Selected options: {{selectedCountries}}</div>
<ng-select
    placeholder="Select countries"
    [options]="countries"
    [multiple]="true"
    [allowClear]="true"
    [(ngModel)]="selectedCountries">
    <ng-template
        #optionTemplate
        let-option="option">
        <div class="famfamfam-flags {{option?.value.toLowerCase()}}"></div>
        {{option?.label}}
    </ng-template>
</ng-select>

`; ts1: string = `

export class OptionTemplateExample {

    countries: Array<IOption> = this.optionService.getCountries();
    selectedCountries: Array<string> = ['BE', 'LU', 'NL'];

    constructor(
        private optionService: OptionService
    ) {}
}

`; css: string = `

.famfamfam-flags {
    display: inline-block;
    margin-right: 6px;
    width: 16px;
}

`; ts2: string = `

export class OptionTemplateExample {

    markedCharacters: Array<any> = this.optionService.getCharacters();

    constructor(
        private optionService: OptionService
    ) {
        this.markedCharacters[0].marked = true;
        this.markedCharacters[1].marked = false;
        this.markedCharacters[2].marked = true;
        this.markedCharacters[3].marked = true;
        this.markedCharacters[4].marked = false;
    }
}

`; html2: string = `

<ng-select
    [options]="markedCharacters">
    <ng-template
        #optionTemplate
        let-option="option">
        <span>{{option?.label}}</span><span *ngIf="option.marked"> *</span>
    </ng-template>
</ng-select>

`; }