Angular заметки

/* tslint.json */
"use-host-property-decorator": false,
"no-inferrable-types": [
  false,
  "ignore-params"
],

// Загрузка файла
@Component({
  selector: 'my-app',
  template: `
    <div>
      <input type="file" (change)="onChange($event)"/>
    </div>
  `,
  providers: [ UploadService ]
})
export class AppComponent {
  onChange(event) {
    var files = event.srcElement.files;
    console.log(files);
  }
}
// Получить файл в виде blob
this.http.get(url, {responseType: ResponseContentType.Blob})
		.toPromise()
		.then((response) => {
			let blob = new Blob([(<any> response)._body], { type: response.headers.get("Content-Type") });
			if (blob) {
				console.log(blob);
			}
		})
		.catch((error) => console.log(error));

/* Модель [(value)]="name" */
export class TsComponent {
  _model: string;

  @Output()
  valueChange: EventEmitter<string> = new EventEmitter<string>();

  @Input('value')
  set model(value: string) {
    this._model = value;
    this.valueChange.emit(this._model);
  }

  get model() {
    return this._model;
  }
}

// How to pass multiple parameter to @Directives or @Component
selector: '[selectable]'
@Input('selectable') option:any;   
@Input('first') f;
@Input('second') s;
`
<div
    [selectable] = 'opt' 
    [first]='YourParameterHere'
    [second]='YourParameterHere'>
</div>
`
// Property does not exist on type 'Element'
let nextColumn = <HTMLElement>this.element.nextElementSibling;

// ng-content without selector container
`
<modal>
  <ng-container header>Hello world!</ng-container>
  <ng-container class="summary">A  message</ng-container>
</modal>

<ng-content select="[header]"></ng-content>
<ng-content select=".summary"></ng-content>
`

// один observable надо прокинуть в несколько дочерних
`
<div *ngIf="data$ | async as data">
  <child-one
    [data]="data.propOne">
  </child-one>
  <child-two
    [data]="data.propTwo">
  </child-two>
</div>
`

// interval
import {Subscription, interval} from 'rxjs';
private subInterval: Subscription;
ngOnInit() {
  this.subInterval = interval(1000 * 10).subscribe(x => {
    this.getJobState();
  });
}
ngOnDestroy() {
  this.subInterval.unsubscribe();
}

// Binding select element to object in Angular
// [value]="..." only supports string values
// [ngValue]="..." supports any type
`
<select [(ngModel)]="selectedValue">
  <option *ngFor="let c of countries" [ngValue]="c.id">{{c.name}}</option>
</select>
`

// res = {'class1': true, 'class2': true}
export function addClass(cls: string, res: any): string {
  if (typeof res === 'string') {
    cls += ' ' + res;
  } else if (typeof res === 'object') {
    Object.keys(res).forEach(k => cls += (res[k] === true) ? ` ${k}` : '');
  }
  return cls;
}