import { Component , ChangeDetectionStrategy , Renderer , ViewChild , ElementRef } from "@angular/core" ; import { Consts } from "../../../../src/Conts" ; import { IWeatherItem } from "./IWeather" ; import { WeatherService } from "./WeatherService" ; import { SortableHeader } from "./SortableHeader" ; import { FormGroup , Validators , FormControl , FormBuilder } from "@angular/forms" ; import { OrderBy } from "../../../pipes/OrderBy" ; import { Observable } from "rxjs/Observable" ; import 'rxjs/add/operator/distinctUntilChanged' ; import 'rxjs/add/operator/switchMap' ; import 'rxjs/add/operator/debounceTime' ; import 'rxjs/add/operator/catch' ; import 'rxjs/add/operator/do' ; import 'rxjs/add/operator/distinctUntilChanged' ; import { CommBroker } from "../../../services/CommBroker" ; @ Component ( { selector : 'Weather' , providers : [ WeatherService , SortableHeader ] , changeDetection : ChangeDetectionStrategy . OnPush , styles : [ `input {margin: 20px; width: 50%}` ] , template : `
    <small>I am a weather component</small>
    <hr/>
    <label style="padding-top: 5px; font-size: 1.4em">Auto updated</label>
    <SwitchComponent [label]="'My Switch'"></SwitchComponent>
    <input type="text" #anotherWayToGetInput class="form-control" placeholder="enter city or zip code" [formControl]="zipControl">
    <table class="table">
      <thead>
        <tr>
          <th>day</th>
          <th>icon</th>
          <th sortableHeader="maxtempF" [sort]="sort">high</th>
          <th sortableHeader="mintempF" [sort]="sort">low</th>
        </tr>
      </thead>
      <tbody>
      <!-- no need to subscribe to observable since async does this for us -->
        <tr *ngFor="let item of weatherItems | async | OrderBy:sort.field:sort.desc">
          <td>{{ item.day }}</td>
          <td><img src="{{ item.iconPath }}" style="width: 40px; height: 40px"/></td>
          <td>{{ item.maxtempF }}</td>
          <td>{{ item.mintempF }}</td>
          <!-- <td [innerHtml]="item.day"></td> -->
        </tr>
      </tbody>
    </table>
  ` , } ) export class Weather { private weatherItems : Observable < IWeatherItem [ ] > ; private zipControl : FormControl = new FormControl ( ) ; public sort : { field : string ; desc : boolean ; } = { field : null , desc : false } ; @ ViewChild ( 'anotherWayToGetInput' ) myWeatherInput : ElementRef ; constructor ( private renderer , private weatherService , private commBroker ) { this . listenWeatherInput ( ) ; this . commBroker . getService ( Consts . Services ( ) . Properties ) . setPropView ( 'Weather' ) ; } ngAfterViewInit ( ) { this . zipControl . setValue ( '91301' ) ; /**
        now we can access a native input element and set its focus in the proper way so we can
        use this code in server side and other non-dom environments

         examples include:
         constructor( private renderer : Renderer, private element : ElementRef ) {
                this.nativeElement = element.nativeElement;
          }
         let inputElement = this.renderer.createElement(this.nativeElement, “input”);
         this.renderer.setElementAttribute(inputElement, “value”, “Hello from renderer”);
         this.renderer.invokeElementMethod(inputElement, “focus”, []);
         this.renderer.listenGlobal("body", "click", () => console.log("Global event"));

         const pEleOne = this.renderer.createElement(this.nativeElement, "p");
         const pEleTwo = this.renderer.createElement(this.nativeElement, "p");
         this.renderer.createText(pEleOne, "Element one");
         this.renderer.createText(pEleTwo, "Element two");
         this.renderer.projectNodes(this.nativeElement, [pEleOne, pEleTwo]);

         to see more options on render see:
         https://medium.com/@NetanelBasal/angular-2-explore-the-renderer-service-e43ef673b26c#.1n66gf47q

         **/ setTimeout ( ( ) => { this . renderer . invokeElementMethod ( this . myWeatherInput . nativeElement , 'focus' , [ ] ) ; } , 1000 ) ; } listenWeatherInput ( ) { return this . weatherItems = this . zipControl . valueChanges . debounceTime ( 400 ) . distinctUntilChanged ( ) . filter ( ( zip ) => { return zip . length > 3 ; } ) . switchMap ( zip => { console . log ( zip ) ; return this . weatherService . search ( `${ zip }/1` ) ; } ) ; } }