Directivas

Doc oficial en: https://angular.io/guide/structural-directives

ngModel

// cualquier cambio se aplica a la variable
<input type="text" name="nombre" id="nombre" [(ngModel)]="nombre">


*ngIf

// solo lo muestra si la variable registrado está a true
<p *ngIf="registrado">{{ mensaje }}</p>

Ejemplo del else de ese ngIf:
<p *ngIf="registrado;else sinRegistrar"> {{ mensaje }} </p>

<!-- este bloque solo se mostrará cuando se cumpla la condición sinRegistrar -->
<ng-template #sinRegistrar>
    <p>Nadie está Registrado</p>
</ng-template>


*ngFor

En el ts:
posts:Array<{titulo:string}>;
constructor() {
    this.posts=[
      {titulo:'uno'},
      {titulo:'dos'},
      {titulo:'tres'},
      {titulo:'cuatro'},
      {titulo:'cinco'}
    ];
}

En el html:
<ul>
  <li *ngFor="let post of posts">
      {{ post.titulo }}
  </li>
</ul>


ngStyle

<!-- con una condición ternaria -->
<span [ngStyle]="{color:cargo=='director' ? 'red': 'black'}">{{ cargo }}</span>

ngClass

Igual que ngStyle solo q usando una hoja de estilo externa, para ello ensrc\app\app.component.css añadir los estilos q queramos:
.claseEspecial { color:red;font-weight:bold;text-decoration:underline;}
Y en html:
<span [ngClass]="{claseEspecial:cargo=='director'}">{{ cargo }}</span>