Angular: Create Chatroom & Realtime Usersearch by Username | Realtime Chat App | 11/17

hi and welcome back to the next video this is video 11 and here we'll handle just angular stuff so create a chat room and a real-time user search with angular material autocomplete so basically we are creating like a chat room with a name with a description and we are able to add users and we can search the users by the username very query the backend directly and then we can add them or we can also remove them and then we can create the room and this gets displayed on our dashboard we also do some minor refactoring and now we have a quick look at our video structure which is always we have a look at our video outcome then we read we use a story for this and then we implement the user story and close it let's have a quick look what we are building in this video here so here we can see we have our create room we can give the room like a naming or name so we can let's name it wednesday or maybe i already named it like this so let's name it friday we can give it like a description for example for the name if we have like nothing displayed this is required we display like an error so now everything is fine and now we can search a user by his username and then we make this gets filed up like a request against our backend for example i can search for a i can just search for sam for example so i could cut or add sam to my room like now i could able to create a chat room now with button here the button here is valid or i could also remove him again and then this gets invalid again so when i add for example sem i could for example add like walter also and i create a chatroom and now we have here our chatroom created in our list and our dashboard and you can see it here now we have all the users so the username user walter sam and also me that created room are inside this room and for example if we are being logged in here with sam we are just having the rooms 1 3 4 and 5 because here in room number two for example there's walter and not sam so now we have like a room creation here and we are able to add users by a real-time search against the username from our backend so let's have a short look at our story here first so this is a story for video 11 and we are just tangling angular stuff here um so you want to add chat from creation with real time user search so basically you want to add like a new chat room and we also like we implemented in the last video the next api the search by username for a user and now we want to use this here so that we want to be able when we create like the chatroom we want to be able to search for users by the username and then add them to our chat room so here we can use this and so our story is pretty simple but the stuff behind in angular is a bit more complicated so as a user we want to be able to create new chat rooms the chatrooms should have at least a name and one user and always my own user that i create the room with gets added in the back end as you remember because there we strip the user from the jwt token and we add then this user also to our users array and we should be able to select the users by a search for the username so the acceptance criteria are we want to create chat rooms we can search in real time for users by the username while we are in the room creation state for example we also can remove users before the final creation of room so for example if i add the user thomas to the room while i'm creating the room when i decide i want to remove him again then i'm should also be able to remove this user and can add maybe like wall that walter and so on like other users and if there are no rooms i want to display it like a hint on my dashboard so that i'm not being confused so when we can i think start with implementing one of the first things that we can do um we can our json file allow strict so that we can also use sometimes null values which makes it probably a bit easier when we have to reset forms and so on so first we can go and modify some of our services so we have like here our threat service and at the moment we are um have it commented out our create room so we now want to do this here and then as input we get like a room and then we create a room and we could also you see our material snack bar so we could use the see a private snack snack uh so that we can inform the user that the room was created so we can here simply copy and paste a bit from our user service so we can just use our snackbar.open here and we can just refactor this or reuse this and later we have to refactor this maybe in another video let me move for example all the snack bus stuff to a snack bus service and we can also move the services outside of their modules because now we have psych or we are going to have to access in our private module also the user service and then this is yeah not ideal so we want to say room dot name created successfully so basically when we omit this event then we say this room was created successfully we would display it as a hint close duration two seconds i think on the right and on the top side and then we can use this statehead our create room component and for maybe the get my rooms we can also add like here this is like a turning observable for the room peggy nade interface so as you remember where we have the items and the metadata we're just like the page and so on because it's paginated and then we can also go and do like some stuff in our user server so at the moment we are just having here our create we create a user but we now also want to be able to find the user by username so we can say find by username and then we have like the username which is a string that we get and then we want to return an observable and we set we return an area of users and this is basically we make get requests against our backend and we get like the user interface area and here we can use like the backticks to make it um easier and understandable so we go against api users and then like we named our s3s endpoint was defined by username and then we have to add our query parameter so we can simply say so and then we can assign it to the username and then we make a get request against our endpoint from our backend so now we can use this and also later in our service in our component so now we can go to our private component uh private module and first we have to import yeah like some stuff so what we need is um we also need here like the reactive forms module because we are going to have a form for our room and also for our users we have a meta form field module so we need form fields for our reactive form we also need inputs we're going to have the users displayed as met angular material chips um so we can just google it angular material clips and this is how you can for example display text also on but here we can for example if we add like a user we can just display the username here and we also have easy stuff to remove the user so we can import this because we want to have something like autocomplete we need the autocomplete module angular material autocomplete because where for example we type in the username and then we want to for example like here if you type one then we want to filter or query our backend and have displayed all the users that have for example an a in the name in the username or a complete username and so on so we have our autocomplete module and we also have to import the matte icon module because when we want to display like um like removable stuff for the trips i think here this this x for example this is an icon so we need the angular material i can module we can simply import this also and then we have like all the stuff that we need in our private module and then we can here close this here and now we can go to our components and you can see we have our dashboard component and our create room component and now we can for example go to localhost 4200 so to our public stuff and we can log in and now you see we have here like no chat rooms at the moment so as you remember in our store you wanted the event to display like like a hint so we could go for example into our dashboard and then here above our selection list we could add like a span a span element around our list and around our paginator and thus we just want to display when we have like values so we can make like a simple ngif and then we can use our rooms so because you see here our rooms when we have items or we have total items and then we can say rooms.items dot length and if this is bigger than zero so if there are items then we want to display this else we want to display for example no rooms and then we can very simply make a entry template here beneath and want to display this instead so we can add here the new rooms and then this will get rendered inside here if there are no rooms so we can make it here like a diff and then we can for example class display met error and we can say no chat rooms for you so far please create one or get invited now we can look when we reload the page now you see on the left we display like no tractors for you so far and we also have no [Music] paginator here displayed because this is inside our span element so now we can go on and we can probably also do some little bit refactoring here to our rooms so here we can also say we get like an observable um from the room peggy nade interface so exactly like we specified here so that we are like a bit more safe and on our interview on init we can also call our emit paginate rooms just to make sure that we always try to catch all the rooms that we have and now we can go to our create room component and now we have to adhere like our form so to make it a little bit easier and faster we can like copy from our login form all the stuff here just to our private [Music] component so to our create room component and then we can also copy and paste the css so that we can save us some time because this will take a long time enough and then we can just for example name this class not register but we could name it um [Music] create our dashboard because this is assigned to our um back button to the dashboard and here we want to go then to our dashboard so we can say go to dashboard and now we have to add like all the stuff here that we need and the margin we can probably also make a bit smaller for the room creation so now we have to the first thing that we have to do is we need like our form so in our component here we add our form so we say forms from group from angular forms and then we can say this is like a new form group and then we have some options and this is of one thing the name so new form control initial value is null and then we say this should be required otherwise the form is not valid and then we have like a description which is also a new form control initial value null but this could be so we don't actually need this and then we have like the users that we want to add so this here is when like a form area because we can have many users initial value is nice and we want this but to be required and then we have like our basic form and now we can for example rename here so the first one is not email but name so this is from type text our first input field our placeholder is for example um yeah we could just name it name and then we have here the name and then we can replace to display our error that we want to display like a matte error if our name was touched so if the user clicked into it for example and got clicked out of it and if it has an error and so um the same now it says it's not finding this so we have to make some getters for this so we can say get name you want to return a form control so we return this dot form dot get name as form controller and we can do the same for the description return this dot form dot get description s from control and we can also do the same for the user so we can say get users and now we say form array and we return this dot form dot get users as form array so now this error here should be done and on the end we submit so if the form is hit like on our submit button here then we want to execute the login function before but here this is actually create chatroom and then our should not be called this but for example create and we can just add here like a create function where we then later send the request or back to create like our new room then our second field so the first was our name for our chatroom the second is our description so our form control name is description and then we can say if touched and has error required then we can say description is required and if the form is not valid we can say please fill out all needed information so this is basically the same and we just want to enable the button if the form is valid so it is disabled if the form is not valid and then we can say for example create chat room and now we should have like the basic stuff for our um yeah chatroom creation let's have a quick look in our front and how it looks so when we click here the button create new room then we come to our chatroom creation and now we can enter like a name in the description if i go out of it it should display normally error for name for example because it is required for description it is not required so we can actually also remove this error here and then we are not able to click on the button because the form is involved because it has no users in their users area so now we have to add like um the user search against our backend and to add like the users to our form area for our form group so we can do this for example in a new component so we can open here like a new terminal we can see into our front end and then we can generate with the angular cli like a new component into our private module into our components and then we can name this component for example select users and then we will have here like a select user's component and this is for example what we can then use here beneath our form field we can say app so we can use our selector app select users and display this here so you see it here the selector on our select users component is this here so with this we can use our component here now you see we have rendered it inside our create chatroom component and yeah now we have to add variable like the whole stuff for user selection so maybe one of the first things that we can do is we can say we have like here an input from angular so that we can get values from the parent component so create one room component into our select users components to the child component so this is like an input and here we say this is our users interface so we can get users from our parent component from our create room and can display them here so that we can have all the user stuff in this component here but we are also with input and outputs connected to our parent component so we can have here like some outputs so we can say we want to have an output if we add a user so then we have like an event emitter from angle from stream but from angular that we can emit like an event then we act like a user so the type is the user interface and then we have like a new event emitter for user interface and the same goes if we remove a user so we say remove user then we emit an event and also user interface so the id idea behind us here we can add like a user if we select the user and add them to our form then we make it like an output to our parent create room there we add the user to the form and also if we and then we display it here in this form also because we have it like an input so this gets updated and we have remove user if we remove a user then we also want to do this in our room form so this is handled with input and outputs so now we can add some stuff in our html so we can make all around our met form field and then we have like an input where we want to specify where we want to type in like the username that we are searching for or just um the name or just like an a just like a like a letter whatever we want to do so we can use the normal angular material input here met input we can say placeholder is for example search user by username then we can find it to make autocomplete you can name it auto then we have to create this later and we have here like a form control that we binded to and this could be named search username and then we have to create this also in our component and herefore we don't need a form so we can just say use search username and this is like a new form controller and then we can use here the angular material autocomplete and we can say here auto and this is auto complete matte auto complete um yeah inside this we can make like a ng container to this oops container to display some stuff and here we can simply display matte option and this is like the list of users that we get in return from our backend so we can say here we want to iterate over the users and then we can say let user so we just iterate over the array of the users that we found and so we can say or we can name it filtered users um so we have to create this you also so we can say filtered users and this is basically just an area of users so like what we get back from our service and here we can also assign like the value this then the user and in our matte option we could have like a span element where we display the username so we could say here we want to display the user.username and we can also display for example display the id of the user and we can just say user dot id and now here we have add like the search um when we type in something so let's have a quick look here so now for example if i type in thomas i want to find the thomas user um so far it does not work but of course we can use then here our search username form control so we can just say this dot cert username dot value changes so every time the value changes this will get triggered when we subscribe to it so then we can simply pipe or before we can subscribe to this so to make the observable like hot and then we can use something called d-bonds time so that um in milliseconds from 500 milliseconds like half a second um so that um between the keystrokes so if i type th for example for thomas and then i do like 500 milliseconds nothing then this gets fired we can also say distinct under until changed so this will also only together appears like it's like a change in the data and then we can make a switch map and here we can make the call to our back end and we have to import the right switch map from ax 3s and then we have here like the values then the username that we type in so it's a string and then we can just go against our user service that we have to define our constructor so we say private user service is our user service and then we can say the user service dot find by username what we just created and we give him the username and then we can pipe this outcome here again and with a simple tab we then get like a user's array back so we have like here the user interface array and then we can set for example our filtered users are the users that we get back from our backend and we have to add the tab so now we can try if we can search so nothing happens let's have a quick look so we have to search for username yeah i think we need like a display function for this so this goes for the met autocomplete and then we can use like a this play function whatever you want to name it so how we want to display them here so we then can go to our user component we add a display function here and so this could be just our user user interface and then we can say if we have like a user then we return the user dot username and as we return nothing let's see if we even make a request so find by username api users find by username t so this is firing are we getting i can answer so here we get like two objects back for thomas and the walter so because both are having like a t inside and now the question is why can't we display it maybe 10 array string contains an indented character okay let's search for the error so this here i think seems fine and now let's go through the html so we have our matte form field we have our matte input we have our placeholder search user by username matte autocomplete is set to autoform control to search user name we have our matte autocomplete automatic autocomplete we have our display width we have our display function we have our entry container we have the matte option ah there you see it here and now let's see if it now works yeah you see now we get like the answer from our backend so i could also search for walt when i get just the water and now i will have the value here displayed by the display function such as the username when i click on it and now if i for example do 500 milliseconds nothing then the search fires up again so this seems to work quite nice and now we want to add like and we selected the user we want to add them to our form so now we want to can yeah we need to use our button so we can say angular material button and now if we set the type to submit or if we said no type then we will get an issue because when we have in this parent form for create chatroom we have two buttons that will be triggered by submit by the parent form so we have to set this specifically to button so that we don't fire it here and then we want to do something on click and this could be at user to form so this is what we need to add to our component and then we can simply name this at user and then we add this function here to our component and then yeah we have to see how we can get the user from our select from our met autocomplete here that we select um so that we can add this here so there is something like for our angular material autocomplete when you selected an option then we can do something so we can say set selected user and we can add this here also set selected user and then we have here like the user that we get from user interface and then we do something with it and we can simply set this here when we say event dot option dot value so that we get the value here from the user and then we have to select or set the selected user here in our component so we could for example say selected user as a user and initially we have it now and then we want to set the user so we can say this dot selected user is user so we set him and then when we add the user to form so then if we hit like here our angular material button at user then we execute this at user to form so then we want to have like an output so we can simply say this dot at user so because we named our output at user then we emit an event and this is then basically simple our selected user so then we can add this in our parent component to our form and afterwards when we selected this we want to reset our filtered users we want to reset our selected user because we already added in the theme then and we want to reset the search username form so we set the value to ni and now we can see when i type it in here thomas when i can say at user then we get get cleared again and what we can also do we want to just disable or enable this button if we have like a user so we can say here this is disabled um when our selected user is not chosen so if this user here is selected user is nile then our button is disabled so you see it now he is disabled when we set the value then it gets enabled so um now we have to catch this value here in our create room so first we can see we have here like um [Music] what we want to bind it to our users so this is our user's value as you remember we have made here like a get for the users and so then if we just insert like users then this is like the form con error so we want to insert the values and then we can also do something on add user and this is we want here how do we name it we can say at user init user and then this is basically just the event so we now have to do something here called add user [Music] and there we want to just push into our users here so we can make our get so this dot uses here then we push and here our user form control that we get here user form control and this is like form control so we push now our user form control into our array and then we also have like here before we have to emit our user so we have to initialize the form control so we can say init user and this is getting like the user and then we return a new form control where we have like the id is the user dot id then name the username is the user.username and the email is user.email so i think if i remember correctly now in sps backend we are just looking for adding the uses for vid but yeah we can just use receiver that's not bad and when we have here like that user we also can add like a remove user and we can for example remove a user by his id and then we can implement this later when we have it in our client component so when we now add a user we so if we catch like a event at user from our child here from our child component then we knit the user first that we get from our client component and then we add the user to our array and since we always pass in our user's form array then this should get displayed in our select users and at the moment we are not displaying any users so we probably should change this so what we can make here is like we met make a mat ship list and then we have our net clip and here we can just iterate over our users so we can say let user of users because this is our input array so you see it here input users and then we can display here for example our user dot username and we can also say we only want to display the matte chip list if our users dot length is bigger than one and else we want to display the no users so then we can at the bottom here make an entry template and we can say no users and we can simply display like in that error no users added so far for example and then we can go to our form no why are we not getting this here it should be bigger than zero hmm let's see so we have ah entry it should be written correctly and now you see we have no user added so far let's try if we can add for example walter and now you see we have added water and this is and then we have reset the field so this is basically with our met form field when we search with the input username we listen to the value changes here so if there's for 500 milliseconds not changing anything um not not again having like a keystroke and nothing and something changed then we make the request against our back end and then we set the filtered users and the filtered users are being displayed here in our container as met options so this is like this field here and when we select one then we say option selected and we set our selected user here set selected user that we have here to the user that we selected so for example here to sam then this button here gets enabled and when i click it then we have the add user to form called so you see it here add user to form we get then we emit like an event to our parent component the user event with our selected user then we reset all the stuff here and in our create room we catch this event here the add user then we knit like a user and add it to our stuff so here first we need like a form control and then we push this into our users area here so now we also want to like be able to remove users so matrips have like a very simple thing for this to do so we can yeah use this and don't have to reinvent some stuff so we can just adhere like removed and then we can say like remove user from form and this is when the user here so we also have to add the see a remove user from form and then we can display here also on that icon and this can be the cancel icon and this has to be met chip remove and then when we remove the user from our form here we want to also like emit an event and then we have like our second output then we remove user so when we want to say remove user dot remove user dot emit so we emit like when again an event to our parent component with our user here and then we have to catch our event so we say remove user and then we have to do it so we can say remove user from form now we can just say remove user and here we give him the event services like the user and here we have at the moment done nothing and we can change this event to event dot id so to our user id and then we have to remove the user by id from our users array from our form so we can just say this dot users then we can remove at an index and since we are not knowing at which index it is we can say this dot users dot value then we can try to find an index and then we get like our user and then we can just say where user id is our user id here and then we want to remove this and this index so let's see if this will work so when we say we have like here a chat for wednesday we make like a sample description then we search for a we have sam we can add the user now you see we have here our cancel icon displayed so if we click it then the user gets removed again and performs invalid if i add send again then our form or our button is enabled we can create a chat room yeah i think at the moment here you see it here our create function is still empty so we have to adhere now also the logic so we say if this dot form is valid then we want to do our stuff so then we want to call our chat service that we have to use in our constructor so we use private threat service chat service and then we can say vista chat service dot create room and then we can use our this dot form don't get raw value and afterwards we could basically navigate back to our dashboard so we can say we need our angular router and we need our activated route so that we can make like go to the parent route so then we could say this.router.navigate and we could go to the dashboard again and we have to set this relative where am i relative to to our activated route so the current route that we are at and in our chat service in create room we also then send like a snack bar so let's try this again so we want to create a room let's name it week and description sorry reloading um let's name it weekend description we set like a user for example we search for sam we set this user we create a room now you see we navigate back and then we immediately immediately get displayed like our room name weekend id1 and now you see here our room is having two users one sam and the second is mine where i've solved the account that i'm logged in so i could like make like another room say monday um description and now i'm not adding sam but i'm adding water now we have like another room where i'm with walter here i am with sam when i can add like another room let's name it party and let's name big party and now we add like sam to it we add who else do we have here and water to it so now you see we have another room where we have all the three users so me sam and walter and now if i make like a private room a private tab and i log in for example with sam sam.com and then you see sam is just having two rooms so because um sam is just in room three and one you and walter is here for example in room two so here sam is just getting displayed room three and one so where he is at so for example if we now create like a room let's name it test test description and then we try to add me we add the user we create the chat room then this just gets updated on re reload so this is something that we have to fix in the next videos because this should also yeah like catch the event rooms um so that it gets updated immediately like in real time so since we are not using here this energy in it we can also remove it from the component so that we are a bit clearer now we can check again if we see anything here and we can reformat all everything but it seems so white so far so good yeah let's reformat all the stuff here there's like a simple short key i think it's alt shift and f and we will studio code this will handle like the reformatting for you and so yeah now we have everything here so normally we subscribe to our rooms event in our dashboard component so this normally yeah let's see later on the next video when we refactor this probably all the stuff we can look for this but right now we are now able to create a room so now we can track against our story if we have done everything that we need so we can now create like chat rooms we can search in real time for users by the username um we can also remove users when we are like in the chatroom creation on the creation component and if there are no rooms we are displaying like now a hint on our dashboard so then we can stop our docker and we can commit all the changes so this is video 11 edit room or let's say angular edit room or chat room creation and user search with auto complete and we can push it

Channel: Thomas Oliver

Views: 295

Keywords: javascript, typescript, nest, nestjs, nest.js, typeorm, git, gitflow, node, development, api, observables, rxjs, nestjs7, bcrypt, jwt, authentication, git-flow, gitFlow, docker, docker-compose, pg-adminer, debugging, hot-reload, angular, angular material, angular lazy loading, material, realtime chat, real time chat, chat app, realtime chat app, live chat, live chat app, nestjs8, nest js 8, nestjs 8, NestJS8, NestJS, nestJS, postgres, angular 12, reactive forms, login form angular, register form angular

Id: WpLb2YH97D8

Length: 55min 21sec (3321 seconds)

Published: Sat Jul 24 2021