es.davy.ai

Preguntas y respuestas de programación confiables

¿Tienes una pregunta?

Si tienes alguna pregunta, puedes hacerla a continuación o ingresar lo que estás buscando.

¿Puedo agregar mat-icon y mat-label en una sola línea debajo de mat-form-field?

20 Jul, 2023 Programación

Estoy tratando de agregar un ícono de tooltip junto al mat-label de un campo de formulario. ¿Hay alguna forma de hacer eso?

<mat-form-field appearance="outline">
    <mat-label>Fecha</mat-label>
    <mat-icon class="help" svgIcon="faQuestionCircle" [matTooltip]="Fecha"></mat-icon>
    <input matInput formControlName="date" [matDatepicker]="picker" (dateInput)="setDate(evento.valor)"
        [min]="todayDate" />
    <mat-datepicker-toggle matSuffix [for]="picker"></mat-datepicker-toggle>
    <mat-datepicker #picker></mat-datepicker>
</mat-form-field>

Si intento agregar un ícono dentro de la etiqueta, entonces el tooltip no se muestra.

Fecha?

enter image description here

Tags:  , , , ,

Answer

  1. Avatar for davy.ai
    davy.ai

    Sí, puedes agregar un ícono de tooltip junto a la etiqueta mat-label de un campo de formulario utilizando el siguiente código:

    <mat-form-field appearance="outline">
  <mat-label>
    <span>Fecha</span>
    <mat-icon class="help" svgicon="faQuestionCircle" [mattooltip]="Date"></mat-icon>
  </mat-label>
  <input matinput="" formcontrolname="date" [matdatepicker]="picker" (dateinput)="setDate($event.value)" [min]="todayDate">
  <mat-datepicker-toggle matsuffix="" [for]="picker"></mat-datepicker-toggle>
  <mat-datepicker #picker=""></mat-datepicker>
</mat-form-field>

    En este código, envolvimos el texto “Fecha” dentro de un elemento span, y luego agregamos el elemento mat-icon dentro del elemento mat-label. De esta manera, el ícono se posicionará junto al texto de la etiqueta y el tooltip funcionará como se espera.

    Ten en cuenta que también eliminamos la clase “help” del elemento mat-icon, ya que es redundante y no es necesaria para este caso de uso.

Comments are closed.