wKoza

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

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

  private _defaultColor = 'red';

wKoza

<div [appHighlight]="'yellow'">Texte en highlight</div>

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>
  `
})
export class AppComponent {

wKoza

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

@Component({
  selector: 'app-comp1',
  template: `
    {{monAdresse.street}}
  `
})
export class Comp1Component  {

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 {Component, Output, EventEmitter} from '@angular/core';

@Component({
  selector: 'app-comp2',
  template: `
     <button (click)="decrement()" > - </button>
         
     <button (click)="increment()"> + </button>
  
  `

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 adresse</button>
    
    <h1>Event binding - Compteur</h1>

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 adresse</button>
    
    <h1>Event binding - Compteur</h1>

wKoza

<input [(ngModel)]="prenom">

wKoza

<input
  [ngModel]="currentHero.firstName"
  (ngModelChange)="currentHero.firstName=$event">