0

Espero me puedan ayudar con mi siguiente problema, tengo en un Nav dos vistas que redireccionan a dos componentes distintos, lo que necesito es subrayar la etiqueta cuando se seleccione el componente:

En el la vista principal se tiene un Nav, es el siguiente:

<nav>
<ul>
<li href="#" [ngClass]="{ 'select1' : select_Ini }">Inicio</li>
<li href="/alumnos" [ngClass]="{ 'select2' : select_Alu }">Alumnos</li>
</u>
</nav>

En el CSS de la vista principal que tiene el Nav, tenemos:

.select1{
text-decoration: underline black;
}

.select2{
text-decoration: underline black;
}

En el componente de Inicio tenemos:

constructor(){
this.select_Ini = true;
this.select_Alu = false;
}

En el componente Alumnos tenemos:

constructor(){
this.select_Ini = false;
this.select_Alu = true;
}

Intente utilizarlo con servicios ya que vi en un foro que esa podría ser una solución, pero no me funciono. Les agradecería si me ayudarán con este problema.

1 respuesta 1

1

Si bien no es la mejor solucion, yo utilizaria *ngIf en html para solucionar este problema, se mantienen las reglas que tienes en el archivo Ts, ya que seguimos con esa misma logica, dado que el estado de la variable select depende del componente seleccionado en el nav.

<li href="#" class="select1" *ngIf="this.select_Ini == true" ">Inicio</li>
<li href="#" *ngIf="this.select_Ini == false" ">Inicio</li>
<li href="/alumnos" class="select2" *ngIf="this.select_Alu == true" ">Alumnos</li>
<li href="/alumnos" *ngIf="this.select_Alu == false" ">Alumnos</li>
4
  • Gracias por responder, lo probaré el 11 feb. 2021 a las 22:09
  • ¿Funciono? .... el 12 feb. 2021 a las 0:42
  • @FranciscoPech ¿Funciono? el 12 feb. 2021 a las 22:24
  • Disculpa por responder hasta ahora, no funciono como quería bro, sin embargo, lo utilice, muchas gracias!!! el 14 feb. 2021 a las 4:34

Tu Respuesta

By clicking “Publica tu respuesta”, you agree to our terms of service and acknowledge you have read our privacy policy.

¿No es la respuesta que buscas? Examina otras preguntas con la etiqueta o formula tu propia pregunta.