Tengo un componente de mapa de artículo. En él, con la ayuda de la directiva ngFor, muestro una breve información sobre los artículos. Llamo al componente "article-map" en el componente "feed". El componente "alimentación" debe tener tres vistas con diferentes estilos de "mapa de artículos". Por ejemplo: el primero es una hoja, el segundo son dos columnas, etc. ¿Cómo le doy estilo al componente del mapa del artículo para diferentes vistas de fuentes usando ngClass?
Empecé con lo siguiente. En article-card.component.ts configuré una variable para obtener el parámetro del enlace.
export class ArticleCardComponent implements OnInit { constructor(private route: ActivatedRoute) { } typeView='default'; ngOnInit(): void { this.route.queryParams.subscribe(params => { console.log(params) this.typeView=params['viewType']; }) } }Ahora quiero escribir una expresión ternaria para ngClass que permita usar diferentes clases de estilo para las vistas de feed. ¿Dime cómo hacerlo?
En tu caso lo será.
<div [ngClass]="typeView === 'default' ? 'css-class-1' : 'css-class-2'">Si desea más de una condición, escriba una función como
html
<div [ngClass]="getClass()">t
getClass() { switch(this.typeView) { case 'default': return 'css-class-1'; case 'special': return 'css-class-2'; default: return 'css-class'; } }