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

<div appHighlight>Texte en hightlight</div>

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  {