0

Tengo un array de elementos que distribuyo con un ngFor para mostrarlos en pantalla; la idea principal es que al hacer click en ellas cambie de color los bordes. Esto lo hago por medio de .ts, pero quisiera saber si hay alguna forma de asignar una id para llamarla con @ViewChild en el .ts y poder asignarle parámetros de CSS, ya que, de la forma en que lo hago, se le asigna el mismo id para todos los botones de igual forma.

<div class="row">
     <label id="descripcionCategoria" >Selecciona la categoría a la que pertenece el producto terminado</label>
     <div class="row" id="dvCategorias" *ngFor="let categoria of categorias" >
          <a class="categoria" type="button" #bCategoria (click)="seleccionCategoria()" >{{categoria.nombreCategoria}}</a>
                &nbsp;
     </div>
</div>

adjunto imagen

introducir la descripción de la imagen aquí

TS:


  @ViewChild('bCategoria') categoria!: ElementRef;

  public seleccionCategoria(){
    this.categoria.nativeElement.style.borderColor = "#1BA088";
  }

``
2
  • 1
    ¿Por qué no usar clases de CSS para eso? Me parece más sencillo y limpio el 23 mar. a las 14:18
  • algún ejemplo de como podría hacerlo ?, por favor @PabloLozano el 23 mar. a las 14:39

2 respuestas 2

0

Si tu puedes seleccionar una sola categoría el comportamiento es similar al de un radio button, si puedes seleccionar más de una categoría el comportamiento es similar al de un checkbox. En cualquier caso la técnica es la misma (yo supondré el primer caso) que es ocultar el input y dar estilo al label para que se asemeje a un botón. Al presionar un Label que cuenta con su atributo for seteado es lo mismo que presionar el input.

Ejemplo

label.boton{ /* hacemos que el label se asemeje a un botón */
 padding:4px 6px;
 border: 2px solid black;
 border-radius:4px;
 min-width:56px;
 display: inline-block;
 text-align:center;
}
label.boton:hover{ /* efecto hover del label */
 background-color: lightgray;
 cursor:pointer;
}
input[type=radio]{
 display:none; /* Ocultamos el radio */
}
input[type=radio]:checked + label.boton{ /* Si el radio está checkeado, cambiamos el color del label */
 border: 2px solid blue;
 color:blue;
}
<input type="radio" name="catname" value="uno" id="uno" />
<label class="boton" for="uno">uno</label>

<input type="radio" name="catname" value="dos" id="dos" />
<label class="boton" for="dos">dos</label>

<input type="radio" name="catname" value="tres" id="tres" />
<label class="boton" for="tres">tres</label>

Ahora llevemos esto a Angular:

HTML

<div class="row" id="dvCategorias" *ngFor="let c of categorias" >
  <input type="radio" name="catname" [value]="c.nombreCategoria" id="{{c.nombreCategoria}}" [(ngModel)]="categoria">
  <label class="boton" for="{{c.nombreCategoria}}">{{c.nombreCategoria}}</label>
</div>

CSS:

label.boton{ /* hacemos que el label se asemeje a un botón */
 padding:4px 6px;
 border: 2px solid black;
 border-radius:4px;
 min-width:56px;
 display: inline-block;
 text-align:center;
}
label.boton:hover{ /* efecto hover del label */
 background-color: lightgray;
 cursor:pointer;
}
input[type=radio]{
 display:none; /* Ocultamos el radio */
}
input[type=radio]:checked + label.boton{ /* Si el radio está checkeado, cambiamos el color del label */
 border: 2px solid blue;
 color:blue;
}

app.module.ts

import { NgModule } from '@angular/core';
import { BrowserModule } from '@angular/platform-browser';
import { FormsModule } from '@angular/forms'; //esto hay que agregar si no lo tienes
import { AppComponent } from './app.component';

@NgModule({
  imports: [
    BrowserModule,
    FormsModule //esto hay que agregar si no lo tienes
  ],
  declarations: [
    AppComponent
  ],
  bootstrap: [AppComponent]
})

TS:

categorias = [{nombreCategoria:'uno'},{nombreCategoria:'dos'},{nombreCategoria:'tres'}];
categoria:any;  

Aquí categorías es una lista con las categorías, obviamente tu usas la tuya. Y en categoria:any estará la categoría seleccionada

DEMO

0

Tienes una lista de categorías, y de cada categoría estás mostrando el nombre.

Podrías añadir una propiedad extra a cada categoría que sea la clase a aplicar:

  • En el código del componente podrías hacer algo como:
this.categorias.forEach(categoria => categoria.cssClass="categoryDefault");

...

changeClass(categoria) {
   categoria.cssClass= ...
}

y en la plantilla podrías hacer algo como

     <div class="row" id="dvCategorias" *ngFor="let categoria of categorias" >
          <a class="categoria" type="button" #bCategoria (click)="changeClass(categoria)" >{{categoria.nombreCategoria}}</a>
                &nbsp;
     </div>

Tu Respuesta

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

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