[Dúvida] Erro de typo em mensagem.

Fiz o desafio, mas apresenta erro na palavra mensagem. *Type '"O telefone deve ser preenchido."' is not assignable to type '""'.ngtsc(2322) cadastro.component.ts(5, 18): Error occurs in the template of component CadastroComponent. (property) MensagemComponent.mensagem: "" *

<!--CONTATO-->
      <div class="formulario__campo">
        <label class="campo__etiqueta" for="telefone">Contato</label>
        <input 
        name="telefone" 
        id="telefone" 
        type="tel" 
        placeholder="(XX) XXXXX-XXXX" 
        class="campo__escrita" 
        ngModel 
        required 
        pattern="(\(?\d{2}\)?\s?)(\d{5}\-?\d{4})"
        #telefone="ngModel"
        />

        <div *ngIf="(telefone?.invalid && telefone?.touched) || telefone?.dirty">
          <app-mensagem *ngIf="telefone?.errors?.['required']" mensagem="O telefone deve ser preenchido."></app-mensagem>
          <app-mensagem *ngIf="telefone?.errors?.['pattern']" mensagem="O campo telefone está faltando algo. "></app-mensagem>
        </div>  

      </div>

<!--EMAIL-->
    <div class="formulario__campo">
      <label class="campo__etiqueta" for="email">E-mail</label>
      <input 
      name="email" 
      id="email" 
      type="email" 
      class="campo__escrita" 
      ngModel 
      required  
      pattern="^[\w-.]+@([\w-]+\.)+[\w-]{2,4}$"
      #email="ngModel"
      />

      <div *ngIf="(f.controls['email']?.invalid && f.controls['email']?.touched) || f.controls['email']?.dirty ">
        <app-mensagem *ngIf="email?.errors?.['required']">O email deve ser preenchido.</app-mensagem>
        <app-mensagem *ngIf="email?.errors?.['pattern']">O email deve ter @ e .com.</app-mensagem>
      </div> 

    </div>