wKoza

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

@Component({
  selector: 'app-root',
  template: `
    <div [align]="alignement" >Personne : {{person}} | Age : {{age}} | Adresse : {{address.street}}</div>
    

  `
})

wKoza

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

@Component({
  selector: 'app-root',
  template: `
    <div align="{{alignement}}" >Personne : {{person}} | Age : {{age}} | Adresse : {{address.street}}</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>
    

  `
})

wKoza

<div *ngIf="1 > 0"> Afficher la div</div>

wKoza

<template [ngIf]="1 > 0">
<div> Afficher la div</div>
</template>

wKoza

<div [ngStyle]="{color:'red'}">Learn Angular</div>

wKoza

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

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

  constructor() { }

}

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

<div appHighlight>Texte en hightlight</div>

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');
  }