Cómo aplicar estilo en angular6

Question

Quiero aplicar color de texto cuando se haga clic en la identificación esperada

     <nav class="navbar ">
        <ul class="navbar-nav">
          <li *ngFor="let item of items">
         <a class="nav-link" >{{item.title}}</a>
          </li>
        </ul>
      </nav>


items=[{id:1,title:"a"},{id:2,title:"b"},{id:2,title:"c"},{id:3,title:"d"}]

Controladora-

Nombre privado

this.routes.params.subscribe((params)=>{
      this.data=params['id'];
      console.log(this.data);
    })  

this.Service.getAllItems().subscribe((data)=>{
   this.items=data;
   for(let i of this.items){
   if(i.id == this.data){
   this.name=i.title;
}
}

Para hacer clic en la identificación, tengo que aplicar el color del texto rojo. Cómo aplicarlo. Por favor ayuda

css angular html

0

developer.PT 10 may. 2019 a las 15:21

Answer 1

Podría tener una variable con la identificación activa, que se establece al hacer clic en:

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

    @Component({
      selector: 'my-app',
      templateUrl: './app.component.html',
      styleUrls: [ './app.component.css' ]
    })
    export class AppComponent  {
     public activeId;

      setIdActive(id) {
        this.activeId = id;
      }

    }

Y en tu html:

<nav class="navbar ">
        <ul class="navbar-nav">
          <li *ngFor="let item of items">
         <a (click)="setIdActive(item.id)" class="nav-link" [ngClass]="{'apply-color': item.id == activeId}" >{{item.title}}</a>
          </li>
        </ul>
</nav>

apply-color es una clase con el color que deseas

1

Franco D'Achilli 10 may. 2019 a las 12:33

Answer 2

Esta respuesta satisface las condiciones en las que debemos resaltar todas las opciones en las que se hace clic

Si desea cambiar el color de todos los enlaces en los que se hace clic y no solo el último, le aconsejo que utilice una directiva HostListener.

consructor(privte elem: ElementRef, private renderer: Renderer) { }

@HostListener('click',['$event'])  //in your case, the event parameter can be omitted
Click(event: Event) {
    this.renderer.setElementStyle(elem.nativeElement, 'color', 'red');
}

Y si solo el estilo CSS para a:visited funciona para usted (no lo he intentado yo mismo), sería la mejor solución

0

Saksham 10 may. 2019 a las 12:44

Answer 3

Puedes [ngClass] para este problema. Cuando hace clic en el enlace, pase el elemento a la función. esto cambiará el activeId. Al usar [ngClass] la clase se aplicará al enlace.

let activeId:number;

makeALinkActive(item){
this.activeId = item.id;
}


items=[{id:1,title:"a"},{id:2,title:"b"},{id:2,title:"c"},{id:3,title:"d"}]

.red{
color: red;
}

<nav class="navbar ">
    <ul class="navbar-nav">
       <li *ngFor="let item of items">
          <a class="nav-link" [ngClass]="{'red':activeId === item.id}" (click)='makeALinkActive(item)'>{{item.title}}</a>
       </li>
    </ul>
 </nav>

items=[{id:1,title:"a"},{id:2,title:"b"},{id:2,title:"c"},{id:3,title:"d"}]

0

Jagan Mohan Bishoyi 10 may. 2019 a las 12:50

Cómo aplicar estilo en angular6

3 respuestas

Preguntas relacionadas

Preguntas vinculadas

Nuevas preguntas

css