Usando ngClass para añadir estilos dinámicos

Clase 34 de 63 • Curso de Angular 6 2018

Resumen

NgClass es una directiva que te permite aplicar una u otra clase a un elemento de html, dependiendo de una condición o expresión buleana. La forma de implementar NgClass es la siguiente:

  <div [ngClass] = ""{ '<nombre-de-la-clase': <expresión buleana> }"">
    <!-- -->
  </div>

La clase indicada se aplicará al elemento cuando la expresión buleana sea verdadera.

Comentarios

Erik Ricardo Sánchez Pérez

student•

Para los que tengan problemas con el router.url con angular 9 les comento que pueden usar el modulo import {Location} from '@angular/common';

import { Component } from '@angular/core';
import {Location} from '@angular/common';

@Component({
  selector: 'app-root',
  templateUrl: './app.component.html',
  styleUrls: ['./app.component.css']
})
export class AppComponent {
  title = 'platzinger';
  constructor(public location: Location) {}
}

y pueden acceder a location.path() para obtener la ruta

Carlos Uriel de Jesus Sánchez González

student•

app.component.ts

import {Component} from '@angular/core';
import {Router} from '@angular/router';

@Component({
  selector: 'app-root',
  templateUrl: './app.component.html',
  styleUrls: ['./app.component.css']
})
export class AppComponent {
  constructor(public router: Router) {
  }
}

app.component.html

<app-menu *ngIf="router.url != '/login'"></app-menu>
<div [ngClass]="{'generalContent': router.url != '/login'}">
  <router-outlet></router-outlet>
</div>

Milton Javier Camelo Arango

student•

Hola Eduardo, queria saber si tenias alguna forma de hacer validaciones personalizadas en Angular 6, tipo "El campo es requerido" pero con componentes de NgPrime

Joseba Fuentes

student•

¿Es esta en producción la mejor forma de ocultar paginas?, ¿no es fácilmente hackeable?

Andres Felipe Jerez Giraldo

student•

me gustaria saber lo mismo...

Arturo Mojica Guerrero

student•

Nose, porque en todas las paginas el router.url solo me lanza el "/" no me da el complemento de ese caracter por ejemplo /login.

Juan Castro

teacher•

¿Tienes tu código publicado en alguna parte? Así podemos descargarlo o algo para buscar el error y su solución. :wink:

Adrian Alberto Casas Lopez

student•

Implemente un navbar para la parte de la navegación y agregue una opción de logout pero no me funciona del todo ya que al logearme me manda a home pero no me muesra la opción de Logout solo cuando doy F5 aparece, ¿alguien sabra porque? Esto esta implementado en el app.comoponent.ts

export class AppComponent {
  title = 'platzinger';
  loggedIn = false;
  constructor(public router: Router, private authenticationService: AuthenticationService) {
    this.authenticationService.getStatus()
    .subscribe((result) => {
      if ( result && result.uid) {
        this.loggedIn = true;
      } else {
        this.loggedIn = false;
      }
    }, (error) => {
      this.loggedIn = false;
    });
  }

  logout() {
    this.authenticationService.logout().then(() => {
      alert('Sesión cerrada!');
      this.route.navigate(['login']);
    }, (error) => {
      console.log(error);
    });
  }
}```

Kevin Lozoya Giner

student•

Necesitas mandar el nuevo valor a tu Observable 'getStatus' mediante .next(user) cuando se hace Login. Puedes ver un ejemplo https://stackoverflow.com/a/53571659

Cesar Daniel Zavala Martinez

student•

Yo diría que es una mala práctica usar el *ngIf aquí.

Aunque no he visto todo el curso, espero que se haga el cambio pero, en este caso en el componente de <app-menu> debería pasarse como parámetro a través de una directiva ya sea la ruta si así se busca hacer (que, en lo personal considero que este <app-menu> no debería estar si quiera en este punto en el app.component si no dentro del component login y no usar las rutas) o un parámetro estilo [show]="true" que permita mostrar o no el menú ya que de esta forma no requieres ni si quiera el router y el código es más básico y simple.

Yonathan Gutierrez

student•

Se me ocurrió que, si yo pongo que por defecto la primera vista fuera el login, como manejarlo? aplique algo que se mostró anteriormente (etiqueta auxiliar) para aplicarlo tambien al link limpio es decir sin nada después del dominio quedando así:

<div *ngIf="router.url != '/'">
  <app-navbar *ngIf="router.url != '/login'"></app-navbar>
</div>

Alex Eugenio Gavidia Donayre

student•

Great

Wilson Marino Pablo Mendez

student•

Que interesante 👌

Angel Enrique Barrios

student•

wow angular wow

import { Component } from '@angular/core';
import {Location} from '@angular/common';

@Component({
  selector: 'app-root',
  templateUrl: './app.component.html',
  styleUrls: ['./app.component.css']
})
export class AppComponent {
  title = 'platzinger';
  constructor(public location: Location) {}
}

import {Component} from '@angular/core';
import {Router} from '@angular/router';

@Component({
  selector: 'app-root',
  templateUrl: './app.component.html',
  styleUrls: ['./app.component.css']
})
export class AppComponent {
  constructor(public router: Router) {
  }
}

export class AppComponent {
  title = 'platzinger';
  loggedIn = false;
  constructor(public router: Router, private authenticationService: AuthenticationService) {
    this.authenticationService.getStatus()
    .subscribe((result) => {
      if ( result && result.uid) {
        this.loggedIn = true;
      } else {
        this.loggedIn = false;
      }
    }, (error) => {
      this.loggedIn = false;
    });
  }

  logout() {
    this.authenticationService.logout().then(() => {
      alert('Sesión cerrada!');
      this.route.navigate(['login']);
    }, (error) => {
      console.log(error);
    });
  }
}```

Usando ngClass para añadir estilos dinámicos

Introducción

Qué aprenderás sobre Angular 6

Introducción a Angular

Configurando nuestro proyecto en Git y Github

Introducción a Angular CLI y al proyecto de Platzinger

Instalación del entorno de desarrollo en Mac OS

Instalación del entorno de desarrollo en Windows e información acerca del editor que usaré (WebStorm) y alternativas

Corriendo nuestra app en el navegador

Reto: Desarrolla un tutorial escrito comparando Angular con otro Framework (Vue, React)

Definición de la estructura del App

¿Qué hará nuestra app? ¿Cuál es su arquitectura? ¿De qué pantallas se compondrá? ¿Cuál será su look?

Explorando el sistema de archivos

¿Qué son y cómo generar los primeros componentes de nuestra app?

Navegación básica entre componentes

Componentes anidados: Creando un componente con nuestras rutas de navegación que funcione como menú

Reto: Varias conversaciones a la vez

Basics de Angular y TypeScript

¿Cómo usar tipos de datos con TypeScript?

Qué son las interfaces de TypeScript y su implementación

NgFor aplicado en la lista de usuarios

NgIf aplicado en la lista de usuarios

Navegación con parámetros

Accediendo a nuestros usuarios desde Conversation.ts

Creando un servicio de usuarios e Inyectando el servicio en nuestros componentes

Pipes en Angular (date, number, json)

Creando nuestro propio pipe para buscar entre nuestros contactos

Estilos

¿Cómo usar estilos CSS y referenciar recursos?

Instalando librerías usando npm (bootstrap y font-awesome) y Referenciando CSS en el angular.json

Reto: Cambiar ícono según estatus

Implementando estilos en la pantalla de login

Terminando de implementar los estilos de nuestra pantalla de login

Implementando estilos en el navbar

Implementando estilos en la pantalla de home

Implementando estilos en home, lista de contactos

Implementando estilos en profile

Reto: Estilos en la pantalla de conversación

Usando ngClass para añadir estilos dinámicos

Reto: Mejorar estilos en la pantalla de conversación

Acceso a datos remotos y login

¿Qué es Firebase? Creando nuestro proyecto

Diferencia entre conexión por sockets y HTTP

Instalación y setup de la librería AngularFire a través de npm

Login/Registro de usuarios con email y password

Reemplazo del servicio de usuarios por un servicio dinámico con conexión a Firebase

Guards para verificar Firebase auth

Creando un CRUD implementando un API REST HTTP (con diversos backends)

Reto: Implementar API HTTP

Opciones y subida de imágenes

Perfil de usuario

Seleccionar fotos usando una librería para image cropping

Guardando las imágenes de perfil en nuestra base de datos de firebase

Conversación

¿Cómo resolver el problema de comunicación en tiempo real?

Enviando un mensaje (con reproducción de sonido)

Mostrando conversación

Enviando un zumbido (con reproducción de sonido y animación)

Reto: Envía una foto

Amigos

Planeación previa para la característica, ¿cómo generaremos las solicitudes?

Enviando una solicitud de amistad

Generando el modal de solicitud de amistad

Aceptando solicitudes de amistad

Mostrando sólo contactos que son amigos

Componentes anidados (con paso de parámetros)

Reto: Mensaje personal en Solicitud de Amistad

Deploy

Creando un wrapper para desktop, usando Electron

Reto: Dándole Características PWA a nuestra App

Exportando app para web, complementando con Firebase Hosting

Conclusión

Conclusión

Cuéntanos