Para me desafiar, decidi melhorar a funcionalidade do componente "mensagem" que o instrutor pede para criarmos. Ao invés de simplesmente lidar com estilo e deixar a lógica de exibição para o componente pai, a minha versão do componente recebe dois inputs do componente pai, o input do tipo NgModel que os erros estão referenciando e uma lista de "validadores" e mensagens de erro, para serem exibidas.

interface Error {
  message: string
  validator: string
}

@Component({
  selector: 'app-mensagem',
  templateUrl: './mensagem.component.html',
  styleUrls: ['./mensagem.component.css']
})

export class MensagemComponent implements OnInit {

  @Input() form!: NgModel
  @Input() erros: Error[] = []

  constructor() { }

  ngOnInit(): void {
  }

}

Já no template, eu faço o uso de ng-containers, ngIf e ngFor para controlar a exibição das mensagens de erro.

<ng-container *ngIf="(form?.touched && form?.invalid) || form?.dirty">
  <ng-container *ngFor="let erro of erros">
    <span class="erro__texto" *ngIf="form?.errors?.[erro.validator]">
      {{ erro.message }}
    </span>
  </ng-container>
</ng-container>