Lo primero que vamos a hacer es descomentar la caja de chat del componente de la aplicación. Además, le vamos a añadir la misma condición que al botón de logout, es decir, que aparezca sólo si el usuario está registrado:
Ahora, como la ventana de chat sólo va a aparecer cuando nos logueemos, todos los mensajes de chat que guardemos van a tener un usuario y un nombre, así que modificamos la función agregarMensaje del servicio para incluir esos atributos en el mensaje a guardar:
Por último, vamos a modificar el html del componente del chat.
Primero vamos a utilizar la directiva ngClass para que los mensajes que pertenezcan al usuario logueado aparezcan a la derecha.
Luego modificamos el nombre del usuario para que aparezca de un color u otro dependiendo de si pertenecen al usuario logueado o no:
Ahora si arrancamos la aplicación, nos logueamos desde Google, guardamos un par de mensajes, nos deslogueamos, nos logueamos con Twitter, y guardamos un mensaje, debe aparecer de la siguiente forma:
Y eso es todo.
No hay comentarios:
Publicar un comentario