add snippets examples

demo/app/examples/bindings.component.ts

@@ -4,30 +4,36 @@ import {Component} from '@angular/core';
     selector: 'select-bindings',
     template: `
         <label>Bind to default <b>label</b>, <b>object</b> bindings</label>
+        ---html,true
         <ng-select [items]="defaultBindingsList"
                    [(ngModel)]="selectedCity2">
         </ng-select>
+        ---
         <p>
             Selected city object: {{selectedCity2 | json}}
         </p>
         <hr>
         <label>Bind label to custom property</label>
+        ---html,true
         <ng-select [items]="cities"
                    bindLabel="name"
                    placeholder="Select value"
                    [clearable]="false"
                    [(ngModel)]="selectedCity">
         </ng-select>
+        ---
         <p>
             Selected city object: {{selectedCity | json}}
         </p>
         <hr>
         <label>Bind label and model to custom properties</label>
+        ---html,true
         <ng-select [items]="cities"
                    bindLabel="name"
                    bindValue="id"
                    [(ngModel)]="selectedCityId2">
         </ng-select>
+        ---
         <p>
             Selected city ID: {{selectedCityId2 | json}}
         </p>

demo/app/examples/custom-templates.component.ts

@@ -4,30 +4,35 @@ import { Component } from '@angular/core';
     selector: 'select-with-templates',
     template: `
         <label>Custom label</label>
+        ---html,true
         <ng-select [items]="cities" [(ngModel)]="selectedCity" bindLabel="name" bindValue="name">
             <ng-template ng-label-tmp let-item="item">
                 <img height="15" width="15" [src]="item.avatar"/>
                 {{item.name}}
             </ng-template>
         </ng-select>
+        ---
         <p>
             Selected city name: {{selectedCity}}
         </p>
         <hr>
 
         <label>Custom option</label>
+        ---html,true
         <ng-select [items]="cities2" [(ngModel)]="selectedCity2" bindLabel="name" bindValue="name">
             <ng-template ng-option-tmp let-item="item" let-index="index">
                 <img height="15" width="15" [src]="item.avatar"/>
                 <b>{{item.name}}</b>
             </ng-template>
         </ng-select>
+        ---
         <p>
             Selected city name: {{selectedCity2}}
         </p>
         <hr>
 
         <label>Custom label and option</label>
+        ---html,true
         <ng-select [items]="cities3" [(ngModel)]="selectedCity3" bindLabel="name" bindValue="name">
             <ng-template ng-label-tmp let-item="item">
                 <img height="15" width="15" [src]="item.avatar"/>
@@ -38,6 +43,7 @@ import { Component } from '@angular/core';
                 <b>{{item.name}}</b>
             </ng-template>
         </ng-select>
+        ---
         <p>
             Selected city name: {{selectedCity3}}
         </p>

demo/app/examples/events.component.ts

@@ -11,6 +11,7 @@ interface AngSelectEvent {
     template: `
         <div id="s1"></div>
         <label>Open, close, focus, blur, change events</label>
+        ---html,true
         <ng-select snippet="s1"
                    [items]="cities"
                    [(ngModel)]="selectedCity"
@@ -22,6 +23,7 @@ interface AngSelectEvent {
                    (blur)="onBlur($event)"
                    (change)="onChange($event)">
         </ng-select>
+        ---
 
         <div *ngIf="events.length > 0">
             <br>

demo/app/examples/multi.component.ts

@@ -6,30 +6,35 @@ import { Observable } from 'rxjs/Observable';
 @Component({
     template: `
         <label>Select multiple elements</label>
+        ---html,true
         <ng-select
                 [items]="companies"
                 bindLabel="name"
                 [multiple]="true"
                 [(ngModel)]="selectedCompanies">
         </ng-select>
+        ---
         <p>
             Selected value: {{selectedCompanies | json}} <br>
             <button (click)="clearModel()" class="btn btn-secondary btn-sm">Clear model</button>
         </p>
         <hr/>
 
         <label>Disabled multiple elements</label>
+        ---html,true
         <ng-select
                 [items]="companies2"
                 bindLabel="name"
                 [multiple]="true"
                 [disabled]="disable"
                 [(ngModel)]="selectedCompaniesDisabled">
         </ng-select>
+        ---
         <br>
         <button class="btn btn-secondary btn-sm" (click)="disable = !disable">Toggle disabled</button>
         <hr/>
         <label>Custom label templates</label>
+        ---html,true
         <ng-select
             [items]="users"
             [multiple]="true"
@@ -46,6 +51,7 @@ import { Observable } from 'rxjs/Observable';
                 <img [src]="item.avatar_url" width="20px" height="20px"> {{item.login}}
             </ng-template>
         </ng-select>
+        ---
     `
 })
 export class SelectMultiComponent {

demo/app/examples/reactive-forms.component.ts

@@ -9,6 +9,12 @@ import { NgbModal } from '@ng-bootstrap/ng-bootstrap';
     template: `
         <form [formGroup]="heroForm" novalidate>
 
+            ---html
+            <ng-select formControlName="agree">
+                <ng-option [value]="true">Yes</ng-option>
+                <ng-option [value]="false">No</ng-option>
+            </ng-select>
+            ---
             <div class="form-row">
                 <div class="form-group col-md-6">
                     <label for="heroId">Basic select</label>
@@ -36,6 +42,7 @@ import { NgbModal } from '@ng-bootstrap/ng-bootstrap';
             
             <div class="form-group">
                 <label for="state">Multi select</label>
+                ---html,true
                 <ng-select *ngIf="isCitiesControlVisible"
                            [items]="cities"
                            bindLabel="name"
@@ -44,18 +51,21 @@ import { NgbModal } from '@ng-bootstrap/ng-bootstrap';
                            placeholder="Select cities"
                            formControlName="selectedCitiesIds">
                 </ng-select>
+                ---
                 <br>
                 <button (click)="toggleCitiesControl()" class="btn btn-sm btn-secondary">Show/Hide</button>
                 <button (click)="clearCities()" class="btn btn-sm btn-secondary">Clear</button>
             </div>
             <hr>
             <div class="form-group">
                 <label for="state">Single select</label>
+                ---html,true
                 <ng-select [items]="ages"
                            bindValue="value"
                            placeholder="Select age"
                            formControlName="age">
                 </ng-select>
+                ---
                 <br>
                 <button class="btn btn-secondary btn-sm" (click)="toggleAgeDisable()">Toggle disabled</button>
             </div>

demo/app/examples/search.component.ts

@@ -12,27 +12,32 @@ import 'rxjs/add/observable/of';
         <h5>Client side</h5>
         <hr>
         <label>Search in label text (default)</label>
+        ---html,true
         <ng-select [items]="companies"
                    bindLabel="name"
                    [(ngModel)]="selectedCompany">
         </ng-select>
+        ---
         <p>
             Selected value: {{selectedCompany | json}}
         </p>
 
         <label>Search using custom filter handler (search for Rooforia)</label>
+        ---html,true
         <ng-select [items]="filteredCompanies2"
                    bindLabel="name"
                    [typeahead]="customFilter"
                    [(ngModel)]="selectedCompany2">
         </ng-select>
+        ---
         <p>
             Selected value: {{selectedCompany2 | json}}
         </p>
 
         <h5>Server side</h5>
         <hr>
         <label>Search with autocomplete in Github accounts</label>
+        ---html,true
         <ng-select [items]="items"
                    notFoundText="No results found"
                    typeToSearchText="Search for github account"
@@ -41,12 +46,11 @@ import 'rxjs/add/observable/of';
                    [multiple]="multiple"
                    [typeahead]="typeahead"
                    [(ngModel)]="githubAccount">
-
             <ng-template ng-option-tmp let-item="item">
                 <img [src]="item.avatar_url" width="20px" height="20px"> {{item.login}}
             </ng-template>
-
         </ng-select>
+        ---
         <br>
         <button class="btn btn-secondary btn-sm" (click)="toggleMultiple()">Toggle multiple</button>
         <p>

demo/app/examples/tags.component.ts

@@ -6,23 +6,27 @@ import { Observable } from 'rxjs/Observable';
     selector: 'select-tags',
     template: `
         <label>Default tags</label>
+        ---html,true
         <ng-select [items]="companies"
                 [addTag]="true"
                 bindLabel="name"
                 [(ngModel)]="selectedCompany">
         </ng-select>
+        ---
         <p>
             Selected value: {{selectedCompany | json}}
         </p>
         <hr>
 
         <label>Custom tags</label>
+        ---html,true
         <ng-select [items]="companies"
                 [addTag]="addTag"
                 multiple="true"
                 bindLabel="name"
                 [(ngModel)]="selectedCompanyCustom">
         </ng-select>
+        ---
         <p>
             Selected value: {{selectedCompanyCustom | json}}
         </p>

package.json

@@ -62,7 +62,7 @@
     "karma-sourcemap-loader": "^0.3.7",
     "karma-webpack": "2.0.5",
     "ng-packagr": "^1.5.0-rc.0",
-    "ng-snippets-loader": "^0.2.3",
+    "ng-snippets-loader": "^0.2.4",
     "node-sass": "^4.0.0",
     "null-loader": "0.1.1",
     "postcss-loader": "^1.1.0",