import { Component } from '@angular/core' ; import { MapService } from './map.service' ; @ Component ( { selector : 'esri-layer' , template : `
    <form>
      <div class="form-group">
        <template ngFor let-legendLayer [ngForOf]="legendLayers">
          <div>
            <input
              [name]="'layer-options'"
              type="checkbox"
              [(ngModel)]="legendLayer['checked']"
              (click)="onClick(legendLayer)"/>
            <label for="legendLayer" >{{legendLayer.name}}</label>
          </div>
        </template>
      </div>
    </form>
  ` , providers : [ MapService ] } ) export class LayerComponent { constructor ( private _mapService ) { } response : any ; legendLayers = [ { 'name' : '' , 'checked' : false } ] ; init ( response ) { const initialSelection = true ; this . response = response ; response . layerInfos . forEach ( layerId => { this . legendLayers . push ( { 'name' : layerId . title , 'checked' : initialSelection } ) ; } ) ; this . handleLayerCollection ( ) ; } handleLayerCollection ( ) { this . legendLayers . splice ( 0 , 1 ) ; this . legendLayers . reverse ( ) ; } onClick ( legendLayer ) { this . _mapService . selectLayer ( this . response , legendLayer ) ; } ngOnDestroy ( ) { if ( this . response ) { this . response . destroy ( ) ; } } }