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
3 respuestas
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
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
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"}]
Preguntas relacionadas
Preguntas vinculadas
Nuevas preguntas
css
CSS (Cascading Style Sheets) es un lenguaje de hojas de estilo de representación utilizado para describir el aspecto y el formato de documentos HTML (HyperText Markup Language), XML (Extensible Markup Language) y elementos SVG que incluyen (pero no se limitan a) colores, diseño, fuentes, y animaciones. También describe cómo se deben representar los elementos en la pantalla, en papel, en el habla o en otros medios.