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