Angular Firebase Chat Tutorial - Part 1

hey guys Quest here in this video we're going to build a chat application using angular and firebase so we'll be using firebase to both persist the data in our chat app as well as for user authentication so as users will be able to sign in to our app and then post messages for other users discreet so yeah I think this app will be pretty fun to build so let's go ahead and get started [Music] all right so let's take a look at our chat app that we'll be building over the course the next several videos so first of all we have a login screen here but first we actually need to sign up so I'll head to the signup screen and you'll just apply an email and a password and a display names in this case we're just a web soil and if I sign up we'll get taken over to our chat and so we'll have a user list on the left side here and if we type a message we will get a message out to our chat feed here okay so we can see at the time and the username that posted the message as well as of course the message and yeah we can supply messages using enter or clicking the send button so I have do that and then yeah chats only useful of course we have more than one user so I'm going to go ahead and fire up another window and we'll fire this up in incognito that way we can maintain two sessions here and so what I'm going to do is sign up as another user and another username here so we'll go ahead and sign up here and as soon as we sign up we can see that the new user gets added to our user list and when the second user posts a message we can also see that in the chat and notice also that if you're the user posting the message then in your session you should see the post with this blue styling whereas anyone else posting a message will get the default gray and white styling here so I think that's just kind of a nice touch the other thing that's pretty cool about this app is that you'll notice that if we type in a bunch of messages here let's go ahead and just maybe copy and paste and we paste a bunch here and we paste a bunch over here okay if i refresh the page notice that the scroll bar starts at the bottom of the page this is kind of what you would expect I think from a chat application that goes from top to bottom with the newest messages at the bottom so something like google chat where the newest messages are at the bottom and then you expect to have the default view be scrolled all the way to the bottom so look at how to do that using a little bit of JavaScript and one of the other nice things that we look at is that the query we're using to actually pull these messages back from the live firebase database is only going to retrieve the latest 25 messages so if I paste just like a whole bunch of messages here and then scroll up you can see that we're only going to get the latest 25 and so that gets truncated that way we don't have just an enormous number of potential method is coming back from the server trying to get rendered all watts if we were going to get more complex with app we could definitely do something like infinite scroll where when we reach the top of the list here we pull the database perhaps on something like Facebook where we're only looking at a certain amount of information at a time depending on how far up or down we scrolled that'll be a little bit outside the scope of this app but it actually shouldn't be too difficult to implement once we work out everything else so yeah that's it if we sign up another user then we'll be able to see them in the user list as well but I'll leave that to you to play around with let's go ahead and get started writing the code to create this chat app all right so the first thing I'd like to do before we even write any code is just head to the drawing board in order to just create a quick sketch of the architecture of our application I like to do that at the start of any project I think it just helps develop an intuition of the overall structure and kind of just gives us a template in order to allow us to think more clearly about the structure of our application as we start building it so let's head over and create a sketch of our application okay so since we will be working in angular we will have an app component and this app component you can kind of think of as the shell for the remaining components that will comprise our application so within our app component I think we should separate it out into having a nav bar and then a router outlet and I think that this makes sense because we want the navbar to remain on every page of our application and so we will render that at the app component level and then just beneath it we will call router outlet and we'll define a set of routes which that when we hit different URLs in our app will render different sort of parent components in the router outlet so I can think of just three pages if you will that will represent the bulk functionality of our application so it will have a sign up component where a user will go to obviously sign up for an account and choose a username and then we'll have a login component for authentication and then the chatroom component which will of course be the bulk of our application which will allow users to post messages and to see which other users are authenticated so let's just think now about the chatroom component itself so the sign up and login components are relatively trivial in that they're just going to have forms in them and we use the forms to post back to firebase in order to authenticate or login a user but our chatroom component will break down a little bit further I think the contents of our chat room can component will basically consist of a user list on the left side of the screen here so this user list component I'm picturing as being just a container for our individual user components so the user components themselves would be more or less just presentational components which will just display at the user name if the user is authenticated and then on the right side of the screen it will have two separate components we'll have one for the seed and the seed component will serve as a wrapper to continue our chat messages so we'll have a presentational component to represent our message object as well and then finally we'll have a chat form component whose function will be to essentially just contain this input field that a user can type a chat message into and the chat form will also contain a button that when we click it will post the message to our feed component and love the wire up and on key pressed on enter so that so that a user can just hit enter and also have it post so as we work through this you may identify places in which you may want to structure your application a little bit differently perhaps you may want to break the components down even further but I think it's a starting point this is going to work great and it'll give us enough structure that we can kind of think about each of these components independently and have a relatively appropriate level of separation of concerns here so let's head back to the console and generate some of these components ok I'll be using the angular CLI to bootstrap this application so you want to make sure that's installed and you can check that with ng - V here I'm also going to be using typescript of course so we can check that with TS c - b and of course we'll be using node so you can check that with no - v if you need to install any of those things check the description for some links and instructions on how to do that and i'm going to be moving a little bit more quickly through this video series than some of my previous angular videos in part because this is i would consider this maybe a little bit more of an intermediate level project but mostly because there's just a lot more code to cover in this particular application so if you're building an angular app for the first time this would definitely work but you might get more out of developing something smaller first like the gallery application that I built in a previous video in any case let's go ahead and get started and we're going to use the CLI to generate our new chat project so I'm going to call it base chat and so this is just going to create a bunch of files here and it's going to install some packages in a node modules directory okay with that complete let's head over into our editor and I'll be using Visual Studio code for this series but of course feel free to use whatever editor you're most comfortable with and the first thing I'm going to do is inside the source director here instead of our app directory I'm going to go ahead and create a new folder called services and this is where we're going to put the various services that we're using this app in the source directory itself I'm actually going to create a new file called routes routes that TS so we'll be using the angular router in order to visit three separate pages if you will of this application so we'll have the chat room the login form and the signup form and so now let's go ahead and generate the different components that we talked about that we'll be implementing in this app so we'll head back to the console and we'll see the into the directory and I'm going to use the shorthand syntax from angular CLI so that will be ng gc4 generate component so we'll have our chat form component and then GC the chatroom component okay and then we have our feed so this is where all the messages will go so we'll go find generate a component for the message and then we need one for the login form and one for the signup form [Music] we'll have one for our navigation bars which is called that nav bar we'll have a component for our user list so that will contain the list of users who are using our application and then user item and user item of course just represent an individual user listing in that list and then we'll go ahead and generate the two services that we'll be using so for that n GGS and the first one will be our off service for authentication and the second one will be our chat service that's going to handle all of our messaging okay and while we're at the command line I need to go ahead and install few more packages so we're going to npm install - - save firebase and angular fire - so this will be of course to interact with our firebase backend so we have the regular vanilla if you will firebase SDK and then the angular fire - package which wraps a lot of the firebase functionality and allows us to work with observables in a lot of cases alright so let me go ahead and head back into the code now and what I'm going to do is the CLI drops these services in the app directory I'm just going to go ahead and move the four files that were generated here so the two spec files for each of the services and the typescript class themselves into these services directory here alright cool the first thing I'd like to do is to head into the routes file here so our routes that TS file and then we go ahead and paste our routes here and then explain what's happening so this should be silent form component and sign up form sign up form component okay so we're going to import routes from the angular star outer so that's going to give us the ability to visit various pages of our application curriculum or typo here this is various pages of our application depending on our URL and so when our URL path is sign up then we're going to activate the sign up form component likewise for login and chat we will activate the corresponding angular components for those parts of our application as well when we visit the base URL of our app slash any one of these paths and then our default path we will redirect to the login component we could get more complex in our routes here in the future by supplying a can activate property here and then having a sort of authentication guard that's something that I implemented in the angular firebase gallery set of videos that I made previously so if you're interested in doing that with this app just go ahead and take a look there and it might be something that I implement here in this project in a later video as well alright let's head over into our app module file so if we find that here should be in the source directory you can see we're importing all the components that we generated we also need to go ahead and make sure that we import our router module and forms module here so I'm just going to go ahead and paste those imports here so forms modules come in clone at angular slash forms and router from an angular slash router then we'll head down and we'll place those inside of our imports here okay cool and on router module we actually need to call that for route and pass it our app route and we need to import our apparatus here and I like to do that just at the bottom of our list of components that get imported and then we also need to import our services so I've imported our chat service and our off service which are now in our services directory and for that we need to list them as providers next I'm going to go ahead and bring in the angularfire modules so I'll place those up across the top here and so bringing in angularfire module for Megillah fire - then angularfire database module from Mengele fire - slash database and the auth module for magnifier - this is the current syntax for angularfire I know that recently they kind of broke out the various modules so this may look different if you're using a either new or previous version of angularfire for this video this is the current name spacing for the various modules that we'll be using so I'll scroll down here and I'm going to go ahead and paste those in our imports here as well okay so our angularfire module we're going to call this initialize app on it and pass our environment dot firebase object and so this is actually going to be our connection to our firebase back-end so first we need to actually import environment so let's do that here we already have that file at the CLI created for us this is going to be an environment slash environment and if you look over here here's the directory and then here's our environment type script file and our environment product ES file and so the way this is going to work is we're going to have our firebase property here and so in both of these files in the environment and in the prod file if you prefer go ahead and do that here as well this is where we'll put our connection data from firebase so let's head over to the firebase console and create a new app and so if you're creating a new project from scratch just click add project I've added a project here called chat demo if we click on it once you create your project you'll get taken to the console here and we need to select add firebase to your web app in order to grab this connection string and so we're going to grab this these configuration properties here from this config variable and go ahead and copy those and we're going to paste them here and the linter is going to give set about all these double quotes so if you're using them surround if you use them key bindings you can actually just see s and then in this case double quotes single quotes and that will change the surrounding characters for whatever string you're working with I'm just going to go ahead and do that for each of these all right cool so now I can copy this and we can paste that into our other file as well okay so now this should provide a connection to the registered firebase project and if we head back into our firebase console and we click on authentication and then we click on sign-in method we want to specify that we'll will sign into this app with email and password so just ensure that this is enabled and then we can save it here and then back in our database you'll notice that I'm getting this warning that the security rules are defined as public meaning that anyone can read or write to our database so this is just temporary but you'll want to set read and write to true I think it's just easier why you develop that way you don't have to log in and authenticate yourself in your application in order to read and write from the database once we get the authentication set up and we register as a new user we'll set this back to the default values ensuring that we need to actually be authenticated to read or write from our database but for now we'll leave them both as true allowing us to read and write without authentication yes I'm going to go ahead and minimize this for now and I'll save our app that module file and close it here and I'll close our routes file which is complete and let's go ahead and just start up a basic server that we can keep running as we develop go back to the console here I'm going to create a new console and CD into the directory and now we're just going to ng serve and so this will compile all of our typescript and then serve up the app on a development server at local host port 4200 now if I just fire up a new instance of Chrome here and head over to localhost 4200 you can see we get the default angular CLI welcome to app message here also note that we are of course because we set up our routes already where we are redirecting to the login component but of course we don't have anything here yet and we haven't actually implemented the router module net entity template yet so let's go ahead and minimize that and we'll take care of that next I'm going to head into our app component HTML file and we're going to remove the boilerplate code here what I'm going to do is I'm going to have a div of class chatroom I'm going to create a wrapper for our navbar here and for sure both the markup and the style sheets for this application would definitely benefit from being a little bit more cleaned up so for the first run-through they'll definitely work for our purposes but if you want to make this more sustainable sort of development project you'd want to take a closer look at revising some of the some of the mark-up that I have here okay so we're going to render our app navbar here and then we're going to place our outer outlet here and so any of the pages that will be rendering using our router that we specified in our routes file they're going to get rendered here within our chatroom wrapper but under our app navbar and the div that wraps it and then our app component PS is just sort of a simple presentational type component it just simply stores the title for our app and so we'll call it bass chat I don't know if bass chat is already a thing or not I'm just using it as an example name for this app it's not associated with any particular company or existing application alright cool so you know what happens when we hit the root URL of our application we go to the login form so let's go once again just quickly revisit our routes and so we visit our login form when we hit the base URL otherwise we hit this chat room component or signup component or if we go to login directly we hit our login component so let's go ahead and create the templates for each of these and then we'll sort of work our way down into more granular components from there so let's head over into our chatroom component so I'm just going to go ahead and paste the template here and so I've got this main content div that is wrapping our user list and feed and then outside of that I've got this chat form wrapper which wraps our app chat form again you can break this down into a couple more components and make it even more granular but for a first run-through I think that this should serve our purposes and it's broken down enough where we don't have like a million components to cover here but still keeping the code relatively organized so yeah our app user list obviously will contain a list of users and our feed will contain a list of messages in our chat room and then the chat form here is just the input box in the send button that we use to post messages to our feed note that I have this syntax here with a hashtag scroller and we'll look at why that's implemented a little bit later but in a sense this is going to be used in order for us to identify which Dom element we want to apply the JavaScript to in our component in order to scroll this down element if you will have scroll to the bottom we'll take a closer look at that when we get to working on the feed component just going to go ahead and save this and then let's go take a look in the browser so I'm going to make the font a little bit larger here so you can see that the we're getting a message from the navbar that it works and the login form works it's where we are read directed by default if we visit slash chat we can see the messages from the other three components that we just looked at just to double-check we can look at our sign up component as well and see that that's working alright so so far so good let's keep the chat page open while we work for a little while so our chat room is also just going to be kind of a presentational component all of the logic and our application if you will will be occurring inside of either our app feed or our chat forum with regards to the chat functionality so let's actually go into our chat forum first of all this will be what we're using to actually post messages to firebase so let's go into chat formed HTML and I'll go ahead and close some other windows here for now and I'm going to replace the boilerplate code here with an input and a button and so I've got a class here just to style the input and then we've got this two-way binding for a message model and then we've got a data binding to a keydown event here in which we'll write a function in this component handle submit that will basically handle the event that when we click enter we actually submit this form that's just kind of a nice feature that would the user won't necessarily have to click on the send button every time they want to send a message but can hit enter as you would find in most modern chat applications and then we have a button with another class just for some styling here and then we'll bind an on click event to a method send in our component which will just post the message to our live firebase database and if we take a quick look at the page we can see that the input is now getting rendered but it's not going to do anything of course because we don't have a send event so we'll get a warning if we try to click it or an error and as I'm typing buttons here sense will you since we're binding to the keydown event we can see that we're generating errors every time I press the key in the input as well so we know that at least it's doing something here and try to wire up some of the functionality for this form I'm just going to minimize this and we'll head into our chat form component type script file and so what I want to do is use the chat service that we'll build in order to handle all the communication with firebase from this component and so I'm just going to go ahead and import that here with that imported we can use dependency injection placing a reference to a private chat server in our constructor so say private chat is of type chat service and then the methods that we implement in the component level here are going to be very thin so we'll have a send method of course this is for one we want to post a message and we're simply going to call upon the chat service well write or write a method there that will actually send the message and we can bind it to this guide message and for that we need to go ahead and create that property here we'll say it's of type string and so this message property corresponds to the two-way binding that we have from ng model here so what we input into the box will essentially be passed back up from this view layer here up into the component layer and the data that's in this input form will bind to the message property here so we're going to pass that message to our chat service in order to actually post this message to the firebase database and so for that we'll just wrap it in method here called send that we can call from the component level and then we're going to write a handle submit method here which will take an event your call this was down to the keydown event so every time you press a key down we're going to call handle submit here and pass it the particular event that has occurred and here we want to check to see if the key that was pressed was the enter button and so we can say that by looking at the event key code and we'll say if that's equal to 13 which corresponds to the enter key on a standard keyboard then we're going to call our send method likewise if the user just simply clicks the send button the send method also gets called so whether they hit the enter key or click the send button the same send method gets called passing the contents of this chat input into our send function here which calls our service layer in order to actually post that message to firebase so that's really that all that's going to go into this actual form let's go ahead and head over into our chat service and write the send message method so first of all since we're visiting our chat service for the first time I'm going to go ahead and make all of our imports and so since it is a service we will make it injectable so we need to import injectable as you can see we've already injected it into our chat form component and then I'm going to import the various angularfire imports so angularfire database and angularfire list observable from angularfire to slash database and then angularfire off from angularfire to slash off and observable from rxjs slash observable and we need this because angularfire makes use of observables and then we're going to have a chat message model that I'll need to write so I'm going to move our off service up here course we need to import the authentication service and then I'm also going to import the nila firebase with imports stars firebase let's go ahead and create our chat message model to our chat message model this is going to represent the structure of the message object that we'd like to that we'd like to have firebase store for us so I'm going to go ahead and in the app directory here create a new folder called models and we're going to create a new file called chat - message that Model Ts and when we go ahead and paste in the model code here so this is going to be a pretty simple plain object everything that we have here is going to be a string except for the time sent first so we'll have a key and this will just correspond to a firebase key on this object which should be unique and then we want to store the email the user name and the message itself and then the time the message was sent with each message that gets posted to our feed we could get more elaborate here store more data up and have you know lots of other interesting things going on but for our purposes this should suffice as a place to get started while we're in the models I'm going to go ahead and create one more and we'll just call that user dot model that TS and this will be our user model I'm going to go ahead and paste that code here all right so here's our user we'll have a user ID email username and password and then we'll have a string representing the status of a user you could make this a boolean like is online or is offline or something but I figured I'd make it a string here because we might have a few other options we might have like it is idle or I could do not disturb status or something like that and in that case you might even make a separate object status that's a little bit outside the scope of the first version of this application but in fact if you want to have a more elaborate presence aspect to your chat application then you may want to think a little bit about how to structure the status of a user in our case we'll just keep it as a string okay so we've got these two models created I'm going to head back into our chat service and we came here because we needed to write a send message method and we'll pass this method of course the message that we want to post and if you recall this is coming from the input form so the input form is going to pass our send message method here its contents as a string and I want to post a few things I want to post a timestamp so we will have a method to get the current time I'll just call that get timestamp will have the email address of the posting user and so that we're going to call the email on the user object and we'll have a an array of chat messages so we're going to have chat messages equal to this get messages I'm going to write a method in order to get all the current messages and then what we're going to do is simply push a new message on to chat messages and so the message body itself will represent what's coming from the forum again that's what we pass into this function here our time sent will be the timestamp for which we need to write the message to return oops and I have small s there and then the username should correspond to the set username and we'll look at how to implement that into here and then our email address will be the email from the user object that we need to create so I realize we haven't created oops most of the functionality here yet just want to show you what the sort of structure for the send message method is and so clearly we need to create some of these properties in this class here so first of all we'll have our chat messages object and this is going to be a firebase list observable of type any and then the individual cat message that we're going to post will be a chat message in fact this could be a chat message array and will have a username which will be an observable string and for now we'll make our user type any I think this firebase user but for now we'll just make it type any and then in the constructor for this service first of all I'm going to inject our angular fire services so private DB will be an angular so our database and we'll have an angle if fire off instance here and then what we're going to do is we're going to make use of the off state observable that's on angular fire off here so the correct the typo here so that should be AF off and we're going to use that to set this user object so we'll do that just simply by subscribing to that all state observable so this dot AF off scroll up here dot off state that subscribe and then we'll write an arrow expression here and what I'm going to say is that if what we get back is not undefined nor do we get something back and it's not null then we'll set our user object to gets returned here and I'm just going to add some white space so that the linter is happy and then just kind of clean this up a little bit as well likewise what we'll do in the future in this service is to represent an ethyl in the constructor that sets our username as well but we'll need to look at how we're actually storing the users that sign up for our application inside of our live database which is running sort of in parallel if you will with the firebase authentication side of things so get timestamp will be a method that we need to write and all that we want to do here is to kind of return something in a a date format that we can then parse using an angular pipe in the template and so the way that this is going to work is going to have a constant value for a new date and then I'm going to have constant values for both a date and the time and then we're going to return those together so take a look at how to do that so will have a constant date and that's going to be now and we'll just use UTC time for this so we're going to get the full year and then we're going to add a slash and you can see we're just going to construct the format of a date and then we'll now get UTC month and I believe that zero indexed so for instance January would be like zero so we need to add 1 to the value that gets returned from that method and add another slash here and then we want to get the state which gets the day of the month ok so that represents the date aspect of our time stamp and then let's represent the time so get UTC hours get UTC minutes and get UTC seconds and go ahead and remove the plus 1 here that I copied and pasted and replace our slashes with colons and then we can simply return date plus of space plus the time all right there may be a more elegant way to do this I just wanted to you get something that works and so this should work so that takes care of our get time stamp method and now I need to take care of this get messages method go get time stamp was purely JavaScript just kind of going out and rendering a time stamp to place on our message but the get message is method this actually needs to talk to you firebase so that's a little bit more interesting so it's going to be of type firebase list observable and we had it as a array of chat message and so we're going to write a query here just going to comment to explain what we're doing we're going to write a query to create our list binding there like our feed I would say this message feed binding and so we're going to use angularfire database in order to return an observable that we can subscribe to here so we'll return this that DB list so we have the ability to return an object or a list and it's nice to be able to return a list to work with when we have a set of objects so we'll have look in messages and then here we can actually specify a query and so we can for instance limit to last so say we want to just get the last 25 messages that were posted and we want to order by key true so you can imagine depending on the type of application you were you were running like how you wanted to order a list of observable objects you know a list of this case messages coming back from firebase like say you had an application where you had some type of voting functionality and you wanted to display posts with the highest votes first then we could write a query to order by that particular property perhaps as we display them in our case we want to only grab the last 25 chat messages that were posted that way we don't render like an enormous amount out to the page and also we want to order by the key again if we wanted to add more complexity to our application we could dynamically generate how many messages we're showing just implementing a sort of pagination type feature but in our case we're just going to grab the last 25 ok so send message should now be complete I'm just going to go ahead and fix a typo here and then just to verify I'm going to console.log call send message let's take a look if this is working we'll head over into our app and we're just going to type in hello here and so we're getting an error on the key down because we haven't written handle submit properly so go ahead and minimize this and I'll head back into our chat form component at TS and because we have a typo here where I said handsome this list needs to be handle submit first of all and then we'll head back into the app and I can type without errors now and if we type in hello and click send so we're getting cannot read property email of undefined and so yeah what's happening here if we you can see this is coming from our chat service so if we come back down here we head into our chat service notice that I have a constant email here and setting it to this user object to that email this user object is only going to get set if we are authenticated and so so far I'm not authenticated and if we just want to see sort of a bare-bones non authenticated version of this working I can just actually comment out with the code that's in our constructor here and then we'll come down to this that email and I'll comment this out as well and we'll set it to a string just to display and let's see if let's see if we can get to post the test email and now we're getting an error that the argument contains an undefined property in messages username let's go ahead and minimize this and we can kind of lock that out as well scroll up and yeah it wasn't setting the username yet and so we can do is go ahead and lock this property out as well so we can comment this out for now and let's see if we can do it to work out so we didn't get any errors logged out to the console here and you can see that we hit our console log called send message and in fact we head over to the firebase console we should be able to see that the message gets posted in a messages child here so we're posting that hard-coded string for the test at example.com and the message as well as the test username here once we have all of our authentication set up of course the email and username will be valid and correspond to whoever is is posting this but we have confirmed that we can post the firebase from a forum and so that's a good first step so I'm going to go ahead and minimize this and I think would be interesting at this point to go ahead and get our feed working that way when we post messages here using the forum that we can see them out in our feed I'm going to go ahead and minimize the window we'll leave these hard-coded values in here now until we revisit this and wire up authentication so let's head over into our feed component and will visit seed component Det TS and I'll go ahead and paste our imports here and so we're going to bring in on init and on changes from angular core and then we're going to bring in our chat service our chat message model and observable from rxjs so our feed will have a property for that and it will just be of type any for now and we can go back and make this more explicit later in our constructor want to inject an instance of our chat service and I'm going to do a few things here I'm going to implement on changes and we can now that we have implemented this interface the compiler is going to let us know that we need to have a method entry on changes called awesome and then we're just going to do something really simple here we're going to use the chat service to set our feed so we'll save this stat feed because this that chat that will have a get messages method and we're also going to do that on changes so if I hit f12 on get messages that'll take us over to our get messages method that we wrote in our chat service and so you can see that get messages will return an observable a firebase list observable to be exact and so you may be wondering do we need to subscribe to this and the answer is yes we do need to subscribe to this but I want to show you a kind of neat way that you can do that actually in the template so let's go into the seed component HTML I'm going to go ahead and remove the boilerplate code now create a wrapper div here just called feed and then we're going to have an NG for and so ng for star and g4 this allows us to loop over one of our properties and create multiple instances of a Dom element here and so we're going to create multiple divs here by saying let messages or say what message of feed we'll say and then we're going to pipe a sync with class message and this pipe async here this syntax this is actually going to subscribe to our feed object which is getting set here our feed observable which is getting set here when we make a call to get messages and so I could subscribe here in the component level let's sorry I could subscribe here by calling got subscribed and then I wouldn't need to subscribe the template level but this is just kind of nice terse syntax for subscribing to this feed observable and then of course inside of our loop here I want to call our app message component and that app message will take an input chat message and it's going to be set to the message that is an individual instance of what's getting looped over in our observable set so just go ahead and close this and so just so that's clear this chat message input that we're passing into this child component app message this is coming from our observable feed and the observer will feed here contains an array of our message objects and so for each message we are going to pass that message into an instance of our add message component via this one-way data input binding so if we go back once again into our feed component file where we have this feed which I could set to a firebase should probably be explicit here a firebase list observable of chat message array and for that I'll need to import firebase list observable from angularfire to slash database I'm going to go ahead and do that so just copy that import from our chat service and I'll paste it over here in our feed and we can get rid of the reference to the database okay so we have our firebase list observable which is going to be an array of chat messages and so we are going to get those messages and set it through our feet object that we're going to loop over inside of our template and pass each instance of that chat of that chat message into our message component here and we're going to specifically pass its input via this chat message binding so hopefully that makes sense we'll head over into our message component here now and we'll go ahead and create an input binding to that message so that it can receive it so inside of our message component that TS file I'm going to go ahead and paste the imports here so we're bringing in a component on an it and input which we just talked about and then our services and then our chat message object and for now we won't need to inject anything into our constructor but as you might imagine in a little while what we're actually going to want to inject our authentication service so that way we can actually determine what user is posting this message in order to style it differently depending on whether or not it's the users own message or it's a message coming from a separate user in any case let's just go ahead and bind the simple properties that make up the presentational aspects of this component so let's go ahead and pass chat message as this chat message to our on a knit method and we'll go ahead and create that here if you recall that's our input so the way that we actually do that is we have this spiral input chat message and we set it to a type chat message and now let's think about the various things that we want to display on each message in this component so we're going to have a user email perhaps which would be a string have the user name as a string we'll have the message content string and the timestamp will be a date okay so we'll have a few more properties in this component probably in the next video we'll look at for instance whether or not it is the users own message which will have a type boolean and that that's going to allow us to dynamically style the the message but in any case we'll just go ahead and start with the basics here and so we'll set this that message content equal to chat message that message so that's the string that gets passed from the input form and represents the content of each chat message and then we'll have the timestamp so you go to chat message dot times since she should have probably mapped me used to be one-to-one here and and named everything the same but in any case that's something that we could clean up later and some reason I accidentally deleted that property okay and then we'll have the user email equal the chat message that email and then the username is the username property on our chat message object okay so so far so good so when our message component is initialized in other words when an instance of a message component is initialized we're going to set the various properties that we have on it here so the email name content and timestamp two properties that are on this object chat message which gets input into this message component just to revisit that once again you can see that we are passing it via this one-way data-binding here chat message inside of our feed okay so I'm going to go ahead and save the feed and we'll save this and let's go ahead and take a look at our page so it looks like our feed component disappeared here but we're not actually getting anything out on the page also not seeing any errors so let's go ahead and see if we can debug this it's going to head back into our app here and what I'd like to do is to go into the feed component that TS file and just go ahead and console that log see is initializing and go ahead and take a look and so you can see we're hitting that okay and so get messages is getting called and so if I f12 in to get messages and we can go ahead and console.log inside of what's getting returned here or just before it returns calling get messages and so that is getting called so now what I'll do is I'll go back into our feed component at HTML and will write out just a hard-coded string here there's a paragraph tag and go ahead and take a look the page we can see message here which corresponds to this ng for loop which means that we're getting one back so if I type in another thing here okay so we're getting another one back and it says message works twice that's actually interesting let's go back and take a look at our message component at HTML obviously so I had just haven't filled out the message component yet sorry about that okay I forgotten what I haven't haven't coded up yet so let's just go ahead and build this really quickly so we're going to have a message container and let's just build something like ultra simple first so for instance I will have a paragraph tag here and we'll we'll have something for each of the various properties that we wrote so we'll put out the user name and I'm going to go ahead and make this a little bit shorter here we'll have the timestamp and the message content and we'll just look at that for now go ahead and go back into our feed component and I'll remove this hard coded message here and so let's take a look at the page so yeah we're getting the user name out here test user as well as hello and then the test user saying hey protect another message here we can see that we are getting another message so yeah we can see that the basic functionality in terms of posting messages to firebase and then querying them and having them get returned to our page here is more or less working one thing you'll notice that if we type messages here into our form and hit enter notice that the form itself is not clearing so that will sort of expected behavior for a chat application that when you post a message click send or hit enter and post the message and the text in the input field disappears so let's go ahead and fix that really quickly if we head into our chat forum component TS file when we send our message from here after we've called send message I want to set this message back to just an empty string and so if we take a look now and I scroll down and I hit something I hit enter you can see that the box has emptied and I'll go ahead and going to make this font a little bit smaller here so that we can see that when we post we're posting a new message and our input form clears all right so the functionality is starting to come together if you've made this far then we have completed I'd say maybe 30% or so of the functionality of this app so that's great but it does look pretty horrible right now because we don't have any style sheets set up so the first thing that we're going to do in the very next video is to make our application looks a little bit more decent by applying some stylesheet and we're actually going to make extensive use of flexbox CSS in order to both make this application more responsive and also make the layout kind of clean and allow us to do things like have a static input form that stays at the bottom of the screen scroll our feed independently and have a static header that stays at the top so yeah I think it will be some pretty cool stuff nice clean design and the CSS won't even really be all that complicated so stay tuned for the next video when we pick it up here

Channel: Wes Doyle

Views: 64,389

Keywords: angular firebase chat app, angular firebase tutorial, angular firebase authentication, angular firebase login, angular firebase auth, chat app, chat app tutorial, angular 4 tutorial, angular firebase, angular firebase chat, angular firebase auth tutorial

Id: -j0LVc-zLh0

Length: 53min 18sec (3198 seconds)

Published: Sun Aug 06 2017