wKoza

import {Directive, Renderer2, ElementRef, HostListener, Input} from '@angular/core';

@Directive({
  selector: '[appHighlight]'
})
export class HighlightDirective {
 
  @Input('appHighlight') highlightColor: string;

  private _defaultColor = 'red';

wKoza

import {Directive, Renderer2, ElementRef, HostListener} from '@angular/core';

@Directive({
  selector: '[appHighlight]'
})
export class HighlightDirective {

  constructor(el: ElementRef, renderer: Renderer2) {
    renderer.setStyle(el.nativeElement, 'color', 'red');
  }

wKoza

Observable<Article> article$ = this.http.get<Article>('api.learn-angular.fr/article', {responseType: 'blob'});

wKoza

Observable<Article[]> articles$ = this.http.get<Article[]>('api.learn-angular.fr/articles');

wKoza

Observable<Article[]> articles$ = this.http.get('api.learn-angular.fr/articles')
                                          .map((res:Response) => res.json() as Article[]);

wKoza

<ma-taille
  [taille]="maTaille"
  (tailleChange)="maTaille=$event"></ma-taille>

wKoza

import {Component} from '@angular/core';

@Component({
  selector: 'app-root',
  template: `
    <div [align]="alignement" [ngStyle]="{color:couleur}">Personne : {{person}} | Age : {{age}} | Adresse : {{address.street}}</div>
    <app-comp1 [monAdresse]="address"></app-comp1>
    <button (click)="modifierPersonne()">Modifier personne</button>
    
  `

wKoza

import {Directive, Renderer2, ElementRef} from '@angular/core';

@Directive({
  selector: '[appHighlight]'
})
export class HighlightDirective {

  constructor(el: ElementRef, renderer: Renderer2) {
    renderer.setStyle(el.nativeElement, 'color', 'red');
  }

wKoza

import { Component,  Injectable } from '@angular/core';
import { ActivatedRoute } from "@angular/router";

@Component({
  selector: 'app-threads',
  templateUrl: './threads.component.html',
  styleUrls: ['./threads.component.css']
})
export class ThreadsComponent  {

wKoza

import {Component, Input, EventEmitter, Output} from '@angular/core';

@Component({
  selector: 'person',
  template: `
  <div *ngIf="!disable">
  <h1>{{person.name}} {{person.lastname}}</h1>
  <button (click)="choose()">Choisir</button>
  <hr>
  </div>`