Lo primero que tenemos que hacer es crear un nuevo componente llamado "chat". Para eso escribimos en la consola de comandos: "ng g c componente/chat" y listo.
Luego vamos a modificar el "app.module.ts" para incluir el import "FormsModule", que lo necesitaremos para más adelante:
A continuación modificamos el html del componente de la aplicación para comentar la lista de chats que teníamos antes e incluir el nuevo componente chat dentro de un contenedor:
Ahora modificamos el html del componente chat como sigue:
Como se puede ver, hemos creado un contenedor general con dos contenedores dentro. Estod contenedores representan mensajes de chat.
Al final hemos puesto un campo de texto (cuyo valor hemos enlazado con un atributo del componente con la directiva NgModel) para escribir mensajes que llamará a la función "enviarMensaje()" del componente cada vez que pulsemos la tecla enter.
Ahora modificamos el componente del chat para incluir la variable "mensaje" (enlazada con el campo de texto) y la función "enviarMensaje()", que mostrará por consola lo que hemos escrito:
Si arrancamos la aplicación, comprobamos que nos aparece la ventana de un chat con los mensajes escritos y el campo de texto para escribir debajo:
Y eso es todo por ahora.
No hay comentarios:
Publicar un comentario