Condicionales y plantillas en angular

component.html

<h1>App Component</h1>

<!-- [atributo] -> Atributo modo solo atributo: Toma valor de variable -->
<!-- (atributo) -> Atributo modo solo evento: Asigna valor a variable -->
<!-- [(atributo)] -> Atributo modo atributo y evento: Toma y Asigna valor a variable -->
<input type="text" [(ngModel)]="name" />
<p>{{ name }}</p>

<ng-container *ngIf="flag; else empty">
  <div class="container">
    <h1>Content when <code>flag = true</code></h1>
  </div>
</ng-container>

<ng-template #empty>
  <div class="container">
    <h1>Empty. <code>flag = false</code></h1>
  </div>
</ng-template>
<button (click)="flag = !flag">Toggle flag</button>

<router-outlet></router-outlet>

container.ts

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

@Component({
  selector: 'app-root',
  templateUrl: './app.component.html',
  styleUrls: ['./app.component.css'],
})
export class AppComponent {
  title = 'ngBestPractice';
  flag: boolean = true;
  
  name: string = 'Name';
}