Usando ngStyle y ngClass para añadir estilos dinámicos

Clase 26 de 57 • Curso de Ionic Avanzado 2017

Contenido del curso

Introducción a Ionic

Estructura de nuestra App con Ionic

Basics de Angular y TypeScript

Agregando estilos con CSS a nuestra aplicación

Acceso a datos remotos

Opciones y Acceso Nativo

Conversación

Amigos

Deploy

Contenido Bonus

Tomar examen

Resumen

Angular cuenta con directivas propias para poder asignar estilos de forma dinámica. ngClass se encarga de asignar una clase CSS a un elemento siempre y cuando esta cumpla una condición que le marques. Por otro lado, ngStyle asigna una propiedad CSS a algún elemento siempre y cuando cumpla alguna condición. Es recomendable siempre usar ngClass en lugar de ngStyle.

Comentarios

Edward Steven Ramos Palacios

teacher•

Para las directivas ngStyle y ngClass también se puede usar un objeto que contenga las propiedades que necesitamos de la interface de Status asi:

<div class="contact-list-item" [ngClass]="{'contact-offline': offlineStatus.includes(user.status)}"
           [ngStyle]="{'color': offlineStatus.includes(user.status) ? 'red' : 'blue'}"
           *ngFor="let user of friends | search: query" (click)="goToConversation(user)">
	{...}
</div>

y el home.ts quedaria asi:

import { Component } from '@angular/core'
import { NavController } from 'ionic-angular'
import { User, Status } from '../../interfaces/user'
import { UserService } from '../../services/user.service'
import { ConversationPage } from '../conversation/conversation'

@Component({
  selector: 'page-home',
  templateUrl: 'home.html'
})
export class HomePage {
  friends: User[]
  offlineStatus: Status[]

  constructor(public navCtrl: NavController, public userService: UserService) {
    this.friends = this.userService.getFriends()
    this.offlineStatus = [Status.Offline, Status.AppearOffline]
  }
{...}
}

Asi logramos el mismo resultado de una manera mas limpia y organizada.
Saludos!

Carlos Uriel de Jesus Sánchez González

student•

el manejo de ngClass es mas trasparente, no encuentro casos de ngStyle cuando se pueden poner en una clase

Gabriel Solorzano

student•

Pues es como el prof dice, es bueno saber que existe; capaz solo cuando tienes que aplicar una sola regla CSS

Juan Camilo Angel Fandiño

student•

Creo que una mejor forma de hacerlo sin tener que combinar class con style y sin tener que hacer comparaciones que luego van a ser dificiles de leer en el código y que tal vez no deberían estar en el template. Sería agregar al css en el .contact-list-item{color:blue;} así este será el color por defecto si no está offline. Y agregar a .contact-offline{color: red;}. De esta forma sería reemplazado el color cuando se agregue esta clase al div. Faltaría cambiar en el home.html:

<div class="contact-list-item"
      [ngClass]="getContactStatusClass(user)"
      *ngFor="let user of friends | search: query; let i = index"
      (click)="goToConversation(user)"
    >
      <img src="assets/img/logo_live_online.png" class="status">
      <b>{{user.nick}}</b>
      <small *ngIf="user.status">{{user.status}}</small>
    </div>

Y en el home.ts:

getContactStatusClass(user){
    if( user.status == Status.Offline || user.status == Status.AppearOffline ){
      return 'contact-offline';
    }
    return '';
  }

Saludos!

<div class="contact-list-item" [ngClass]="{'contact-offline': offlineStatus.includes(user.status)}"
           [ngStyle]="{'color': offlineStatus.includes(user.status) ? 'red' : 'blue'}"
           *ngFor="let user of friends | search: query" (click)="goToConversation(user)">
	{...}
</div>

import { Component } from '@angular/core'
import { NavController } from 'ionic-angular'
import { User, Status } from '../../interfaces/user'
import { UserService } from '../../services/user.service'
import { ConversationPage } from '../conversation/conversation'

@Component({
  selector: 'page-home',
  templateUrl: 'home.html'
})
export class HomePage {
  friends: User[]
  offlineStatus: Status[]

  constructor(public navCtrl: NavController, public userService: UserService) {
    this.friends = this.userService.getFriends()
    this.offlineStatus = [Status.Offline, Status.AppearOffline]
  }
{...}
}

<div class="contact-list-item"
      [ngClass]="getContactStatusClass(user)"
      *ngFor="let user of friends | search: query; let i = index"
      (click)="goToConversation(user)"
    >
      <img src="assets/img/logo_live_online.png" class="status">
      <b>{{user.nick}}</b>
      <small *ngIf="user.status">{{user.status}}</small>
    </div>

Usando ngStyle y ngClass para añadir estilos dinámicos

Introducción a Ionic

Intro a Ionic Framework, Angular, Platzinger, y Ionic CLI

Instalación de Ionic y más herramientas en Mac OS

Instalación de Ionic y más herramientas de desarrollo en Windows

Estructura de nuestra App con Ionic

Arquitectura de una app en Ionic

Proyecto: Platzinger App

Repositorio del curso

Qué son pages y cómo generar las primeras de nuestra app

Navegación básica entre pages

Reto: Página “Acerca de” accesible desde el menú lateral

Tomando los conceptos compartidos de Angular y Ionic

Basics de Angular y TypeScript

Aclaraciones Ionic vs Angular

Cómo usar tipos de datos con typescript

Qué son e implementando interfaces de TypeScript

NgFor aplicado en la lista de usuarios

NgIf aplicado en la lista de usuarios

Navegación con parámetros

Accediendo a nuestros usuarios con conversation.ts

Creando un servicio de usuarios e inyectando el servicio en nuestros pages

Pipes en TypeScript (Date, Number, Json)

Creando nuestro propio 'Pipe' para buscar entre nuestros contactos

Reto: Mostrar un icono diferente según el status del usuario

Agregando estilos con CSS a nuestra aplicación

Cómo usar estilos CSS y referenciar recursos

Implementando estilos en la pantalla de login

Implementando estilos en la pantalla de home

Implementando estilos en la pantalla de conversación