Angular 5 and Firebase: Building real world app features | Flavio Oliveira | Skillshare

Playback Speed

  • 0.5x
  • 1x (Normal)
  • 1.25x
  • 1.5x
  • 2x

Angular 5 and Firebase: Building real world app features

teacher avatar Flavio Oliveira, Web Developer and Instructor

Watch this class and thousands more

Get unlimited access to every class
Taught by industry leaders & working professionals
Topics include illustration, design, photography, and more

Watch this class and thousands more

Get unlimited access to every class
Taught by industry leaders & working professionals
Topics include illustration, design, photography, and more

Lessons in This Class

29 Lessons (6h 54m)
    • 1. 1.1 Course Intro

    • 2. 1.2 Requirements

    • 3. 1.3 Setup

    • 4. 2.1 Authentication Module Foundation

    • 5. 2.2 Signin

    • 6. 2.3 Signup

    • 7. 2.4 Reset password

    • 8. 2.5 OAuth Integration

    • 9. 3.1 User Module Foundation

    • 10. 3.2 User List

    • 11. 3.3 User Profile Detail

    • 12. 3.4.1 User Dashboard part 1

    • 13. 3.4.2 User Dashboard part 2

    • 14. 4.1 Blog Module Foundation

    • 15. 4.2 Post Dashboard

    • 16. 4.3 Post List and Image Uploader

    • 17. 4.4 Post Detail and External Libraries

    • 18. 4.5 Post List Item

    • 19. 5.1 Gallery Foundation and Uploader

    • 20. 5.2 Gallery List

    • 21. 5.3 Gallery Detail

    • 22. 6.1 Module Foundation

    • 23. 6.2 Chat List and Input

    • 24. 6.3 Chat Thread List

    • 25. 6.4 Chat Final Touches

    • 26. 7.1 Navigation

    • 27. 7.2 Theming

    • 28. 7.3 Deployment

    • 29. 8 Conclusion

  • --
  • Beginner level
  • Intermediate level
  • Advanced level
  • All levels
  • Beg/Int level
  • Int/Adv level

Community Generated

The level is determined by a majority opinion of students who have reviewed this class. The teacher's recommendation is shown until at least 5 student responses are collected.





About This Class

Learn features that every app must have: authentication, blog, portfolio, real time chat with Angular 5 and Firebase

Meet Your Teacher

Teacher Profile Image

Flavio Oliveira

Web Developer and Instructor


I am a web developer and code advocate, passionate about programming languages such as JavaScript, Go and Rust.

I've learnt to code about 17 years ago (HTML). It started as a hobby and for the last 5 years coding has been my full time profession. My focus is on the Node ecosystem and it's integration with modern front end frameworks. 

Currently I work as a freelance web developer while I continuously learn new stuff and technologies. I'm also an online coding instructor here on Skillshare and on Youtube.

My main focus is on practical teaching and I will help you to take your skills to the next level through real-world projects. 

I think coding should be a basic skill taught as early as possible. It is a s... See full profile

Class Ratings

Expectations Met?
  • Exceeded!
  • Yes
  • Somewhat
  • Not really
Reviews Archive

In October 2018, we updated our review system to improve the way we collect feedback. Below are the reviews written before that update.

Why Join Skillshare?

Take award-winning Skillshare Original Classes

Each class has short lessons, hands-on projects

Your membership supports Skillshare teachers

Learn From Anywhere

Take classes on the go with the Skillshare app. Stream or download to watch on the plane, the subway, or wherever you learn best.


1. 1.1 Course Intro: Welcome to my uncle and fire base course where we teach you. They must have features for Europe, and you learn how to get your projects up and running while getting faster at building my publications. My name is flab you an OBE instructor for discourse. I started my career in one developing about five years ago. Throughout these years, I've added quite a few excuse to my resume. Currently, I'm working as a freelance Web developer, and I also run a YouTube channel about Web technologies of design discourse for anyone who wants to learn about application design and how to kick start the building process by the end of the course will be able to design, create and deploy any applications to them to the Web. I'll teach you how to work that your application and how to create the key features that any modern website must have. You take a step by step approach and each module we will build a re award feature that is essential for the success of your projects. That a student for this course is an existing Web developer looking to increase his or her excuse in the field. The students must have some knowledge off html CSS and JavaScript. Also some experience with the angler framework. Feel free to check out the course descriptions and let's get started. 2. 1.2 Requirements: So let's get started with our environment We need to install the angler cli If you go to the sea allied dot angler that I owe, you can get the information on how to stall. If you're not sure if you have it, you can use the energy industry command. We're also gonna need no Js Although you won't be doing any service side holding, we still need it so we can use the NPM the note package manager. If you need to install, just click on the loads and here you can find these dollar For some systems, I have the currently stall you can use any you prefer. Down here, you can find the installation for rinos looking here down the distress you can check if you are and have it installed with them. No, that's very common. And PM dusty abusing yard instead off NPM. But this is totally up to you. If you want to use it, you can go to this website yard, pick a jihad Khan and just click installing and you find these dollars as well. I have some 1.3 stall We're also gonna need get if you're not using it yet you definitely start. It's like I must have to. For Web developers, he ended the loads. You can get these dollars well back in the front page. If you need toe learn, get or you're interested. There's a free get book. It's free to download. You can get it from this page. I'm going to use V s code as my Cody editor. It's a really nice round. Full featured has integrated terminal. You can use any story you like. This is my preference. If you want to use this one, it's good dot Rejoice to do that. Come and hear the drop that we can get this dollars well, and you also gonna need a firebase account. Far base is free to use. It's really powerful. Back and service are really recommend Its simple, super simple to use. Oh, some parts. It's full feature. We're going to use the authentication cloud storage going to use the hosting. You can use the cloud functions afterwards, toe pump up your application. We also going to need it that the base is a real time that the baby is really good. If you check on the pricing for a fire base they have this practical. Um, this is more than enough for you to gets going with your up without even putting your credit card. So just great our content. Let's get started. 3. 1.3 Setup: before we create our up, we need to install the angle. RC Ally, you can check if you're if you're a heavy thing, start with the engine Cash V Command, Do we still just use the NPM install command, give it our global flag and at bungler his life Cli so an honest great are just navigate to a folder. Where you gonna put your project? I'm gonna keep my eye on the desktop. You can use the clear command or control l toe clean your terminal and all issues the engine you common to create our up. But before less bus help flag as I'm not gonna covert testing this course we will use the skip test flag or that s t for short. But there are a few other. There are a few other flags that you might be interesting for You. For example, the online complaints or in line styles Service worker routing for now, let's go ahead and create our up engine. You give it the name I'll call my engine Fire after angler fire and I will use this kid test flag the short hands. Come on. As you can see, Marcel, I used yarn we start the Packers when you first see some defaults toe npm Let's clear Termino and I show you how to set Young as the fault to set Yonas default package manager You can use the command engines set Give it a global flag package manager equals er the next time you used to engineer it will east all your dependencies with er not a city into our application. If you're using the escort, you can you school that any through open in Dad's store for you. Here we have our source folder and within that we have the up. That model is the root off her application and the opponent is the rooked competent. Every component in Europe will flow through here This elector you can find here in the index that html inside its body talk and this is the top level component in Europe. We're going to add the material design components in our up to give the modern look. It is also to can use it. It seemed integrated terminal here in view. If you're going the view menu, you take a look to terminal. Let's first generator Mateo material modules, so can and its components you can use the common N G generate module. It's call it material. Give it the flat flag so it will not create a folder. And let's added toe the up module. Get as you can see did. That's flat puts your modules in the root of your up. We're gonna create a court in a shared module next. But this time, let's use the shorthand G for generate and for module split the core unless also added to the APP module. This is the same as the 1st 1 without the flat knowledge. Also create a shared module. Now, you know, up module have the core module imported and we also have a shared and a core module. Both has its own folders. Now let's have a look at the Machado. I'm glad websites here to get started. You have some instructions on how to set it up. You're gonna we're going to add the material and the city que dependencies with your let's go back in our space in the here and I think they stop when you use a young, give you some more verbose installation in NPM. I find it quite worried because sometimes just stuck in the limbo doesn't show anything and you don't know what's happening next. You screwed. Now you see that we're gonna need some animations. These are it comes with juggler, so just need to import they browser animation module. So let's go ahead and add it to our core module. Now let's imported and that's added to the import. Sorry, we won't need the common module me here so you can delete it. Afternoon, brother Animation. We need to add a team you screw down you can find include the team. Another force that step for they stepped far into the same You can copy distribute team. You click on the seeming guides. You can find some or other colors and are we show you later how to set up your own team. For now, all issues distribute Indigo team, and you have to add it in your up into the stars dot CSS. Now let's also get the material icons, and this will go. You toe the index of HTML just before the end off the head. Doc, it's just start our server and see if you get any errors. You can start with NGOs served Miss Nash Open and you would have ah, use the contra shift. I can open the development tools so ever. If he works directly, no less are some test components in here back in tow. The Material Angler website. Let's go components. Now let's add some bottoms. Click on bottles. Yeah, I You can copy this sound import, and let's add it to our material module here. We also can remove the common module and we're not gonna declare any components so we can remove it and replace it with exports. The space, that bottom module. And if you out click, we can select Booth and based together while we are kids. Let's go ahead and add some icons. Us. Well, ask click Amusing preacher to format my coat here in the U. S. Code, you can right click and use format documents. Contra shift. I No, it's our up is for beauty. Next minute toe actually on the components. So here in the bottle, click an example Here, live your source. Copy this back in our up in going toe the up confidence. Well, it's time l Let's just space everything here. You save it. There we go. We have ever seen said the bottles colors and there. Thanks. If you haven't created project, the African is clicking the art project. You can give it a name and choose your country. When you give it the name, you can use a trick. Yeah, you all generate an idea for you. If you click on edit, you can actually added, For example, if you have a dominant, you can just add it just like that and that will be included in your link. And you're gonna have a better looking project. I read Create my project. So I'm just gonna click in here. What we're looking for is thesis at for a based work web up. We only need this object from the conflict viable. So let's just stop it and go back into our We're going to add to the environment. You have the production in a test environment. That's up to the test panel. Just give it a name. Call it for a base. Just paste the object in its save it and we're done with it. No, we've finished setting up or up. We have material Bangla. We have the material design components on it. We also added a firebase a P I Keys and we read to start coding Let's commit are set up to give so far being working in the master branch. But that's a really bad idea. You should never work straight in the master branch. We should always work off a feature branch. So first, let's great Development Branch you check out you can use to get check out Dash B for a new branch and give it the name. Let's call it death. I refuse. Get branch. As you can see, you have a dead branch. Now let's commit the stepped up to it. Get status increased a bit. So have a few from Let's fight and untaxed funds. Come on, get on dot with two at everything, get status again and less committed. Now get commit that I am for to pass a message. I'm fire base baby. I keys. We also add the material design and create a few modules. There you are. Get started again and you're good to go. I see in the next lesson 4. 2.1 Authentication Module Foundation: Hello. Welcome back in this module. We're going to cover the authentication part off our application. We're going to be assigning a sign up. We're also gonna add off integration to our. That would give the ability for users to signing with Google Facebook to it to get started . Let's lay off the foundation for our module school photo terminal and create our module as we've seen before. We can use the shorthand commands and G G for Generate and the M for module going to create enough and you go and add it to the core module, the core module. You act as a bridge between are up and our feature module like this. We can avoid clutter in the root off our application. Now, as you can see, we have off Marcia. Now let's create the components. We will use the N G generate company command this time. Also there. Shark 10 g or you can you see for short. Let's put it into the out folder. Let's call it Signed me. Now let's do another one for signer. You can use the arrow key to navigate between your last commands and let's create one to resent the passport. Now off module is ready. But in order for our upto talkto for bays, we should create a service Bean Angler. A service works as a middleman between 1/3 part service and you're up and from the service you call it into your component. So now let's create on out service and you're gonna add it to the core module and degenerate service, expecting the core folder and call it off. But I also added to the core module by adding it to the core module event. Multiple instance off the service. Just press enter, and now we have it here. And it's also added as a provider in the core module. And here we have our components. We're not going to use the column module here. We're going to use the share model free. And that's the main reason off a share model because many off our future mothers use this. Calm larger. We were reportedly here, and then we will export it toe the other places. You can also add forms module, how great our components, our authentication lago, this service and we also learned about the functionality of the share and the core module. Now Let's go ahead and create a royalty model so we can see this components in the browser screed the same way and degenerates module started to routing. Let's added to the route off our application and also important to the APP module. No, if you check the up model, he wasn't poor titty here, and I want to be in parts already. And here also, we can delete the common. Roger, We're not gonna declare any company, so let's stop this. Put on next four. All right? And we'll see that in a bid to create our routes. We need to import routes and they're out there module. And that's using the uncle arm rocker. They're open much of so in the parts already. Let's aunt right there module. And here we're gonna call four routes in plus a routes array that we're gonna other routes , a newly stance of routes, and that would be honore off routes first to you take a bath. Let's leave it empty for now. And now we're gonna low the Children, Which well, 0.2 are off module. You called it house Marjorie here as well. Now we need toe export. The router module so we can use somewhere else in our off model. Let's timeto create our routes were going to do the same here. So let's copy the parts from here. We're gonna need a rotisserie. Here's well cost rolls. It's a new starts off. The routes you were gonna add are off routes. Take a bath. Now we're gonna of the signing buff and it takes a component which is the signing continent . It also ascents extra data. Here we can add things like title. So let's call it signing and less than the same for the other Once. So sign up. And also a rosette Bunce words said Usman Component and the title Fused Control and the Arrow keys. You can navigate in between the words so you can move faster. With that done, we need toe add the rather larger to our imports. Sorry. And here we're gonna call for a child and also passed the routes you. So let's start our server infested paying the browser. Have you never get to signing? And nothing happens There is is that we need to add a router outlet to our component toe the root of our application here. Let's just create a router outlet, and just and there we have it, it works. The writer outlets were check in our router file and see what component they should display . So now we've created are off model our components. We added the routes, and we're displaying it with their outer outlet. So let's continue and start to create. Are signing component I soon Tonight's lesson. 5. 2.2 Signin: welcome back In the people's lesson. We created the foundation for our authentication Marshall. Now let's go ahead and start to do upon it. Not as great. Our first component. I start with the signing. In order for us to communicate with fire base, we need to install the fire, possess decay, and we're gonna use a package called Underlie Fighter That's the official online rapper for the Father Is STK So in our terminal Let's aunt this two packets with your aunt five days and longer. Fire, chew. Now that we've installed them back, it's let's go ahead and added to our application that's important bar fire module from unlike fire chew and here less initialized a firebase with the environment key we created before we also need to import the packages were gonna use. We're gonna need the final start, which is the fire based at the base. We're gonna also used a storage mondo and the authentication. We're going to add it to the core module and these are the imports. And let's added toe the import. Serie No one initialized the glass fire to Let's start to create our service, A service in England. It's what communicates with 1/3 party provider like Firebase. In our case, we need to import router so we can redirect users. After looking your registration, you're someone important. The firebase off and the fire based at the base for a store, we also need ah, observable. And thats which map operator and I show you why in a bit that's good. I think their face toe use it with typescript. And here we're gonna create a user off reserve herbal and link it to this user. So in the constructor, let's initialized angle are fire off. Call it a es off. Also, the angular fire star and their alter. Now here in the constructor We cannot create a matters that you check the off state and we were turned a fire start. Look, man, if there is a user authenticated so let's create it Now the user observable use off state and I'm gonna use this switch Mop, check If there's a user and we're gonna return if I store user documents here, we're gonna use the Essex stringing population to create a path where the user that is gonna be stored and then we're gonna watch for changes. If there is no user. You're gonna return our observable off? No. So here we are returning off first or document for a user under a user's collection. And here is the user I d. That will be created by for a base. And we're gonna listen for value changes, and it is not gonna return new. So that's done. Let's create, uh, signing methods. It's really taken email and passwords with growth Springtime. And we were turned a signing with a 1,000,000 passwords methods that comes from fire base well past the main passport. Now, this is a promise. So after it's done, will be going on, counselor. The result, if successful, signing and if he be errors, we're gonna catch the error. And we also are not going so long. We're gonna also love the error message. Okay, Now, that's great. Ah, sign out method. This will return the sign out method from our base. No, And when it's done, be going toe, send the user back toe home page with these dots router navigate When we gonna send them toe the ripple for our we don't with far off service, let's go to our signing components in less time building our form to greater form. We need to import the young life for modules and their active for a model. So that's important to into our chair module. And here we're gonna import and export it so that we're also going to use the material on larger. So let's reported years. Well, remember to keep it in alphabetic order just so you can keep it, organize backing in our signing component, be gone, import the fun group form Butor and Validators from life forms. We also gonna need a router observable from express going for the share module and the off service Let's get to signing for and that would be a farm group. You know, Constructor, that's initialized for a butor authentication service in the router. You were going to use a public. And the difference is that public you can use in your HTML and private. It's only if you're gonna use 80 here in the component that yes, yeah, can be five. It's no, that's good. Ate out for first. We make a reference of the signing for Let's call the form you do. Is that a group? And you have a mayor and a bus words. The first argument is the input value. You leave it empty to start, and then you're gonna pass the validators. You're gonna check if it's an email, and also let's make it a required. So now the bus word the same. Let's start with the empty input and Mossad's and validators. We're going to use a pattern here. This would try to match the using put without this pattern you were trying toe check. If there is numbers and letters in the bus words, if they're using put matches with this pattern, it's allowed. We also can aunt Minimal length, marksman length and you can not as many as you want can even create your corn. Now let's create some getters toe. Retrieve the information from the signing form and the reason you adding these getters. It's so we can use only the mayor by the reference in the Farming. Put its ad long for the password as well. And here, if you click and select, you can on both together. Now let's make a function to call the signing matter from the authentication service and the return that method very sunny, and here we gonna give the you may have other and US work after we're goingto get a user. And if the form is valid, we're gonna navigated to the home page The signing form Spell it. But the router navigates now Our second part is done. Let's just add one more finger here and I will tell you in a bit, What is it for? Is the height Because true, let's go to our signing component dot html and we'll start creating our user interface. But before let's start the server so we can see What were you doing? While we're cozy, let's not get toe the signing. So now we start their server and we're getting this era. And the reason is that form builder and validators they come from the bungler Proactiv for module. We've important to the share model, but we haven't at that share model in here, so we need to import it strong. Well, no shared shared module. Now, if you added to our your sorcery, the air should be gone. Navigate against the signing and he works. Now we read Stow start to create are signing here. We're gonna other main and a section and this is for CSS burgers. That's great. A form we don't need the action. We're going to use the farm, Brooke, we create, which was the signing for there. And we're gonna use the engines. Submit directive and we're gonna call the signing. Yeah, skip it. Age three. I'll come back. We're gonna need some material. Online module. Let's go to the material. Angular website components. And let's get thing boots here. Minuto important. This back in our up less added to the material module they should give us assessing Here it's a month for I refuse. We also need to pass. They form grouping here in the farm fields that suddenly put you don't get the hype this matting put comes from angler material. Just be with a placeholder and the farm control so we can assess its value. And it's also a requires you this Adam at era and the validation We're gonna use the engine if if they make valid. We showed this messaging here. Now let's do it. Same for the passport. Slicking out clicky so I can select all of them. Everything's changed now. The reason we are that height in the company in this one is that we're going toe Tuggle the password here with show passwords and highs. And for that we need to add the icon. Any side is gonna have, uh, JavaScript. Ernani operator. If the height is true, it to return our visibility, I come. And if it's false, official the visibility off. I call, Let's get give it. I'm not so fixed. So it stays in the right side of the input. And also, let's give it a click event that Utah go hide to and falls miss tested. And that doesn't work because we need to have the typing here at the moment is a normal in quotes. So let's ants a type, and this is also it or not. If it's true, it's going to be a password import. Or if it's pose, it's going to be a texting books. That's where the bulls So go house. Yeah, and that's how it is to be. Oh, show him hide password. If I'm glad material, well, it's just another bottle, and they will be ready to test, but it's much raised bottom. This comes from Mugler material type. Submit and let's change the color. So, uh, absent Okay, No, let's give some CSS can attack the men and give it on display greens and the lying. The iTunes in the center repent great roles. We gonna make it 100% 100 view height about the section. Give it that Max. We've off 600 big sales and large ng Oto. Now it's Ah, Vertical and her Santo ally. That's how is this to create layout with CSS creeds? Let's just give. We must form 1% booth, and that looks much better. I see the same for the bottom, so let's go ahead and tested. But before we need to go to the Five ways console authentication Time and the signing matters here, there's the least off the providers that's anybody signing with May and password, which is the function we created unless also ill. The Google while we're here now, here under users, respirator users so we can try it out. No, back in, uh, yesterday our reworks shiny and it worked. If you go on the application stuff on their local storage, you can find the user object that firebase created and with being redirected to our home page. So that's great. We finish this section next we're going toe, give the uses the ability to resist her in our application, seeing the next lesson 6. 2.3 Signup: no guys, Let's continue where we left off the previous lesson. We build this tiny component offer up another uses consigning toe application. That's great, but we still need them. Toe. Have a way of off registering theirselves in our let's see. How can you do that now? Betting toe off service, Just throw down and create a new function here. This will be very similar to this. A major signing. You also take a milieu and a bus. Words now three user with a 1,000,000 bus words. Let's just copy this part over here gonna do. I'm saying she's changing this message. Your account has been created. It looks very similar with the defense off the matter that were pulling from for base. But we're also gonna change another day over you. You gonna take the user that was returned by the create user with me and password matter, and we gonna use that data to update our first or data days. User data this will still have to create and you're gonna pass their user. So let's just go down here and create a metal. Let's make it private because these were using within our off service the user that you can call it anything you like. It just makes sense to use very verbose name for your functions. So we know what it does. Now we're gonna create a reference to ah firebase document and we're gonna pass the user. I d remember. When firebase creates a user, it will automatically add a user. You I d. That's a unique key that far brace carries for each user. It's making user reference. And that will be on Angler fire start document. Would they use their data? This the uncle or if I start document it comes from here were imported with the amplifier store. I'm glad fired you and the user re passing is from the interface. Let's continue now. We're gonna reference the dock and give it up half again. We're using the string depopulation. So we created our friends and that's ah, I'm glad for Start document off a user and we're passing the location. Now we're gonna create a data variable. We start a user that was returned here that is a user and let's build it now, you I d the musical variety. You're less on a new just in case because if you going to use the Tweeter provider? Twitter doesn't give the menu address. So we need toe on this movie here just in case you're gonna use that. If you know that we're not using the treater provider, you can leave it out. Well, then you're gonna return the user repress, but set. This is a method from underlie five star documents, which is gonna take the data and save it to the database. But they set. You need to be careful that this set is destructive. So if you have a name over there and then you add 40 euro, your your name is going to disappear, so you need to pass. Merge. True. And this is from the Firebase sdk. So let's break up. We are signing up our user with a 1,000,000 passwords and passing it toe. The firebase s decayed with the creative user with may impossible words. Then if a successful, we cannot receive the user back with the data from fire base five days we create user object that contains this and some other stuff like, uh, verify the may you and and some some more metadata. We're gonna take the user that came back from far base, We're gonna pass through our update user doctor, here we're referencing our first start document and giving it a pathway to store it here. We're taking the user, You i d and adding to the address. So we're gonna have a user's collection, and then I use the real I d. And this user data is gonna be start under it. Here is just so we can pass the data So you create and that object adding the user details and saving getting here and you are adding than marriage true. Look like the destruction for dot No. What is left wants to do is to create a component. It will be very similar toe are signing component. You could, if you prefer toe, make it form a separate form and reuse it. I won't be doing this year, so that's just basically here the same. And now we need to change it for a sign up for here. Let's do ah finding replace. Most called editor should have one of this one off. We replaced. Now let's go back to our signing and cooperate Imports. Same once has changed the name of the function here so I'm not. And let's also copy their front page toe the same as their before. Find them replace, and here will be a sign up. Let's just change there. What we're saying over them never fails to say, Let's do something different this time. Instead, off using the sign up component and duplicate this data, Let's create, um, root CSS file here, the style God's recommend that you all is. When you give it a name, you specify what it is going to be like. There. One is we have enough module. We have enough service at ice time. So we just by looking with no, what is it about? What is the content off the file? Now let's disclose this once and in here on the company. If you go up there is and Stein, your Io's here is an array you so you can pass another file. So I successes. I need to go up one because we're inside the sign up. Form one now and then it's that now let's have a look in the browser. The energy served. Mr Open Command, you're under off. That's time. Just a type of sorry about that. Let's go to our sign up. They have it are up Looks the same. I do the same for the signing. Just copy it in here Based over there. Unless delete Dio this? Yes, as from here. And now if you go toe, the signing is the same. Okay, no less test our sign up. Did the bus work? Okay, there's no user records. We have the era because we're still calling the mayor's signing here. We need to call the images. Sign up. You know, when you refresh, you can great on your user. Welcome. Europe has been created. Let's check it in the fire base. Consul, you go to authentication charities, and here we have the user collection. That user you idea and they user data for two is new and display name is new. If you're getting a permission issue, when you create a user, you just go to their rules. Yeah, and on a two allowed through in here later on, we're gonna deal with this permissions and at the database rules to secure our battle. But for now, let's leave it through so we can create our users and best. So now it's great. Let's fix this father or new way here. We're gonna use grava tires that's going toe. Create our for your ill for us. So to do that, we're going back to the off service. And here we're passing the user for Terrell. But there's nothing there. So let's give it option, and you're gonna use the gravitas service toe create identical for us. So let's add it. Now, Http, we need to pass a hash. So we're gonna use something called MD Five. Although I wouldn't recommend this for if you have sensitive data in our use casing here, it's fine. We're learning. So let's aunt, this module MD five is a typescript MD five module. Okay? Stressed when he stopped. It's important. And now we can use it. And the five but hash string. You gonna use the user? Your I d. You can use the you may. You are something. But are you? Is there? Is there your idea? This is stepped over here. Let me show you something to go about their website. How to use it in here granddaughter anymore. Requests. And down here, you can see we're going to use this one, which is the identical is a geometric pattern basin. A mayor hash. What do we know using the May hush, But you can also use any of this month's blank robot retro, and it will create a random about our image for your user. Now let's go back and try it out. All service do running. Let's go back to our sign up. We are currently logged thing. So if you go to the application here, look our stars, you can see here the data from our user. So let's clearance. And now we can create a new user. It was created. Now let's go back and check in the firebase council that the base now I have to users. And here it is. The identical was created. I see how it looks like There you have it in this lesson, we learn how toe Resistol user safety that in the database and give them a unique, identical avatar. And we also learn how to use our shared start shit in the module. Next, let's do a reset passwords and I am a verification. I see in the next lesson 7. 2.4 Reset password: Let's continue if our authentication system Now we're gonna ask the users to verify their mayor when decorating accounting are up, but that we're going to use the firebase method called Sandy May verification Here in our May sign up function, let's just change unlocked there then and we're gonna get the user and you're going to pass it through dysfunction. So the fire base sdk give us our current user methods which we return the current locked user, and that we're gonna use the center of immediate verification. This is also a promise. So let's change on then and console log the results also catch that error, if any. Also Consul lock. Now let's move on to our reset passwords for the resent password going to use the fibras STK So we need to import in our go reports start us for a base from far base up and let's create a result function you can you may you we returned fire base of what scent bus word resent In may, you you're gonna pass, they may Let's create that them and plants along the results you sent your password resembling. Now let's catch the era. Okay, Now that we don't that Let's create a front end first. Let's at, uh, forgot password link. I'm going to use a mat. Hint for it. This comes with the serial form. Fueled the matting to show just below the day Put Align it to the end in here. We're gonna add, uh, link. We haven't touched links yet, but this is basically how it works in Angler Welter Link. You stepped off there? A draft? Okay, let's take a look. Finding there it is. We're good passwords. Let's add some breathing room in there. Give it up. Margin, top 15 pixels. I don't know. And let's remove those styles from the link. Well, late works. Okay, Now, let's build. Did present front end. Yeah. List on the main in this section with Chu. Okay, now we just need to add, uh, March farm field, maybe books, and we're also gonna add a bottom with a click event, which is gonna call the result Passport function. Also give color accent. Where is that bus boards? This we need to create. Now, let's talk about the engine model in our present passwords application. Gonna cure Keita in your reference retires strength type and here. Let's call for, ah, five it off service in a private router. Remember, Any toe always be attention toe out imports that sometimes does not work here. We're going to ask the present bus word function your bus, City mayor. And we're gonna call the visit passwords. We could be in the off service. We created a May string to represent our data. And the engine model will keep the user input with our data and sink. And then you were a passing it to do present password function. What we're worth, Ernie, There was a password. Give it. They may. Then we're going to navigate back to the signing page. Okay, Now let's try it out. It's not. Let me create a new account. Get separated. And we sent you are a major verification. Good. Now, like may, I received a link. Click this link to a very fiery mane. Very fight. Now, this time the password was that we got bus work. Yeah, we've sent through a mailing back in my day. My first go follow. Where's that link looking here? No sick. Okay. And this menu, it comes from here. You're protective review authentication during the template. Stop. You have a few images. You can. It did them to personalize for your But the password resents template. Immune verification. This is how we do our resent passport and made verification with for a vase. 8. 2.5 OAuth Integration: No. Guys, welcome back now to finish up our authentication model. Let's give users the ability to sign up with their social. Me Jack owns. Let's go to our application service in here. We're gonna create our our social blogging function to be a private methods. We're gonna pass a provider and this social O g. We're going to return our function from the fire, possess decayed. We have these two options in here signing we foot but and redirect you can choose any of debts for your up. It will depend on your upward flow. And here we're gonna is that provider and dysfunction. We returned the user's credentials, if successful, So let's catch it. And then we're gonna use the credentials, and we're gonna pass it to are up the user data function condition that user miss are also catch any era. So now that that's done, we're going toe pass the provider here. And for that, we're going to create a function for every provider for a base supports. You're going to start with Google Game. Let's get the provider and you're gonna do new fire base. Oh, you would have provider. Then we return. Is that social looking, and we're gonna pass the provider, so not a scope it and change for the rest of the providers we have. It's up to term baseball to now. If you create some bottoms making our signing when it's it's below the bottom in your list , add a few more bottoms I've create this beforehand Can just supposed to be, too. And it's and here I'm calling it a straight from the out service. I haven't created a matter then you like. I didn't designing to call the email from the off service, but I'm calling straight from the officers, and the reason I can do that is because I said off service public in here and if I change it to private now, we've got a mirror it's not. Remember off the component before we enabled Google Loki on our firebase sdk. Now let me show you how can you enable and set up Twitter back in the fire base concert called authentications. Here in the signing methods, we're going to need a B I in a secret key here for Google were at heaven because firebase belongs to borrow. So here you can go older Wow and This is the firebase documentation. You're this girl down here and the Federated Identity Provider. Let's click on Twitter for Web And here there is the information on how to create between a bottle, which you just did. You can also pass Ah, language cold. It's always good to read the documentation you can find really need stuff to use, so it's got to it treater. Before you begin, let's quickly here Twitter up conflict here. I'm a red look lovely with my account. You need that to three point. Of course you can create a new one. You get the main engine fire and their websites You can get from the project based in here . This is the website not for the callback or you are. You can copy this money here. After we click in the bottom, it will ask Twitter for permission and then, if it's successful, is gonna return to this page which it's provided by five days. And we will handle the process. So, creator, your application You Now we can get this Heskey's and talking. Do you have the consumer key? Which is the FBI key here? We can able based and you have a secret FBI key, which is secret you shouldn't be showing to anyone and thats done so not a school. And try in our up this refresh it. Click on Twitter. You go to Twitter and the fire, the address and description that you added in there before. So he authorized up beat, Return us to the sunny. But that's because we were there before. We need to do something about it after you're gonna talk about the router guards, which will then look, if a user is authenticated and it's gonna redirect them out off this page, let's blow up the developer tools with Contra Shift I and let's check the firebase user object. It's not very fine Maze. No, remember I mentioned about the you're not. If you didn't put the new would be ah, on a roll here, here and there say they uses data. May your no, but that only applies to a for Twitter. And then we have our profile picture that came from Twitter and some provider data, and that's how you create here can she clicked Congo, it's going toe signing with Go go back in our fire base also, if you go on authentication and you can see the provider is now to return here for the new user. And it's Ah, identify. Here's no, because we don't have any value. And if you're checking our daughter lose Our daughter didn't get saved. And there isn't Is that sinew for direct one caller function After it returns to our page, we should put our update user data somewhere else. If you use the signing with pop up issued work properly, let's try it now. Now let's click again. And I was gonna pop up window. Mr. You can check in here. We have it all the information, you know, Tweeters back in the and here it's being added toe our new user. I want to finish the authentication larger. Let's create some utility matters here that he's gonna help us out with our app in the future. First, you're gonna on off state so we can check if the user is authenticated or not. Off states, which will they felt to know me here in the constructor. We're going on. Call the angler, fire off and check the out state. You're gonna subscribe to the latter and then we will pass the data today off states that you created Who's doctor? We can leave it in the same line. Well done. I need to use their curly braces. Now, let's create some methods. Get authenticated. This is gonna be a bullion. Either is a dedicated or not here. We're gonna check if the of state isno or not, this is going to return to theirs off state bathroom. Now let's get the according to user I d Which we gonna use it a lot in this up. And that's the string you were going to check if there is, ah current user authenticated. And if there is, we're going to return the user i d. And if not, it's gonna be no. So now let's Rick up the fire base out states, we return some data. If it's true. So we're gonna subscribe to that data and you're gonna pass it to the upstate. Yeah, Then we're going to use the data on gotten skate. If there is any that I need, we were turned true in the authenticated, not worth a new. And to get the current user, I d. We'll check if there's user open, skated. And if these that means there's some data. So we're gonna get the you i d. Or if the user is not often skating your return new, not a save our work to get use. Get brunch, get stopped. Us. So we did a lot of work on this module. Let's say everything it, aunt, get community brush and your message authentication. You coming? I hope you enjoyed this module. And next we'll create a user profile to display all the data we saved. 9. 3.1 User Module Foundation: Welcome back in the Breakers monitor, we learn how to create a authentication system for Ah, but now we need a way of displaying the data. Let's create a user module so we can have ah user's profile and a dashboard where users can in their own data. Let's start by creating our module are components, services and we also gonna create a user model and degenerate module user. We're gonna add it to the core module. Now, that's great. That use our service s for service you're gonna inside the Users folder and also added to the user module. That's great. I use our model right click and you file a user that model, but yes. And this we hold our doctor our user data. It's like the interface we did for in the authentication. But this actually instant shape the user while interface, we only give it types, but honest, great. Our components n g generate opulent user dashboard. It's good practice also to name space, because you, as you're going to see later, we're going to create a block and we also gonna create a blogger dashboard so we would have to dashboards company, So just name space it and you're gonna go in. Clashes in generate component to you, sir. User detail user list in the item list Item. Okay, I should have everything. We need to just close this. That's a game. The model. We haven't seen it yet, but let's go ahead and corporate from the off service Sam with ease. And here we're going to export a plus user. Megan, I just add that you for here. If you just hold the information about our users Now let's go over to the model and let's start to create our routes before we don't need the module. We're going to add the shared model Instead. We also need to import routes and they are out there module for the router module. We're going to have before Childs and bus routes to it. And let's go ahead and create their else that rate. And in your you remember, you take a box escape the passport, I would call it me. It's gonna be like my app that cones lashed me. That will be the dashboards, the component use their dashboard company. This person that as well my pro fly now Listo sang for the other components we're going to have. Ah, for users. Let's use them. Use their list component. Yes, but the users title and for the detail page, Let's call it profile. Now we're going to change this for i d. Later. And here's the user detail component were finalised title and let's change the dust reports for my dashboard less board, not us going checking the brother If everything works, I haven't got the home page jets. Let's create a quicker direct to our users component, you know, routes. That's great. Above that. You read directo the users, and we need to add a bath. Much Who coma? Let's have a look. We go to our homepage and you get rid direct to the user list. His earliest works, Dashboard and the profile, which is the little component and that works. Now let's create the brunch for the users so we can work in it. Get brunch against you will be working on the death, which is a bad practice, so let's get check out. That's before Ah, a new branch and let's call it user. Get branch again. We are in users and get status. Let's go ahead and commit this it's not. Oh, you commit And for us a message. And here we created a component. You, sir. Module components, Mado and service Bless user routes. Okay, let's stop in here now and continue to the next lesson where I'm gonna show you how to create. Must have detail confident. 10. 3.2 User List: Okay, now let's great. Um, user least for that we need toe communicate with far base and post battlefront it. Let's go over to our service. We're going to report, glorify a star and also collection and documents Brown Fire star like our store. We're gonna need those cerebro. Let's also pulling our user here in the two other viable that we hold our users collection . That would be angler for store collection. Less passive there, user. A lot of and in our constructor less at the hook to them, Fire star can make it private. The fs I'm glad for a star. Now let's add something to this. It's great to get users any year we're gonna use that this users collection equals these the f s but collection and we're going to give it just users. Then we're just gonna return the collection and watch for Viola Ginge. Now let's go over to our users least, and we're gonna call these get years that when you think portal observable from I excess and also they use their service so we can call that get users function. Yes, use this observable and that any the memory. Here we go down, Make riff arrested. They use their service. I just called the function from the service. This function by itself won't do anything. We need to call it in the energy on. Indeed, this NGO need to have a news before this is Ah, Angola component life cycle, the constructor and the end young. It has the same functionality. It we would stop your components when it's called. The difference is that the constructor belongs to Javascript and I'm glad doesn't have a way of controlling it. We should try to avoid having stuff to the constructor and always aimed toe add to the NGO need. So I'm glad we know when is the best time to run it. So you were gonna call that function? We just create get users and that's all. We have to do it here. Let's go over to the HTML and we're gonna create another list to display our users. Okay, we're in the user's. There's no connection. The start of Syria. OK, No, that's so let's go ahead and start displaying some battle. Still, if everything here in the street are you well, and at least here in the least you're gonna pass energy for Let's user off users and here, using they sink by. This is from England to manager subscriptions for us. If you subscribe to over there, go and unsubscribed when you leave the component. No, let's play the cards toe our user data. Let's go and important the cards. You know what? Your module So let's keep it in a alphabetic order. So now we can call the Motte card. Matt Cutts has ah, lots Heather. We signed. They had they were gonna on the user image The sourcing here, we're gonna use the glass we need took the brackets. That is the user photo. You are l for the out. That's, uh, user display name. What's that? You know what's card title and other user display name and on my cards? Subtitle Unless just on the user in May For now, Well, the headless under mud content And let's just put up a wagon on the user. Your I d you re loved you See, we have some that thing here just at some CSS so it doesn't look that bad. Base this money here. Remove the bullets and give some space between the currents with Tim Pixel Margie and a ways off to hundreds. No, there's a problem in angular that it happens with when there's, Ah, image return. No, we here and you see this, you hear? It doesn't cause any problem. It doesn't break up by still ugly to look at. It looks like a error. It is a little hack that you cannot your image dog you the user, not photo. You're all Kannada or I need to fake fire system location and replace the image and to our data arrives. Now I have a list competent working, but we can do better. Let's create what they call in angler master detail company, which is We're going to use the user list item toe only display data and the least company toe. Retrieve the data. Um, so let's do it now. First on the user's next item proponents. Let's let's on importing him being put. You accept battlefront other components, and that's this syntax parade, you, sir user. It's important. Use their model. And for the users display, it's this. Just copy the math cards, and here, instead of the on order list that's created Eve, let's say if because we're not creating direct we don't have any data retrieving here. We need to wait for the component toe received the data, thrown the master components. So before that happened, we need to other end If if there is a user display. If you're not, don't break our up. Not a space that you let's go back into our list components. And here we gonna change this for our abuser list item. You have the selector and first toe on this component into the other company. We need to export it for us. So in the user's module, this component items here, we need toe create the export array. It's based in there. I bet I want to go back at them. I'm going to live this funding here so you can have ah example. And here we're gonna He's artist item. Now we can pass the user toe the user list item component, the same as we did in here with the list item we need to do up there as well. So it looks through our users now You could save it. We have the same. It's not style. That moment, because we did not have any style, isn't to our this site and components in him. Let's just move this. We're gonna have just the same as we did before month card margin, 10 picks. So now here, let's create glass and let's call it user title. And let's add some got between the user a milieu and the much margin left one. Yeah, I have a little gap in there. Okay, now we have our user least, but it doesn't do anything. You can click in it. So let's add a link. So when you these air clicks in it and it would display this user profile, we do that in the marked cards so the user can click anywhere, and it's gonna activate the link Rather link, and we're gonna pass the user. You I d nowhere to be. But when you click this a new and that's because we when you create our throats, we're just putting your profile. So he said, the for fun. It's users slash, and you're gonna give it the I D. That's right. You click goes against you Z a seven se seven the X, and that's how you create a relative parameters. Now let's continue in the next lesson. We're gonna create the user detail page 11. 3.3 User Profile Detail: So so far, we've created a user list which the user list item dummy component. And when you click, it goes toe the users detail with the routes parameter being the users I d. First, let's go over to the users service. So we have, ah, get users function. Now, let's create a get user singular. We're going to do almost the same as with it here on the top. But instead of collection, we're gonna call it for ah, doc. And we're also gonna pass the I d over here so we can get the uses. The Dale. So first, let's create a user Doc, refresh you that we'll be documents also for a user, and now we can call it a. Here was these dust If s nook, that's a user him and use this flash. And here we're going toe pass tonight did. And this idea we gonna get from the component we were turned the these dots user duck. We're also gonna look for the value changes. Okay, so now we are expecting an i d. From the component here, which is gonna be ice drink. We are going toe create a five star document refresh here and link it toe point in our database and here were turned on document and listen for Chinese. So we need to somehow extract this idea from the Royal and pass it to the company. And it so happens that angler gives exactly what we need in the activated routes. So that's important Thrown rotor and it's called Activate Routes that it's great the reference for the year and a constructor private because you're going to use insider component es activate robs. Yeah, the Cell Street user service. It's important for me. It's amazing You were gonna create the refresh for the user and we need toe part the user who is your mother. So let's create our function that is gonna retrieve the user. It's gonna be avoids. Let's create on I d variable to restore the idea with another trees from the your ill get we ask for the i d. No gonna call Bay User Service and that gets user function. We're gonna pass this idea we got from the welter and the grass, subscribe to it, and whatever it returns, we're going toe added to this, that user that we create here on the top Nala safe and nothing works because we need to call the function here on the engine in it. So now that stuff we need to have the uses that in here, the skipper least item and based in our detail component, we also need to remove this router link here we have the user least and you clicking it. Now I have the user's profile. Is that a seven? That they several If it just any other user profile with this, these few lines, of course, you can get some information from the browser, retrieve and display some data. Really simple. Next to going toe read user dashboards. So they uses came they did their data change pictures. I seemed on excellence. Um 12. 3.4.1 User Dashboard part 1: Logan. So far, we've created the users detail, user least and Adami component for the user list item. Also in our user service, we set up a function to get a list off users in a single user with the i d parameter from the browser. Now it's time for us Toe Creator user dashboard where they uses will be able to update their their data. So to start, let's go toe the that's board component dot html. Unless types kept folding, the basic struck off the user interface. Let's create a number that's great enough buying in the top. So let's go to the material online website and grab a company calls to bar parents. You can see just basic toe in the examples. You can get colored or with icons. We need a lot to bar, and I'm not to buy rule first. Let's imports to our the FBI. But, you know, just based in there no, back in our openess, you must have the bottom inside this box. And Michael, uh, you know, back this is ah, back arrow. Let's give some styling to the bottom. That's that I spun attack with a class of spacer this year usedto spread the to buy items apart. So let's have the bottom and, uh, you know, lot bottom. Now for this to work, we need the click events, which is set on the editing most to false. And we also need to check. And if what is the state off the editing? If it's true, this bottom we show If not, we're gonna show, um, is it a profile bottom? It is not editing. And when a person plenty will be true. So when the user clicks it, we're going to show a bottom dawn so they can edit and finish it. Now let's create this additive valuable in our dashboard compliant. Give it that false click when it changed that it don't or not not as great. Two containers one for the team over to show before and the geo modes that no editing modes to show the uses The girl we're that we're going to use energy container And what this container does is to shake if there's a user, we're gonna use that ngf user. You returned to that we d If there isn't a user, it we won't break up. This is just a safe mark. That's other user toe are wandered as well. What's that? The user? You, sir. And it will be. I use them objects and we need to report it from our users. Modern? No. Let's pray to containers to Dave's inciting him, one for the entity mode and the other one for the few more this is gonna be if editing above its two false Let's create another one for the entity mode. Yeah, we need to check if this editing or not. But for this to work and we can just just be able to say something here we need toe actually have a user to display. So let's go back to our component dashboard and create a function called get User. And these were turned. They authenticated users and for you to work with you to impart our officer This what's up here that's added to the constructor service? Now we can return. You stopped. Oh, no. But you, sir. And now we're gonna subscribe to this user so we can get the data. The result user we're going toe said our he stance user him equals to do the results. So you're since subscribing toe the authenticated user taking the return in data and set it as our yes, that's years there. Yeah. Now let's call this function on the energy owning it now were loaded with. Have a user, and we can click, and it will change between it and female. Now let's add some styling to this. What you have in here at the moment, so the bottom we go toe the other side. But before, let's talk about CSS variables. Although material design give us some colors for the redefine colors, like if you keep giving a color, your primary to turn blue. Although they give us this option, we might want toe at our own color. And for that, let's use our CSS viable Teoh Pretty find some colors that you can use across their up. Just go down and go to stars that she says, Let's create some valuables in you to create the CSS viable and that we can use trotter up . You can target the route, and here we can create some valuables that background color, give it slightly shoot off Greg up, and for the variable names, the only thing it goes to add the stash up the rest you can choose anything you like. Now we can use this inside our component. You go to CSS and he can use bar. Then use the Viber we created in the global CSS Stashes. There we have it. We just need to other color. So it's white. Let's give some spacing here. The between the bottles and you can use that. Remember, we created ah, spacer spoken That's just added to the global so we can reuse it after and let's also it's also margin zero. As you can see here, there's facing between our toolbar unless used the I picked wrong here. No, we have our bottle, we spread and no marching around our to bar. Okay, let's get going them. Let's build a few more first created thief and give it on photo your your oil glass so we can target with CIA says going toe and off user for your island as a background image. And we're going to use the N G style to display its other well at this background image stock Dynamically. No, let's create time. That's fine so we can start. It uploads much in assets. Anything, it's give it the name off file 90 of five and this is all HD Mattis Facts is nothing to do with England. This is supposed to target. CSS could use a change to get that load events. You cannot wait for the event you extended to create the upload for the re while function. Now components. Let's create a label. It's 45. That's why you putting your name here so we can target with the label and let's call it changes photo. This is also a cost on. Just as class. I'm grating. You can name everything and this is just a target there the text part off a hero which we need to create. Yeah, do hero and this hero. We will have their photo and attack just with age one. And this with the user name Mrs Tac Toe split the user in May. Not seeing properly is because we have created any CSS here. Now I'm just gonna pay some CSS for the sake of time. You can just post the future and copy it and I if you click on the image. If we open the file Explorer and you can choose an image, it's also out some hero CSS hero. Not Here you go. The text. Let's give some marching So is not stuck on the corner off the browser hero. Next, I have some breathing room here. Okay, lets carry on and create the the form would it at the team old. You're gonna this player a month cards and showed the forming signs and you're gonna have one for name and one for a 1,000,000. You're going to be using two functions. One talk today to profound and the other top. Today they email you. And if you go to the firebase documentation, we have two options here. One is toe update the users per five, which you take a display name and a photo Euro and they all this talk today they may. You cannot update both together because that day teammate will give you ah, error. If the user is logged for quite some time three toe. We'll ask things that tow it to ask the user to re authenticate so he can update into may. So let's go ahead and create these two forms. It's gonna based in here here. We have a lot of guards with I'm not much for food. I'm adding Ah, not so fixed bottom with the click event. Stop the profile in the other one for the email you. But she looks like this. And the matins is just to show this safe here in the bottom. Now, let's go ahead and create these two functions so we can update these. But before let's just fix this farm field so it displays for weeks. No, inspector. Okay, let's hook up those functions. And the 1st 1 you don't, Lester, they update for five. And this we were 10 a function we're still gonna create in our user service to talk to for a base. But first, let's just pass it past the data from the form they stopped more quote user service. And over there, we're gonna create a function they find. And here is our capacities that use it doesn't display name. And these dots user about photo, you're ill. These details are coming from the user in you before we go in under the arm. Use the service. Let's create the updated may and passed They made to the service as well updates you made. And this we were turn same service. Wait a minute. We passed the stock user here in the constructor less on the private matter for the user service. Spain importing it for me with obvious schools. Now let's go ahead and create our service eruptions. They profile. This will take our let's play name and the May then and therefore to the oil. Both string. So let's important off off service Now we can use it to get the user i d. The current use I d create a constant using and look it up to the off states. Also much greater batter. Object to hold the display name in the photo Reroute Now we can return the user, but update for five This coming from for a vase. Let's change this one here so we don't get confused. Teoh Doctor, this is from Firebase sdk and you passing it did that. If you remember here in the documentation, it says that the update profile. It takes a display nin and a photo. You're ill and it's ah, and it's a promise. So here way. Getting the current user getting the data from the component and then saving to the data viable and classy it to the place profile. Now let's continue their function. We're gonna then save it, toe the database, toe our own database. This one saves today. Firebase object. But now we need to save it to our own database. That this the tests, Doc. And now we're gonna get the path to the user. Uses string interpolation to get the user. You I d Then you're gonna call update, and this function comes from Uncle, are fire true? We're gonna past display, display name and photo. You're ill. That's Consul Log so we can get some feedback. Okay. And also catch some errors. Okay, scoring system. This bottle is will not work because we changed the name off the functioning here. I need to go back to our user and change this one. Let's do the same for the You mean you're here so we don't get confused with firebase. That's the cave function. You know, we contest click save your profile has been updated. Hearing them for a business decay the doctor. And here's the data. Let's go change again. The five days object and changing our database so it works as intended. Now let's do the same for day, May and this We think they may from their companies here. We also need the user. I d. And we were turned a user updating mayor. Plus, they may No. We're gonna save it to our that the base, Same as we did before the performance, Not dates. You may. You needs to be an object. No, let's also comes along. It's just showed a 1,000,000 to console lock is all. Now, if you remember, we also needed to send a verification email you for to confirm they users a 1,000,000. Let's do it now as well, Fran Under then. But now we need to pass the user with up states. We can get this sense. You made a verification and then we're going on council log if you're successful and let's catch years as well. Now we're gonna catch there for depth. 18 million. Now let's go ahead and try. Well, service is running on the man. It's changing this one for Dr Call and we get these Ah, error that I mentioned to you. So let's go ahead and clear our user realty on skates just for signing. Why you stay here? School Back to our dashboards. Now let's predicted go. Your money has been changed and we sent a verification back. Enough are based council. They may have been changed their database also on the fibers user object. I'm just changing back now. Okay? Save it. May has been updated, flabby, followed, not escape. And we send the verification. And as you can see, my aim, a very fine is equal toe False. Here in my may I have the confirmation email? May their fight? No, it's after we're loads a major fight through. So everything works. Let's stop in here now and let's work in the up loader in the next lesson. 13. 3.4.2 User Dashboard part 2: Now let's continue where we left off in the previous lesson. And this time we're going to give the users the ability toe upload and change their profile . Photo back in a user dashboard company, not aged email. We create a dying put file that steps image and gave it a link link with the labour here with the idea of file the class uploaded SOS is just so we can make it look pretty and the change eventing you. Well, let angler know when when the user will try to upload something. And this is the syntax of the dollar sign for event listening. And we need to create this function in our components. Let's go to our company dot yes, and stacked Create that function. Not really. You think the event and this won't return a value, So we gonna use voids first. Let's create a constant toe started fire coming from the event and you return on array and we're gonna get the first item from it. Not as great a powerful you're going to start the photo on the users user idea Other photos folder and added with the five name it's far name is coming from the file that we created the So that's great. Ah, if statement to check if it's on the much and it is not an image, let's return alert when humans allowed. And if it is an image, we need toe target the upload task. And for that, we're going to use the glass territory storage. Now, let's not do it for the storage to our constructor. Deprive it. Storage in his angler Fire storage wasn't courted. You just move it up. So we keep it separate from there up related stuff. So to create our uploads, we need toe star the upload task. Let's put it past. And he has a type of blurred fire task. Let's go back to our function taking that they use their clothes, not show image. We're going toe, create the blow tasking here. You're gonna pass the buff in the flan. You don't even get the task again. And you're gonna used in Donald here out and you're gonna subscribe to it. Yeah, we're gonna get the result and see an update. The user profile before Dr here. We need to pass the display name and the photo euro for this function, work get there using Slate name and you're gonna pass this year. I'll from the subscribe. If you don't pass the display name, it will return on nearer because we need both. T Use the firebase update the file function. No, let's go ahead and try. Can you? A person under you much and your profile has been updated. Now that we can change the user's photo, let's add some Causton batter. So far, our user class only has the information that comes from the firebase user object. Let's on a few more information details. Now let's have the website of you and location. And if you want the interrogations in front of the name, if you make it optional, but they don't now we can start to create a function that you save the data in our database . He and the user desperate component Not, yes, that's why having create a function called Update user in create a battle over Jack so we can pass through the use updates from my user service. So websites we'll be user websites or no, and this is just so the user can update one or more items you don't causing the up to crash . Then we need to return. Um, I'll use their service, and there were gonna create Ah, update user about the function. And we're going to pass the data tweets. Let's go ahead and create this update. User data in our use, their service. Gonna accept the data from their component with any time A script. Ah, a viable to restart the user ID's. So I'm glad. Knows where to save it. No less with turned in. I'm glad. Fire Start document with that user. I d past the updates given the data. Okay, now that's not. Let's just create a foreign word. Use this Came put the data here in the entity mode. Let's create another card. And at some import fuse Mother Mott cards here, we're going to create a form so I can update all the inputs together. We don't need the action going to use the engines. Submit. You're gonna pass that function we create inside. Let's use my form field. And here, let's under Newport. We don't need the type. Bring on the march and I'm glad component. Let's give it a placeholder. Begin the dashboard. We're going to use a template driven form from England. And to do that we need to give it a name. So I'm glad we know how to link the data. We're also going to use the n G model to create that joy that a binding, but they use it on the website here. All that's just copy and replace the this with them location and also this one with you. Now let's check it in our websites here you have the reforms. We don't have a bottle yet. And also let's change a beer for the tech start instead, off the a simple input starting attack started recalls are up to crash If you don't close attack, It works differently from the normally put. If you say that you can see that's gonna create an era unexpected character. If you close it now, we don't have the error anymore. And we also have, uh, next out of you that's on the bottom and we contest. Just submit this engine submit. We listen for the bottom submit event and we call our function in the dashboard. Now let's go ahead and test it. I will bring it up, are far based at the base so we can check it in real time. It is my user websites in that location. Let's try to save without a view and there we have it. And this is how we cannot custom that to your user model. Your first added to your model, and then you can add anything you like you dysfunction, which would then be passed to the users up. The years of that thing here can, at any type of information, do users, and it will safely started for you the furnished this module. Let's create a function for them back bottom in our user dashboard component. RTs. Let's import location from humbler and added Tore Constructor split location. We're friends, the location and now he lets create matters called Go Back. This will take the location and use the back function redeeming. And in our user that's board dotage. Demon less create a click event on the bottom, which you then call the go back function from our opponents. Save it and he works before we we move onto the next module lets computer work to get where in the user's brunch get status lots of months, five items nullis at all and commit leave a message you an update it we won't be coming back to this model so we can safely merge it into our development. So first, let's check out development. Death. Now let's use the get merge and pasa on no fast forwards Flung. No theft means no fast forwards, which he will create a merge commit. So you have a history of the users branch. So as you can see, I got an error because I have a set up my gate so we can do that with the git config Nash Nash, Globo core, but editor. And then you pass a Nestor of your choosing. I'm going to use the Nano that is the beauty editor for Lennox. Now I can just use gifts. We'll meet and I'll have my editor here. I'm just going toe leave the same message, he emerged. Branch User into development. It's fine for me these contracts. I won't finish our user module. We create a fully functional user back and where they can update and Minister Doctor. The next month we're going to see how to create a block and recruit application 14. 4.1 Blog Module Foundation: nice time first to create our Blawg Scooper Tau terminal and start to lay down the foundations for the module. First, let's create a post module and you generate module posted. Add to up. Let's create the service, of course, the other to do both module. And now let's get the components going to die dashboard a detail at least, and the list item component and getting rate come super component. Gonna be inside the most folder. Let's start with Do most dashboard don't east and the list item. No, I didn't show you before, but you can also use the glare. See a light would strap a class for our module and you do the engine generate, Glass said. It was further, let's call it post, but the reason I don't like to use it is because he just creates, uh, Post that yes, it doesn't specify that the model. So let's rename it and Adam Model. Yeah, the official on Lifestyle Guide recommends that you always Neymar fives and reference what's inside for simple. We have a service, you have a module and you have a model in the authentication. We also had off style, not a straight on model, do you? He spoke up from far base. Be much after a string title. See if it's trapped or not to be a bullet. Great words, uh, collapse feature to it is similar to the medium website to be a date. Okay, well done. Let's start to create our routes. Like, you know, post module. We don't need the Commons module. We're gonna import the shares. I love you. We're also gonna need to import the routes module from bungler to talk. No, the import. Sorry. Let's the rotor and you're gonna positive for child again. Give their routes. So let's get that routes every newstands routes. And here we're gonna create two routes one for the blawg, which is gonna be the post in its components in our block. And you're gonna pass it on i d for the block video. Fix a plot block and the corporate's will be posted. This component next we have Teoh boast, which is gonna take a 90 parameter in the competence is the post detail. And the reason we're not adding the Dutch sporting here as a route is because you're gonna insert that into the user's dashboard for that we need toe export, the dashboard company and so we can get it from the users. Um, when the uses module, Eunice, add exports already, and I do post that's bird component. Now let Abbott toe our users dashboards. So what? We're gonna use the selector that we gave me here before server running. Let's go to the users dashboards. Okay, great. 12. It here for now, just below the hero. Let's add up this board component. And now we got this error. And that's because we need to import the post module in tow, our user module so it can have assess to the to its components. So users module That's imports. It's just up to the airport. Sorry, save it. Not The error is gone, and you have all posed dashboards. Works in here before we continue. Let's take a look at the material designed components we're going to use a component called It's like Togo, and we're going to use this for the user to set the post as a draft or published. So let's go ahead and import it toe, you know, let's go to the material module. Let's toe arrays. Now this this Matar go ihsaa gesture component. It requires assess to the browser on emission module. Also from Homer J. Yes, on the instructions on how to set up montedio Angular. If you scroll down, you see that you have to stop gambler animations and you have to report the browser animations model. So you know where it is important. The browser animations, module view and added report Serie. It's very important that you keep the browsers animation module under the browser module. He makes difference on what? Come what is important. First to you to skip that reminds. And we need to stop, huh? Merger? Yes, for the gesture. So let's odd homage s. And then we need to import into our manger. Yes, Why? It's open up terminal. You are Omar Js starless. Kowtow manger? Yes, you know, service folded. You can just I've been ports in him now to test in our up. If we have everything we need, it's going report Tug over here and there. Example. Click here to show the source if you screwed up there. Is that my time? Much lights are going here. It's just copied and pacing into our most dashboards. Html monologist removed This months, So we're just testing, So every are double. Okay, So we created our most module, gave it its routes without it the post dashboard to our users module. And we created the basic structure for our bulls. In the next lesson, we're gonna start to create our crew application, So I see in the next lesson. 15. 4.2 Post Dashboard: the purpose lesson. We created the foundation off our post module. But now, before we continue, let's great opposed Branch and we still have our using their we can safely delete now that we merged eating to our death. Let's use get brunch last day for the elite bus user. No, if you check a brunch again, would have master brunch. Let's create a brunch for our post have used get check out that would be flagged to create on your brunch. It's got it closed. Let's commit this. Changes get commit and to pass a message. Okay, now we reds to start. Let's go over to our full service and we're going toe. Start with the create for us to create anything we need toe. Create a reference point in our database where they that will be start. We saw that before. We're going to need to report well, our fire star, which is are not the base collection and less support. Also a document for us to use later when you need to get a single post for the updates and the lead. Now let's reference the firebase in our constructor. Well, it's greater most collection election that would be opposed, and we need to report the our post model No. One signed our constructor. We can get that post collection and give it a reference in the database. Coming supposed when your reference of that The base. We can also pass some extra parameters here, like ordered by. We can also limit the items that is gonna be retrieved. Journalists create one so you can see how it's done. My friends, let's pass over to buy and use the collapse. And then you can choose how we're gonna display that. And like we come on, this is descending. If you are the daughter, you can see all the available query types Where can use for the condition type query Future ? Well, let's use the limit, which, as the name says, really meet toe that amount off results. This is you can just play with it and see what's display around the veto and choose one that you see your up. Now let's let's other create function. If you receive a data from our component in that would be opposed, we were turned that was collection and that is ah, method that comes from Glor Fire and we're gonna give it the data that received not a school to our dashboard component and start to build our form. This will be reactive form so we can use validation. Although you can use a simple form for it is always better to use a react too far in case you're up gross and you want to add validation or you want toe improve upon it. Enough talking. Let's go ahead and start building our form. We were imported farm, beautiful control and form a group. We're also going to create a post form professed the both service form builder. You know, Constructor Private post service was out too. Also important. Now let's do the same for the foreign. Beautiful. Now back in the authentication model on the sign ups and signing component. Here we create the four straight into the constructor, which is not really recommended. The constructor. It belongs to the JavaScript class and it's out of control off angular. So it's always best to create on energy in it, which is the ugly desertion off constructor. So this time let's create our foreign beauty there and then pass it to the engine eat so you just through the side. When is best toe initialize the form? You guessed you'd go this way, but adding it, toe the energy on Mitt is what's Angler recommends. So let's create their form near. Let's repress the post form must make it. Ah, former beauty group, you know. Now let's add the title, which, as you saw before we can. It's an array because you can still add the validations in here. I won't be at the end of elevation this time, but you're free to do it. We give it the string. Let's also at the draft and make it falls. No, we can add to the angler constructor gates for him now. We need toe use that create function in the post service. Let's create a safe post function. You take the data from the components, it should be opposed, and Uncle Larry's asking for the post model. Most mothers. Let's create a viable with form data which will be opposed, and we going toe Clayton objects with our most formacion. You have a daughter. This is gonna come from the authentication. When I got the current user, i d. So let's at our authentications service toe constructor. Oh, service importers for my here has a title. It's gonna come from the Post for And we need its value Gonna add an image to it later on which we're gonna get our uploaded upload er function toe after this much you're ill string place holding. You're gonna add a No. So we don't get a nearer when they component loads, but content stumps with most farmers. Well, you're gonna get the spotter roughed mostly in this of the published he's gonna be on new dates will be created like a time stuff. I must add the clubs we started for zero club not avoid the users to click the bottom and create a name T post. Let's on, uh, your statements and check if the form is untouched. But before that, let's check in the official documentation here in the docks. The fundament owes this. You go for directive forms. You are looking here The Saturdays. Inspect form controls property. This will give you the ability to check if the farm is being votes five. So we have these options here. We can check the status. It is valid, invalid pansy, or is able just have a pristine We're going to use the untouched matters. Backing are function. That's great, Dave. Statement. If ah form it's touched, then we can return and create with the form data call that create from There are both service and you're going to pass this form doctor after. Let's just resent the form to its original state so the user can other new for except and now you're ready to create our user interface. Let's delete everything from here and we're going toe added toe a lot card. We're going to have to sections one for the mission and one for the form. Let's build it for first, try the farm. We do not need the action. Let's call the farm group and give it our post form. You also gonna add the engines. Submit that we listen for the public event on the bottom and here you passed the safe post data. Now we're going to need a title. A content in a taco bottom. Well, it's just odd feuds. What? You don't need the type. We love the math input so we can get the guy material styles. So the placeholder And here, let's give up from control thing. It's a title. Just copy this one and not for the content unless use text adding, you remember we need to close it. All this added much. It's like Tuggle. Let's report aired on inside. They're gonna ask, published you're gonna add a form control name and passed the draft. The firm control name will link the data. Strong the user input. So our beck ends now let's just greater bottom and the farm is ready. We have righto content, the draft in the bottom for submitting. Now let's give it some styling so it doesn't look so bad. Well, let's give it a farm field 100 with ourselves and that the red looks much better. The great glad that any much as well. So let's go ahead and on. The image will give. It's 100% with as well. Now back. No components, Dasburg. That takes time, man. Just leave the place for them here for the image, which your bank to create later for the best. Save it and nothing happens. The farmers not getting reset it and you're not getting any. Sit back from the component, so let's cool and find out why. Problem is in the bottle because it's not doing anything. Nor is setting Larson in the doctor you have submitted here. It's Ah, Seiple summit, hopefully called before. That's great. Another test market publish and safe and in our fire base at the base. Just refreshing here and don't have our posts collection. It's it's idea. And he populates the elf with the users. The current users i d here was intended have zero collapse and everything works. 16. 4.3 Post List and Image Uploader: Now let's continue and add image upload for our block post. Have the place for the union. So let's deleted and start called when anything could with attack file skit. The name. It's fun so we can target the label. It's a guy thing. This is basic, the same as we did for the user of attack. But this time we're gonna display the image preview. Why did they use their It's finishing up in the post. We're also gonna add a progress bar. But let's only show it if there is an upload going on, which is the hidden directive from Wrangler, and you're gonna check if there is an upload happening. This upload percent, we're going to get it from the upload task. Now, let's check in the material on learn websites here in components he screwed down. Here's a progress bar in you. Just fuck the FBI report and back in our up list added to the material. Now we can use it, but Progress Bar, Let's check the guy for this Progress bar in the overview you have ah, indeterminate that is gonna keep blowing at the terminate progress by which you is the one that we're looking for. We're gonna add the numbers that it's gonna is lonely. Increase it to the end. Let's check the court for this one. It takes ah mode in our value. So let's just stop this and we can add to our competent here. I'm just going to face that you so keep the same is that's the style of the Progress bar. You're going to add the upload percent a sick this we're going to still create, and this we come from the PLO task. Now let's show the image. If you like to, you can show up. It's ref with the link. I find it to be ugly, so I'm not gonna do it. But I assure you that you are addressing here, going to use the dollar, the royal that we're going to create and pass also the A C. So now we're gonna display the league. You can write something here if you want. Click this link That window. This also will come from the up loader task. So no less at the image during much docket sides and the source we need out there for now on the source, you're ill. You know the deep lis, other class, so you can give some style and we're also gonna hide it. If there's no image have been looks like you're set. We have our imports. Uh, you're ill. That's gonna be shown to the users and also, uh, the image preview. So let's save it. We're gonna probably get the narrow no more. Don't we have the fine and I click this link. We can also are the same over there, but I won't be using that thing. So disappears because we don't have it. If you see this for a four year, that is the image again on the user's reading the same. And, uh, to fix that, we need toe ab this, uh, needle stick official, the royal or show these and what this does is gonna trick. I'm glad to think that there is an image this will fake on ah five system address, which would display are empty image until we received the copper image so you could save the air is gone. Now let's go get this information and creator upload most image making up force. Best birth. We have all safe post knowledge. Greater upload, post image. Let's create our upload post image taken the event now saying you need to create off a file in a pass. Viable. Take the first cloud that appears the rig we're going to check if, uh, what's being uploaded is an actual image. Let's return alert. And if they use their ads, any much less get task but not Is there started? You're gonna pass the bus and the five. So let's get this started. You know, Constructor, this is uncle. Are fire storage coming here? Now we see. Remember, you don't love your ill and upload percent, so let's create it now. You want the body balls in you, but there's upload percent. I need to be an observable number. This would be observable lap string. And let's just move this image around here together. Now these but Donald around you're be equal to the task dollars, saying for the uploads, we're centers changed. Let's also look some results so we can get some feedback. Well, let's get the dollar the euro and subscribe to it by this. We cannot get the your I'll only and singing the image. The reason we're doing this is that it's because this is ah observable as we created on the top. But to save eating all that happens, we need on actually string. So we're gonna subscribe to it to retrieve the euro and save it to the image you? No. By saving this euro strength to the image we can using here enough safe pose for in target . The image will be equal to this. Yeah, well, that retrieving here. So let's go. I have been tested. Now you see, the click appears before, but it's because we have the observable. We don't have the result yet. Let's create some they're supposed to you motor gypsum, my savior. Now in a fibrous concert If you go to the database we have in here the post and the image easier, you can copy it and best thing, the browser and you have the image of that. If you go to our star Jingyu, we have a post which we give that dressing here where to put and that's our image. Let's add some CSS so the image won't be looking so massive like juice. I'm just gonna based a year for sick off time. We'll have the one before, but now you're gonna is likely change it. Now we have an image preview. Now let's test it again. Knows display nicely with a little shading here into the image loads miss out some more small. So making a fire base. If you load, you should have another image, then do that. The base even have to Now, now we save it by students displaying the whole bathroom here. If the resent and must remove the image, it was an empty string. Next time you upload something, it will rez at the post and was at the image. Now let's display the data we created in our most please. We're going to import observable. We're also gonna need to report our post model in a post service and from the Post service , we're gonna create a function. We'll get most just other here, toe the and you need this post gonna be equal toe this get post and we're also gonna add the post service to our constructor. Talk the post service to our constructor. Now, let's go ahead and create these Get post, You know, Post Service here at the moment, I'm gonna have the creates Norris on this get posed back in our users list. We had the same get users. And in our service, we have to get to user here, use the user collection for of this collection, and we Lincoln toe on addressing in our database, and then we call it a value change or needs. But this time we're going toe. We're building a crude, so we're going you're gonna need to delete. You're gonna need to open the eight. If you want to need to show data, you can use the bottle. Change it. Returned the data, but you won't return on my d which gonna use to target the document. We're gonna need a different way to get our force so we can get the time d Here the angle are fire gets home page. If you go to fire Starr and collections, he has some explanation off What I just said. You can stream a collection with the body changed. They also have a snapshot change and that's what we need to get. These were turned both the idea in the bathroom. So let's just copy this blocking here, and that's over. Nudes instead of the Value chain Spring before go talk full service and start to build that post. I need to be observable off a post. Terry, let's just face that block off gold from another fire. True. And let's change this one here. We're not gonna do this. We're just gonna return it. And here is supposed go back to our rece components. Everything seems okay and go to our block post. This works. Now Let's just create our HTML gonna under May, which will then look through the posts you for. But most off boasts on their A C By remember, they think by pull you all toe unsubscribe from our observers. It was a much occurred Well, it's other. Anyone there's gonna be most humans out will be the less. But that post title, let's add a fallback in case we don't have any image to display post you much. There's no a witness at the math content. So let's under content to you have a title posted by the L tour A 90 for the bugging purpose, the evening just like super big. So what's going on? Some CSS our blocks that look nice next you gonna under the elites updates and the collapse functioning here 17. 4.4 Post Detail and External Libraries: Now let's continue our left off and create our post detail page. Create our detail his first time they from them. And it's gonna be exactly like our post least. So let's just stop it. And here on the mat card we're going to do checking their supposed with the NGF. You know what's pumping it? We're going to use the activate route so we can grab the i. D. From the bureau ill. We're going to need the both service and the postmodern so we can have the types from the model and used the function from the full service us great up, Most valuable toe. Hold our post subject. No, let's create, uh, dysfunction. Get both. Let's make it void. First you get the idea from the euro. We still route? Sure. What wrong, my doctor? Good idea. Did activated route in the constructor of them. Well, services. Well, no. With this idea, we're going to pass it to our function in the Post Service, get post data. It passed the idea from the euro. Then you're gonna subscribe to it. Something that the post but is that equals that most results. Good. Now let's go over to our post service and start creating this. Get post that a function Most nothing diversity The idea from a component the string. And here we grant toe call for ah, Post Doc from the left tire store document. Same as we did the collection as to a post doc, which is important thing here. Now I can use to start government, give it the idea that we got from the competent and then we going toe return it with a value changed. Well, everything looks right. That's we need toe make a link in here. So it goes to the post idea. So here, in the component, least in the math card out there, think post that I do. Now when you click past the idea separate mentor. But we don't see anything because you have on it at the function to the NGO. Need the energy on it were initialized a function when they open, it is built and now we have our data. Now let's create some block post so we can actually test it correctly. Here you have created a few block pose so can display some data. So, as you can see here, is this playing like posted by the city and is also displaying like a weird date for months . Let's change their now gonna create a custom pipe with JavaScript library, cough moment, Js and what it does it creates. Ah, human readable date for months. This is the website and let's go on docks and what we're looking for is the front. Now. This will display something like some minutes ago, like four years ago or a few seconds ago, which is much nicer done. That's word number biopsy number. It is used to change the way you display your data. So let's go ahead and create. We're gonna add it to the share models so we can use anywhere in our up and you generate by speaking to share folder. Let's go from now. Why, okay, but they did the sharmila do. Let's see, he was declared. But we also need to export it so we can call it in our component aching. That's known. Let's check what is a pipe. You have an import from pipe and pipe transform, and I have the name. From now, they take a value in some arguments. Hearing it's to make it a string is gonna display not human readable manner. Now let's see. Stall moment. Js Yeah. At that moment isn't stall. Now that you have, it lets important to our custom pipe start us moment from Molins. Not the only thing we need to do is tow return moment, passing the value and call the front. Now function there comes with the Momentary s library. This is a very simple biped, but I do recommend you go out and learn more about it because he can really help you out. Create better calls. So we create our pipe, we import with the clarets and we exported. Now we read to use anywhere in our up Let's add it to our post list your boo to R h d. Mail posted this dot html here in the Post published, we can use the pipe character and pass it. They front now by I need to save it. You see the difference in here on the posted by. We need to remove this own eager because it's he's not a society anymore. That posted by a alter 10 minutes ago. Job me. That's a rule in court in minutes herbal. And it's I go and create a new post now, receiving a few seconds ago. No, not you. Click it. We're going here and the Mets are way too big. So let's go and change the image sizing here so we can better display our post. It's gonna cop the same from the post list and based in the details. There we go. We have it one minute ago. Now, so far, a blood looks quite all right. So no less abd ability toe delete. We're going to add the clap, which I can't find any. I come for it, so I'm just gonna change it. I didn't even changed the name. We need rights up to you. We're going Also plot, edit. But before we do that, let's go back toe are up and the former is that he wasn't working properly. So let's fix it now. And the reason is in here, we're not supposed to return this and that needs to be inside this. If block the Wise would never work no list. And now the rosettes Look, here we have it and he tells you are wondering where they get this tax from. From the website called Lauren Ipsa, He they usedto use it in an old newspaper as, ah, next placeholder. Very helpful and getting different language as well. We still have this ugly user. I d here. And also it's rightto bakeoff opposed to have everything here. So let's remove the blood content. Let's change this to be the author's name. Now, if you scroll down, you can see that you have ah, empty image in here and also a 403 error. And that's because I upload. I just upload this image now and the and this block posts had the same you image before. What happened is when I upload this one, the image had the same name. We are using the same name off the file the user select. And when you upload this toe fire base, it will override the one that is in there and keep the same name. So the idea of it will change. But the name used to be the same. So this one had the old I d. And now you cannot find it. And this one Although we don't have a fire duplication, this one has a new I d need. In the next model, I will show you how to fix this issue. Let's add the ulcer. And here in the post least let's remove their post content. So it's play less data in the main page. We don't need this Supposed that the anymore. This was for the buggy purpose. No, it's better. We only have, Ah, the title and posted by Let's change this one this posted by title we're going toe. Add another item toe the post model. And this is a quick and dirty way off. Doing that goingto alters i d. Now we add the one Let's go to the best board opponent here in the form data we are targeting Outer equals they current user i d Let's add this idea here so the water will be the off the off states and here we're gonna get the displayed name, but the display name is optional. So let's other fall back and last day user in May as well, just in case just like that issued work. So let's go ahead and, um, checking your fire base. If I based first, I would delete every posting here. Speak careful using this in your production database because this is very destructive and There is no way you can recover it now. Let's create some block posts. Save well, you know, it's posted by my knee a few seconds ago. So you worked. Let's add another one. Any resets and it works as intended. You click and I'll finish. Are opposed to tell Paige. So I see in the next lesson. 18. 4.5 Post List Item: Look, guys, welcome back. R Block's turning out quite nice to have, ah, least of block Post. We're displaying image. A title posted by the user were using the moment library to display the dating. A nice Vermont If you like you goto detail page. Were you getting the idea from the your ill and using it to pull the data from the database ? Now let's give the users the ability to delete the post and to like it as well. I know, I, we added, Here clap before. Let's change it for training. And the reason is I wanted to do like the clap from the medium website, this club from the medium website, but I couldn't find any icon for it. I found the one from the Material Icons Library, which seems all right, so let's use that one. Let's changes for trends in here. The change we need to also change in the post farming here in the dashboard. Yeah, let's go ahead and start toe, create the heat and the little abilities, and we're also going to add that trending bottom. But before that last cleanup are up a little bit. Here we have the post least displaying the actual data. So let's move it to our done component like we did with the users. So we can display like like these for that, Let's copy the most least competent and based in tow. Are this title knowing you toe get this post posting here, but that we're going to use the input from I'm glad Core post. No need to under to being part. Yes, Anything for deposed one of Let's get our constructor service. Okay, no, let's created the little update to live, going to create this delete function in the post service off for not just let's just past the idea to it. And let's also create the update. You're going to create a new object toe to get the data front of form, and we're going to allow their users to update the image, the title content And if his draft or not So cost form doctor, you can name is whatever you like. - Now we're gonna call the full service, use the update function that we also gonna create, and here we need to pass the both the I. D and the farm data. So post idea in the form data object we created in here. The Post I d. Will come from this posting here, which is they put from the post list component on this list item. You're gonna have a bottle to toggle between a date and view mode. So let's on our editing here and make it false. Then after we done with sending the post data toe update, we're going toe make it false. Now they're both are false because the user's gonna click from the front end and make it through, and then they're gonna be here, JT. So they're gonna click update and he would turn false. So this is the default state force, which means they view. Now let's create that trending bottom. Tenzing, you take a value number, we're gonna check if there is a post. And if there is, you're going toe on this post service and you're gonna called update again when a past the Post i d. And here we're going toe adds trending and the value last one, these every time of the user's gonna click in the bottle, it you add one. Now let's go in. Create this functions in our full service, you're fairly simple. Escalated the lives the deal it We're sending the idea. So let's catched over here, de perhaps drink, then going to return. It is dot Get most. Pass it on. I d dot delete the stock deal it comes from uncle are fired too. And we need to create this. Let's not get posters. Get post, which you're gonna create. Now, this get Post Data is returning on observable. What we need is just a reference. So this place in them at the base, so let's create get posed. Six. And I did. So you just returned spotting our database. Just post you're gonna pass that tidy. Okay, now the air is gone. Frustrated update. You also receives an idea given died, and you call it a date and passed. Did that You were gonna receive that as well. Us in the component in here update We sent to the Post Service The Post I d. And, uh, that. Let's just keep it same. You could still call it that, and it would work, But let's just keep it the same. Just Montana Standard. Okay, this is the This also is done looking good. Now let's be the front end. We're going to toggle between view and and adity that's great! Are aged email so we can see our work at the main. And here we going Toe Engy for we're going to look through the posts that post off posts. You're gonna add the casing pipe. And now we're gonna call our up the Post list item. And here we need to pass the post back to it. So this post is this one here? You never sending it to a post list item he read, Have the post. Everything works. So now we need to tackle this post list item component dot html. So let's create the main containers and then we start toe, create things. Let's delete everything here and start again. Wait. Then we would have to thieves. One hidden everything they were. Don't not editing and on each less other math card Bill Most adity most Okay, let's tonight your moat. We're going to add a mat Actions. So let's take a look at the whole deal. Card works in the examples. In here you have the title and subtitle which used before the image, the content and here the bottom have like an action footer so you can put some bottoms. Here's you can see you have Ah, Mark the much Heather for attack to subtitle a much talk the matter content And we're gonna add this much card actions in here so we can put some bottoms. He has some helper mets that we can use toe align items like start or end, which is handy. Let's under my action flitter So here I'm just gonna give some space and start You are much card auctions in him, okay? And we're going to add a few bottles once per day. 21 for edit and one fertility. So let's start with the transient bottom. But on inside were going toe add a lot. I come and this one I'm gonna get the what's hot icon when it's like the class. No multi dangler. Okay, now let's align. And so it stays on the right side. But, uh So when they use their click on this on this, what's hot bottom? We're going toe, have a click event, and we're going to link to the trending post, not trending. Let's add the response so we can see how many times the bottom was clicked. It's not fancy. Now let's add a few more bottoms in here for the elite and the it it moves lips . Yeah, it. So when the users click on the edit, we're gonna have a click event that we set editing toe through. We have our icons here. Let's Adam, Benji if directives So we can hide this bottom. If the user is not that pulls out, You're going to compare the current user idea to the post outer I D. Yeah. Now we need to get this authentication service and make it public in our component. Looked yes, Here in the constructor, Ask offered a public oh, off service. No, it's spreading. It's a knife opening. Ah, incognito. The edit bottoms disappears. Let's also add it to the village bottom. Only the owner can delete the post. No, I disappear and it still shows in here. Perfect. Now let's display the batter very much. Doug, this source is gonna be there. What was that? Much? Unless the out that's posed a title, we need to make it hit them in case there is no image. Oh, have our image. It's under my content, but card content. And here we're going toe the title in the mud cards. So title those title both kids by after most published Let's on that Front Now by Save It and their habits, we have our Where does it come from? Posted by one are ago. No, the click doesn't work, so let's add router link. So here can be tricky because we have our buying. Here are Footer the actions, If you are the router link, toe the card itself. When their users click anywhere, even on off this bottom, it will navigate them to the post detail. And that's not what we need. So the best place we can put we could actually make a TV over here like this here, doing absolute both image and the mud content. And at the router linking here, it's gonna be the Post. I'm being so like this. The link will encapsulate both a much title and subtitle in Here Now, when you please, there's Ah, blue border blessing. That's the focus. Okay, so he works. I think now we need to fix this, not a number value, and the reason we're getting there is not a number. It's because we created these to block posts before we added this trending to the database . When the farm was created, it was collapse. We change it and then we don't have it in here. We had the collapse before. So if your aunt you get them, not the number, because it will try toe Acto. No. So first we need toe. Let's change in here for zero. It's the volume you have before that we should have. When you create our block post, these values should be set toe zero. And here's the reason when you are safe, post trending is set to zero. So now let's create one and test it out. Spit on your block post. But here, now it's zero in return. Make it the hot topic by increasing any of it. If you're looking our database, we'll have doll here. Zero. It's changing riel time in our database, and now I can see here that we have a drafts set to know, and this is a mistake as well on our safe posts. The draft. It's trying to get the value from the form, so we needed to be forced by the fault. Now let's try again to create ah Black Post and I'm not gonna set the drafter published. Here's the new Well, I did and now is false. So now let's hook up the deal it bottom, and then we can go on and start the editing moods. So here, in this work like event, we're gonna use the delete function and you cannot pass the post. But I d Let's test it until it and was the latest. Now let's create our editing mode. You need to have the form in the image upload. So here, let's create the mat content. Let's hope that blow there from the dashboard. It's you. Let's take there for a section that's just basing your when you collect like I did to get the funding port. So it's working for now. We're gonna solve this problem singing after So now that you have are uploading here, let's check in the dashboard component. Let's go up to this upload front from there, spacing him between and we need this virus. Uh, so it's important to observable, and we need the storage as well. Now they upload, upload. That should work. You just close some of these files. Look at the terminal. Now let's create before me here, and they found with the fare from the post because we won't be creating this former group we're doing. We're not gonna use a farm building. We're gonna use the template driven form, which is a simpler way of creating forms. No, All there is gone. Must read it for me here. I'm gonna give it a name, and that's going to use the energy form. And this is just so glad knows how to on the two way that a floor. And we're also gonna need ah, click event here, which you update the imports. Now, let's create the farming puts inside the input. Tell me the type you're gonna use the two way that a binding from Mugler engine model. Let's give it a name off Tyco. Just copy this one and make for the content near list. Change it for the text area. Okay. Really need to add the much lighter now. - Okay . Not this name. It's we needed So there Engine form can target the the input. And this one is the to wait, that a binding off angular. It's not some CSS. Let's also out some spacing there something to be our times in you. Here's some spacing down the top. Just once should be enough. It doesn't. All right, so let's at the bottom with the submit. Now, let's try to change their emerging here. Uh, so, like a defense fire and it's not saved because within a on the emerging here. So yeah, we need to target the image in that. Is that image your URL? Okay, if you go and try again in exchange Now we're getting a nearer when you're trying toe did. It stays that undefined following huge image. And here is because we changed So the new image. But in case the images not being updated, it will give a narrow because you won't have anything to add. So we need to add the old image here. So if there is any new image, we're going to save that. If you're not, is gonna show there old one. Well, let's try to it. It's something and it works. So now the So we're name your form, referencing the data in a database, and this is this impacts to get the information from our database and displaying here not form, and then when you up to date and save to send it back to our database. So that's the template driven forms in Angola. Your gods, This working, we can delete off our post, and we can't addict it change the image. Save. So in this module, will we learn how to create a block post with her image upload how to use external library . We used the moment library toe display data in ah, human readable form. We can delete, opposed, and we can also updated. Now, in the next module, we're gonna create a photo gallery, so I see that. 19. 5.1 Gallery Foundation and Uploader : welcome in this module. We're going to create a photo gallery before we start creating anything. Let's create a new get brunch. Two people work organized. Get brunch about death and master. Get out. That's be for new brunch and let's call it gallery. In the previous murders, we when we needed toe upload the photo. We Butte, the upload a right in the company uploads photo. You're ill and on the Post as well. You're supposed to have a pillow to post image, although this is OK for a small application or a single file like we're doing over here and on the user, it can become cumbersome, repeating the coat the same coat over and over again. So let's take a look. How can we decouple the up loader from the component? We're going to create a component called upload and that we manage the upload service were to save it, and we going to receive this information from the component that is using the upload service. So let's create a new component called upload. We've seen this before and degenerate component. Let's put it in the share folder so we can re using any other companies and Let's call it upload. Let's also create the service as for service shared, But this time I'm going to put inside the uploads. Folders are we Keep everything organized. You can just copy and paste it when you need this feature in your next project. Let's call the service upload and added to the share module. Okay, it was updated. You get the component. Let's go ahead and export this component as well because we're gonna need to insert it into other components. So we declared, and then we exported. Let's start with the HTML First, let's insert this component. Some are so we can check our progress. I have my server running. Yeah, I'm going to add it in here toe test in our users dashboard. So go to users dashboard here in the HTML. I'm just going to remove this. Commented out the dash post dashboard for a second, and we grant like the up uploads here. Lord works. Let's put it inside the mat cards. Sorry. We can see better. Okay, it looks better closing. Let's go back to the HTML. And here we're gonna delete everything. When I started for label a small fire. You hear when you think put but five. Let's watch for changed detect. Then we, too will give us a never the event me to create is the tax function, you know, component next to me on the bottom and here say Upload it will be disabled in case there is no selection like a fire. And it's not working at the moment because this is not yet hooked up with components. So now let's go to our component. And here, let's bringing the upload service. It's great that that detect function so we can listen for for the change. You're gonna get the events from the input and here is gonna be He's not selection toe undersea here that to be on Finalist. This is from the HTML AP I this finalist. So here we are, detecting a change in here when the user clicks and you were saving toe this viable and the butter is not disabled anymore because there is a selection. Now where do I get these things from that's council organ? See? Oh, OK, so it's a very good debugging strategy. Toe console luck, everything while you're working. So we see what's happening in your court so now, let's you What's this event? That target that fast gave us back. You send it a photo. We have a fire list, which is the fire listing. There. You open it up. We'll have two things. One is length and one is a zero zero is because javascript is ah zero based index. If you in case we select more files in there, we can try it out by having a multiple, you hear? Then, if you're going here and select more fast Member Finalist and you have zero, that is the 1st 1 that held before. And then you have everything so like this, you can target each of the files received. Let's cancel or one of those files you need to add, ah, rate and call for the number zero, and you can do the same. And you can do the same for any of the files like number five in there. So when you console log and then you got the file list any here have this. 957 5970 find 171171 is the number five soon. Okay, enough of this. It's just that constant log in there. So now we have that. But this bottom is not doing anything. Even if I select a photo, nothing. Nothing happens when I click it. So let's add a click event to it and create a function. Give it the purpose that's called Click Event. And here, let's do on upload function. Now let's go ahead and create that applause. Let's remove this multiple here because we're not gonna be doing multiple uploads at the moment. So here we're gonna get that selection and pick, then five out of it and saves to, ah, variable call five straight find viable and called the selection and use the zero for the 1st 5 on the list. So let's get that if statement to check the five time like like but split and we're going to split on this slash and let me just finish dysfunction. You don't get the near let's conserve luck the selection again and see why we're splitting the filing here. Choose a far here on the file list here get their final East, and inside the zero, you have a five type that two options image and J. Peg. So we want to find out if they if the top, it's an image. So here we're splitting on these large, so get only the image. And then we're gonna call for zero because there's Ah, a much zero J peg is one. If you want to check for like if you only want to set the PNG fires, you can do that any. You would call for a number one instead of zero and then do Ah, Iko, iko, PNG or J. Paige. But we're going to use image and because you can't accept any type of image and we're going to use the 1st 1 zero. So if that evaluates true, we're going to send it back to our upload service. First, let's get terrible service in a constructor can be a private load service again. This you can aim anything like. So let's do another blow task. And here we need toe think how are a P? I's gonna behave first, Let's do the else and let's go. So look on their own a year, Life too much only. So what is it that we need to pass to our upload task from this component? Scott checking up post here we have ah, uploading here and here. We needed toe Get a buff in a file. This is this is what the upload function from the storage and glorify storage asks us a pathway to start it and what we're starting. So you get a path, anything. But this is not gonna come from this component were going toe Addis competent somewhere. So we need to ask the parent component to give us that information. And we saw that before we use it the input to get information from to pass information between components and here we need the input and it's going to ask for the bus. Now. We don't need toe ask for the file because the fire is gonna be passed through this event here. So let's add is that buff And if I'm first, they need a path for to start and then the five. But we're also add some metadata here so we can save some information with the we define. So let's create another input. And that's first method that would be the turns. Is that meta? Now let's go to our upload service and create this upload task a blow task and we are receiving a bath a file in Meta from the company. You're the constructor. Let's start to in court what we're going to need for Lisa going Gonna need the glyph I storage and also they I'm black First art collection so we can save it somewhere. Yes, they're gonna need on the observable. No, with our implementation from before we had some problems on the uploading functioning he recreated Let me uncle meant the blogger dashboard so I can show you. So I have all these image And then if I create a new block post and I use the same image because we're not changing the name off the image from our fire, I have one more. Best best I see it. And I forgot to my blood post and I refresh this one. That was this had the same picture. Fun it disappear. The reference to our storage has changed, so this block posts won't have where to find the image anymore, even though the image has the same name. So we need to fix these. So we're gonna create a new, unique name for each photos We work load because you might want to put same photo somewhere else in Europe. This is one implementation that you can use. There are other ways, but this really work for us. So we're gonna change the name off the photo before we uploaded. But I commend this back, back in our upload service in the tableau task. We're gonna get them filing, and we're gonna create a hash out of it. We use ah half service before the MD five when we created this good about our hash for the user. I d here, So let's use the same thing. But this one here and here we're gonna create our cost go name Hush because the MD five hush string because the funding might be the same and they hash well, probably end up being the same as well. We're going toe, create the hash with the dates to eat and that we'll most definitely avoid creating the same file name. We're gonna take the name and you're going toe other new date to it, and then we're gonna hash it, and this will change everything from the file name, including they file extension here. You won't be showing anymore if you want to get that, it's although that's not very important. the file type would be stealing here there all the time. If you need to get that, you can do that like this. We're going to do the same as we did before, But this time we're going to get the Atlantic station, and then we're gonna cut to the name hash. So goes to file. It's called file extension. Find up time. Let's split. Now. We need toe split and get the position one in our All right. Well, now we're gonna get the final name, and that will be the name hash dot file extension. Next. We need to create a reference in our storage buckets toe. Know where to put the fine knowledge. We need to import this storage in here in our constructor. Let's go ahead and and not import there. Five stars, all private storage. Mr. Ambler, Buyers storage here in the final stars. We're gonna call the ref and you're gonna pass that buff buff and also the name. So it will be a path which you get in front of component. And then he's gonna save with this name here. Now I would have to do It's great. A task viable called the reference on the bucket and at a boot. We're gonna put the file and then we're going toe Adam objects called custom metadata, and you're gonna bus our meta, which is the information from the component. Now we have this task. Let's create some lets get the task, download your ill so we can use it to save in our database. Integrate this, you under the euro, and it's going to be an observable string, he recalled. Task Then we get the no load of your ill. The dust gives all these methods in here. You can use it to cancel toe catch any error this you do this then and the country would work as, ah, promise that you can change something here after and then you can use it to pause to resume toe, get the snapshot This one is gonna give you like the progress off the uploads in total bites are so we can actually do some validation to do some conditioning. But hey, we're going to use the Donald, you're ill and that's a matter. So we need to add the parentheses and this would work as our up loader. But now we need to save it with the database. We have two ways off adding files to our database. One of them, It's just like we did over here. We at the image, which is Ah, a few in a document. You have a collection, and here we have feuds and that how this image was added. For that we would need to update the fire start documents. We did that before for the user's profile picture and the block image. And we have another way of saving the file to let the pace, which is adding it as a collection, which on this case, what you're going to do now, You know, it's what we're looking for because we need every time someone uploads a photo on our that the basic we gonna need toe create a 90 for it so we can target it in our code. With that idea we could delete or could update, we could do things like what we've done with our block posts. Let me show you how would be this in tax for each off this one's first Let's build the collection we're goingto need to get Ah, I'm glad Fire star collection. So let's create were you hoping here? Call uploads. And this will be angler fire storage collection. Let's put any over here. So the two ways we can save this to our database, let's do the collection. They started close and then we're gonna call the FS collection and we need to give it the past. Where to save it. As we cannot save on observable tour database, We need toe get this dollar you're on and we're going to subscribe to its And now we need to extract the euro a lot off the observable. Now we're going toe Add some more information toe the You know that the base about the file So street that a variable and I'm gonna give it the object, the name and the euro You can see the name comes from here in the Royal was extracting from the dollar euro observable. Now we just need to do uploads but at and give the data And this is how you upload as a firebase collection. This will create a new objects with the name and euro and for the base. We also give us a unique I d that you can use to target this file after. Instead, the commenting here saves us collection. Let's actually add, uh, costs a lot. So we see what's happening on so long Saved us collection. And then we have the other type is we're gonna call the dollar Tree Oil. Subscribe to it again is the same thing the extract their hero. Now let's console log saved us Document field and he we're going to use the FS again called Doc. Give it the path, then you're gonna do updates. And here we can just do your royal That won't work. And the reason is because the document holds object key value pairs. So we need to pass that as an object. And there it is. It's under commenting here as well. Let's just recap what we did in here. You're changing the five name for Ah, hush. We're extracting the file extension and put it back together. You're referencing the place in our storage bucket and this is the task that we'll put the file you also passing it the metadata that we were receiving from their component. You're getting the task the dollar year old from the task creating a uploads fire star collection and also giving it the path forward to start it que We are subscribing toe that observable and accepting the euro. Nadine it ah object with the name and saving it to our database. This ant method we always give us Ah, unique I d. So we're adding it to our user. But before this can work, we need toe give it some information. So you're saying before we ask it for a laugh Also you asking it for method? Let's go and create this jury insider component And this has nothing to do with this. Upload. For three year Ali here, you're gonna leave that untouched. I just put it on the user's dashboard so we can have a place where to play with it. And I can show you how toe send the data from the user's component. So we need a path which is going to be a string in the meta gonna create a subject. That's great. Ah, function that well. Said it after we needs Oh, call it set upload data. He we need to connect the path and give the bathroom. Here we're users. So let's just at it under the uses, your idea, but to do that we need to get the users i d. So let's get the same here as we did with the user. Let's return these not off but user and always subscribe and extract day. Use the idea from it you're gonna is that path was the users. And then here we can use string interpolation to get the user I d. That's and this creates a collection called up close about the meta. So the methods and object and you cannot as many fuses you want. I'm gonna have the up loader loader, and that will be a the user. You idea. And let's give it on a website. So, you know, competent, we don't have any error here anymore. Let's check in our up and we're getting in there. The reason is that we create dysfunction, but we did not added to the NGR needs. So they function in and got caught night works. Let's test it again. Blowed saved this collection successfully. Let's check in our database. Just refresh it there. Have it a collection here and with a unique keys which you can use toe tag it the name and the your ill. She was created a hash name for it, and you should follow the same. It's upload. This was too true. Well, the same Photo seven's collection, you say, created a new file with a different name. Now let's check in our storage may remember we asked to save under this path user user You I d user uploads. So on our database he was like this Use them Is the idea uploads? You have our users User i d These are Q and the user. I d down here our Q. So this is the same. You haven't uploads folder now, and here we have the photos straight after up close. It was created with the name we gave. Now that worked. Let's comment out this this collection and use the talk meant for months. Now use a desperate We need to remove that Loads couldn't save it unless right, no saved as a dark Mansfield. Now, if we look at our database, we have ah, you're ill in here. Added straight in our users that So let's let's change it again and see what happened. We have notes saved. You see the flesh means that was updated, and because you're adding this Euro l object, always going to replace the one in here. And that's the difference between uploading as a document and or us ah, election. Let's go back to our our service. And here we're comments Ian on commenting. We should allow the parents component to set the upload type if it's going to be a collection or documents fueled type off upload. So let's under, uh, if state many here. But we need to get the information from the parents component, which is a user dashboard. We have the puff and the matting here. Let's add another one, let's say a PLO type and that's gonna be a bull. Um, either through our force here on the on our sets upload data, we're gonna call it no type. So if you're selling set, it took true. Let's say is going to be a collection. And here they think, let's make a collection again. Call new up loads collection, Save it. So now we need to pass this to our service. And to do that, we need to go to the users dashboards, html and here we're going toe aunt, the Apolo type, and it's looking like an errors because we're not. You're trying to send it, but there is no one to receive it. So now in our components, we can add in putting here. This input comes from the one. So we're gonna receive that a blue type. Now we've done that. If you go back in here, you save it and that disappears. Now that received that from the parent component we need toe send it toe the service like we did with the bath and the file in the method. So here this starts uploads. But having that and they resent us, expect three and you have four. That's because you haven't landed yet. Let's go to our service. And here we're going toe asked the same. Yeah, and all the area here is gone. You cannot use the upload type to create our if statement. So here, let's say if upload type if a low it's true you're going to save it as a collection. So let's take this quoting here. Yes, we're going to save it. Us. Document space, Nothing inside the block. Montillet of it. And here we have it. If the blood type is through which we said Toby through him in our components you're set through and we're giving it uploads collection placed over to save. So now let's go to our components. You will refresh just in case. And I'm going to bring my firebase again. You were expecting a new collection. Here. Save it. Let's send the photo upload. Save this collection Reloading. Here you upload collection. And there we have our file the same way. Beautiful in our storage you go back if the users user i d. And here we have a new upload collection breaking down. We have our file. If you select, they're finally here. You have the metadata we set and this metadata was set by the parents component user dashboard. So what if you want to set some up defaults metadata that we don't need to add it all the time. Like this one's would be good for for up the fault. You tell what you website it is. And who is that loader? We were always would want to save something ideas so we can on the metadata here like we did. But we also can had before we send it toe safe. Want some more metadata? We just need to create a new object added metadata. Mix with this one and send the new objecting you. So let's create a new cost. New meta. That would be an object in here. We're going to get the one from the top. They want that cancer the component so it can use the spread operator toe Adam. Here it's just hot. Anything here? Some Laura, but, uh, more not. And now the only thing we need to do is send this matter that new matter instead of the better. No, when you send a file saying that's collections the same as always before and we still saving to the new uploads collection checking our started buckets. I never have that second. Fine. See, which one is it here? This more data? You know, we don't that Let's change the parent information on how it's setting up our upload. That's changing here, Toe force. And let's also remove this collection. We're going to leave our database. Let's go to our users. I'm going to delete this euro, so we see anyone coming up. Now, if you upload, we should appear in there saved as a Duckman and very habits. Our new firebase field straight in our user. And this is how we can build a file uploads it receives that received some information on how to save that data. We can. You you can just drop it in your new project. And you just need to remember the a p I we set, which is the bath matter and uploads pass information today component and it will do its job. 20. 5.2 Gallery List: Now that we have on working up Loader, let's put it to use. We're going to create a gallery module. Then you're gonna have to components between at least another tale. We are so gonna create a service so we can connect to Fire Base to get the image. Let's create the macho and it's company. Call it gallery Engine generates module gathering that's added up module No. Let's create both companies inside the gallery folder. So let gallery List and Valerie get down. No, let's get the service and added to the Galati module. I have my serve. A runny. Now let's blood some images so you can display it in the gallery list. Competent now forced to use the loader in our gallery. First, we need to give the details for it. We're going to add it to the users. That's word component. Like the up last board opposed Dashboard. And here we're going to set up the path, the matter in the blood type now in the company and that Yes, here we had the previous one where we're playing around, So let's add a gallery in here that's going to be under the users I d Let's just make a comment in here. So we know What's the upload type 1,000,000,000 above? So you want art gallery collection you're gonna set to True. And okay, where This That we can go ahead and start uploading photos. So I went ahead and upload 60 much. Now we're gonna display it in our gallery list component, but let let's create some routes so we can see it in the browser. First, you need to import the routes. It's also important to sharing module. And for the rotor module, we're going to pass it's for Children and call the routes that we're going to creating here Now. Now let's great arounds take a path and he lets get Galati and the component will be that I released. Now it's been a big, big aladi. The detail which will take a 90. The component. It's the gallery bit. Tell here now that the base we have art, gallery and all, they managed to upload it and you're fighting storage under users. You have a gallery folder here with the images were uploaded. Everything works as intended. So now let's go ahead and start coding our gallery list. So you're the first to see what's going on. Let's go. So are rotting module. We're going to create a route for the route, which is going to redirect it to the gallery component. Now let's add the path which is empty for the route and then a component you're gonna add the gala released. Close it. And here was important. Guillory works. Now we can play around with Britain. This is just temporary outages for us to test. Let's start to build our service so we can communicate with fire base to collect us image we're gonna need to import store to Mugler First are in the collection in the collection. We're going to add a gallery collection that's an uncle are fire store collection. But any as we don't have any model for our uploads Now in the constructor, let's go for the jugular for store live with the FS, we're gonna need the authentication as well so we can get the user. You idea off service, you're automatically important. It's great. The function call Get images You were gonna need the user. You, Andy, which is there? Is that off? Let's get current user I D. And the reason we're using the current user. I did not. The off state that you i d is that, uh, the current user. I d set some full backs to it, which it's this one. In case there's no user. Okun skated. It will return. Know if this is if the user is open skating, we check for the user i d and we were turned it. But if there is no is gonna return No. So we're not gonna have on error. Well, so if you only put the off off state and call for the user and there is no use, authenticated are up, will break. And that's why we created this current user i d. Let's take the gallery collection and link toe a place in our database. I think that your idea And then it's gonna be a gallery. And this is where everything is gonna be star as our new collection Under days air You I d . Now we're going to return this that gallery collection we could call value chains in here. We saw this before working in the angler fire. Teoh gets Hubble page under five star and collections with so here that this is how we can return the values from this collect from any collection and set it toe un observable. In our case, we could use to display the data, but then we also gonna need later on toe the elite. So we need toe tag it. And to do that, we need the its I d. And the value change won't give it the idea. You give you the information, but you won't give it the idea for that. We need snapshot change. So by the chance returns the data. But no, I d. If you need toe, do anything with the data return, you need the snapshot chains. And for this you need to moppets. And let's start to console log things so we can see what's happening. Let's linking here so we can see the return back into our gala released. Let's call for that function in our upload service does not get much gonna create this in here now, but we need the quality service. What are you servicing that So now I can create to get images function here, and we're going to need that place toe hold the information so emits so observable any and that's Selma Ray, that's gonna returns. We'll be mortal. One image. So you hear that image observable. You're going to make it equal toe or Galati. Get images that should do for now. We're going to fix this. We student create dysfunction over there. Let's go ahead and start toe, create dysfunction. So let's return actions. My Here, let's just make a reference rate. And ah, we're going to create some and viable story started at them. He we received from that map become constant. Log it to see the result. Let's, counselor, Is that images? Now we can see the results. What? Using here. So you gonna create some valuables? We started at the payload. We contained the dock, which you then have some data between it and the same we can do for the I. D. And then you can just returned this. They don't spread the doctor. So we get all the information from reading. So this is what is coming from Are getting more dysfunction with a snapshot changed. Let's create that quick. Not by here, so we can navigate between our components. Let's go to our ah component leveraged email. So I was just based it in here at least off bottoms, user dashboard, the block I users least and the gallery. Now I have that observable return. When you go to gallery, let's take a peek inside. You can go start image, let's subscribe. And here let's just call. So like the results. We got the name theory, but you could navigate away and then we come back. We got the least and that's because they component that I wasn't ready when the component was built. So let's use disarray to displace and data in our HTML we're going to use the angle. I material greed and back into the material blur website. We're going to use the great list. Just copy. This basically is employed here and backing toe RR Plessis based. We need to get them a p I imports so in. The FBI alleges companies and pacing toe are module there there should go away. Just remove this once insides were going toe display the image. This certainly is Tau bay. The, uh, uncle er directive. You're gonna call for date you much You're ill inside the out. Let's given the much name and you also gonna give it the router link so when you click can navigate go inside the I'm gonna use the n G four. Now let's go for the image like a much off images. Give it the casing pipe. So also unsubscribed from our database. When you move away from the now we're through loads Nothing happens because you have the emptory. But if you never get out and come back, we have the rate And now we have a nice list off images in here. If you click in it, we have a narrow. So let's fix that. If you click on the image you get, um, you know, much routes can no much any rows. Remember, we created ah, I d in a gallery detail, but in our components were not collecting any idea or giving it an idea toe the route. So we need to fix that the next day. So we're gonna 60 0 and, uh, creator detail page 21. 5.3 Gallery Detail: the people's lesson. We left with, ah nearer, which is because we can reach a page detail when you clicking the link or gallery works can display the image from the from the server. When you click it, it won't return. Any value is because we need toe extract the image you were clicking from the IRA. For that, we need toe first create function that we'll get the magic detail on the database. Let's create a gallery doc here. We're going to start the value from the database and it's gonna be on Blair. Very start, though. Document off any as well. Who is that? Don't we can create. I get image function. We're gonna need to give it that I d. What? You're gonna get it from the browser when they use a navigator. The page we need toe get the path again for it. So let's do that. Comes to your idea again the same way as we did on the top off current user I d. And now we can link the gallery doc toe to the place on the database. These dark gallery doc Well, we caught toe these don't fs look. And then again Here's the buff, but we also gonna give it Give it the i d we got never see from there compliment. I just need to return. Ah, the duck And it the value changed. Now, with this function done, we can call it from our components Here in the detail we we need toe impart the activate routes so we can struck the i d from the rot. So you're part activates routes. So we've seen this before Here, we're gonna create linked to the activator out and let's go ahead and, uh, call baby Gonna be service says role so we can use that Getting much function, very service. We're gonna need a placeholder for the that we're gonna extract. So let's make it a much off any, and we're gonna initialize the get a much function. So let's go date it now get image. That's great. Valuable to restart it idea. We're gonna distract from the road. It's not chucked, but, um, Bob get and then you're gonna get daddy. Now we just need to use that function from there service and give it the idea. And we're also gonna subscribe to do observable. Will it be service get image, we're going to give it the I d. So And for that we need to subscribe. And the mop that much to our image placeholder In this component, we're expecting the i d from the relative, and then we calling the function we created in the gallery service, giving it the I D. And then we're subscribing to it so we can extract the image out off the observable, and we're setting our image placeholder to 80 here. Now let's go to our gallery detail dot html. And let's add some that in here that you will display when you click on the image, sustainability, everything you call it in the last cards here, we're gonna use the image. And also it's gonna being sourcing death. Imagine you're ill. Same again Here. We're going to add the image name, but we need to make sure that we we're checking for if there is an image before so we don't get any era here. There is image. We should display this. If not, we won't break our up. Let's have some month productions in here straight the bottom inside this booking a Nikon billet. The boat is a much icon, but, um, goingto other click event for the leads. We're still gonna create this deal. It function, but for knowledge is at a place holder here in our components. And let's just right there so you won't break up. So you click on gallery and go there were still getting an arrow. That's because we need to set up our routes properly. So here we need to add the module for the galleries Gallery module. Now we can remove this one. It's commented out perfectly, community. Nothing happened. So we need to go and set are out looking. Yup. Component This festival to gallery now. We received some emptory. They do that again, we get our aim is you click an image they ideas displaying correctly. So let's check. Why is he not, uh, display Any data council of this Getting an image off? No. So you get beginning? No, because we didn't set wrap it properly here. The correct path ISS users and we need to change. So it's a user user. I d. And then are a much i d if you click now, we were still getting on no value. So let's check was what happened Hey has to be fetching that data. And here I made the type when they're must write again Back in my Galati Have are sorry. Now you receiving? So now we just need to change it back toe this that image equals image and now I should work. Now we have our image school that we have about turning there. Let's have some CSS and make it look better here now. Component. We have a lot card and image, and some actions were going to target all of them. So I started the math card. Just give it some barging by five in lots with, Let's say, 800 excels marching out the story to your center in a parting off zero to remove those borders in science. Okay, not a started the image smic it 100% percent off the month card. So 800 It's a smaller targeted in that we can use Uncle about it out to move this icon to the other side. And we saw this before it was, ah, line spends I was over there. Let's just give it some space in here back on the CSS and had some lot cards, actions Let's give up bonding rights. 20 picks US body Botto 15 Fixes No Okay, No, let's just make her the functionality of the league's works back into the talk of one and out. Yes, last time building this village function. But before let's take a look on the official docks for the storage. What about the storage you can find here? They lit fires and here saying, We need toe great The reference and called the child's on the you much name. And then you called it The lids function on the reference. So let's go build this now so we know that we need toe use the image name you wanted to delete. But we also one on the left from that database. And for that we need the I d. So let's create your valuables in here. One for the idea. One for the name. And here we know that we're gonna get from the router, the same visited when they get the image function mop, the new gets. I'm being. Now let's create for the name. And here is just this that image that may people. Now let's send this information toe our ability service. So we can deal with far bays like in service a much we're gonna give it the idea and the name. Now, let's go ahead. And I create these delete image function. No service ability, much. And here we're gonna receive the i. D. The string and the name. Also a string. So to get the address, we need again the current idea. Now let's create that reference toe, find our image in our bucket comes you much reference to used a far very storage we need to important. And we need to add it to our constructor. Maybe privates storage. And it's Tumbler. Where is storage for storage and was important here. So now we can use it. We have this option we used upload before. Now we're gonna use that ref, and we're gonna give the base buff, which is Ah, users. And then the you i d. The user I d in gallery reference in the base bath. Now we can call child and pass it the name. Then you can call the lives. It's not organizing here a little bit. Let's console log to success. You much deleted from storage. Look, it's now we need to create the league's function for the about the base if s good luck. And also gonna give this buff When I put this one in here, Here's nationally to give the idea after that, we also need to call call the deletes and that's all have to do. We create in our image reference toe, find our image in a bucket. And then you were calling the delete function here. The reference takes on the base paths and the child would take the image name. Then we deleting it from our database. We get in the buff and passing it the idea and then also calling the lives. So let's console like this as well, you much of the Littles strong database. Then let's also, uh, all done here. Okay, let's test it out. First, I'm gonna bring up our database so we can see happen. So no, we have our gallery. You have our starts bucket with all the images reported before. And here is the user and the gallery and all the images ripple odor of its idea. So let's select one and click on the lids now it's been deleted from the gallery database and here we have 60 minutes in the Fury Reloads. It says in here. Five. The retrieve. So we have five in here. Let's go back there with another one five minutes in here. Let's elect another one. Let's go do it now They say it's for Was the little me there. And also the litany here on our storage. That storage bucket. So now we don't with the photo. Galati, Let's commit our work to get so get status. Here we have one on track funds, so we need to use get ads and then we can get commits. Thus, I am Galati future. Okay, I'll get brunch. Oh, goody, Let's merger toe our development branch and delete the gallery It Check out Beth, get emerge! Galati! No fuss forwards. So we keep a track off the branch, Stay with the message and say, Merced Galati! Future on that stuff. Have ah, work committed toe are the development brunch and we can go ahead and elites there. Melody Branch. It's no use anymore. Did Branch. That's def for the lift and this. Give it to God. So in the next lesson, we're going to start building our chat up, giving the user's ability toe talk to each other in real time. 22. 6.1 Module Foundation: Welcome to the chat module. Let's start by creating a new branch this march. We're gonna work in our chats feature. We're gonna create a lot of components, but let's started with the detail and the least components first made toward the model, though let's add it to the up module. Now let's great both components inside a chat folder. No checklist. Now let's go through its module first. Let's import the share module and the routes. We're done these many times, so I'm just gonna go through it fast. Here we are going to share module in the rotor module. When you need to create these routes, he and details later, we'll change for the I the but we don't have it Now let's keep it details so we can have a look. Well, that's no. Let's go to our realty Monjo, but still it this once. And let's siding here they chat module game. Let's leave it empty. Silicon controlled are assigned low Children, and then you're gonna look for the chats module. So let's just have the red director of the child and save it. No, A few look in the browser having hell. This links that we got before you go to the root is gonna read erectus to the checklist. And let's also have a look on the detail, their work stroke. Great. That's how the linking here for the chance. We're going to fix this. Ah, not by in a later module. Yeah, I just got the melody and I'm jobs. No, I have the one know that you can navigate. Let's remove this, not buyer for a second So we can have a look on how we're gonna display our chat detail. So here we want love Bar. The large part of the opponent will be where it is going to display the shot message. And on the bottom, we want user input. So let's create the dips. First remain to wrap everything around. What's that? Um, October bottom. Here's put Ah, not Michael. So then we haven't done. The bottom has to be much. I can't. So you get the round shape I was. Let's give them out to buyer color. You're going to use our upwards variable for primary caller you remember was set this viable in your in our style. CSS, we have ah however color and background color. They have it. We need to make a day icon caller to be white. I'm gonna create another Dave We're gonna on the field that will contain all messages from that shot. And what I'm using here is ah, met abbreviation. If you do a dot and put whatever name you want, that's gonna become a class, you can also add a hash. And that would become an I. D. So you have the one Lescott 81 for the input. And here I'm gonna other each shots, feeds and shot. There you go. So now let's give it some caller so we can see which one is which. The grand collar Rebecca Purple. Gonna Probably this one changing here for U boat. And let's give it a different name. Mitchum. See, Green. Now we have that you leave is that we hold our chat companies. May functionality. Let's start with the chat input. Let's make exposition fixed. Now we need to set up the bottom left and right, bottom zero. So it stays in the bottom. Now we need to set left and right. Yeah. Now we need to make this full with and we need toe. Make it scalable. So let's go to the Chatfield overflow. Why? For diverse car? Let's make it scroll. Yeah, and now we have this school bar in here. If you don't Hyundai, why, it's gonna display. I scroll both ways on a horizontal and vertical side. You have resulted in a vertical for the height. Let's make a cock. And here we know we wanted a 100% off the view height. But then we need to minus both the number and the input. Let's start with 120 pixels. Look right. So, Mr Have with some whiting here, the best way to achieve this is toe give both the toolbar and the inputs. Ah, height. So we know exactly how many pixels toe subjects. So let's give you the hype off. 50 picks us and for the bottle. Let's give it a bit more space. So hides. Let's give it 76 toes and now we know that we can we have ah, 120 to remove. So now we don't have anything here to school, and we have this ugly buying here. Let's make the overflow auto so it will disappear from our view. Now let's check if the overflow works. Let's make it the H Street and I'm gonna have faced it a few times. So they overflow is working. But we have this ugly white time here. Let's out this overflow in its on line. Let's do it. The altar here. You know, he works there. We have it. All right, Put is in there. We have are filled with this girl, and if you remove some of this, our school disappears. But again, I would have it back on. So we'll be nice if when the page loads, it's automatically closed out of the bottom because they should screw every time we receive a new message. So let's add that. No, the chap details. So we're gonna need to report some stuff running black or you need to have the view, child. We're also gonna need the elements, ref. And after you checked lifecycle. So I'm going to use this up view child, and you're gonna give us crueler this we can get name anything. This is forced to use you side are which steam out, call it feeds, and it's gonna be the limit reference. Let's start a deal with this crawler 20 here on the chats feeds whenever the chats feeds. Child changed in a case off a new message. It will love this crawler. We're going to use this after you checked spoken bottom. And now let's create the function to be a type of voids plane. Get the top off any you were. You target the element and use the chat fields. This group Ben but school because to escrow thing. Spro. So now let's Jack bringing this up in here unless were little and he goes to the bottom. Okay, so we don't hear. Let's continue, as you can see, because you haven't give you height 100% it is completely responsive. Let's just remove this from here and we're going toe. Continue with the creation off our components. Now let's create the chat feed and chatting puts now and your G Good morning chat Checkbooks and chats fields. No, let's export them so we can use them inside our child detail. You're less great exports already checking it, and the chance fits back in our child detail. HTML. We're going to add this confidence in here and for the chatting book, and let's start to build upon its first Let's go for the chatting, Put and aunt Former Field in there decide we're gonna have any foot. The only type. It's, um, not input from the material online. And let's give it a placeholder. Some message reporting there and see small. Let's not that I can so I can use it as a bottom. It was the send icon, which is the envelope flying. Let's suffix this you give it with the icon on the right hand side. No, the CSS. Let's target they mark form feud and give it 100% with. Now I have it. So right, Go back to the child details and remove that colder. You don't need it anymore. With that, don't let's continue adding components to our chat. The Chatfield were hold a list of messages. Now we have the detail and the least the least will display a list off trends. We will send you a message is gonna be there, and the detail is showing the shot room or chat window, which contents the messages and input. The kids will contain a collection off message that belongs to this thread. That's great A. To other opponents, one is message singler and our message Louro the message. The array that we're goingto having here in the fields. So try the human it toe added to the experts. Already message number can importing here. Message works. Now we can remove this caller as well from the detail. CSS. So our chats detail. It's complaints for now. Let's put back there. They're not buying here from that company. It's just come here and on equipment and you can see it still works responsible. Now let's create the chap list. The checklist we know is a collection off trends. So let's create another two components and those will be the last promise. Get you bullets. It's going to be friends singular as well. And Threads Bureau in the Trans Unit wanted toe the export Serie so we can add it to the chatter list. Now the last thing we need toe create is not a component. We need to create the services and the models. Each of those gonna have ah, model and a service. The message in the tread so we can keep them separate from each other and you'll be easier toe build upon this chat in the future. So that's good. Eight service for the message. I said, you singler. As you can see here, I didn't pass the dash am flag so he didn't get added to the chat murder. So let's do it again for the transit service and I'm gonna pass the flag and I put in the chat module, so it was updated. Now, if you go to the chat module you see here, the providers, you that shot threat serves or sandy. But we also need today the message servicing here. So let's add it, monolith service. Now let's add it to the providers. Okay? Just remember to pass the M flag so they need to do it manually, and I must create them the models. If you remember, we cannot. Them, like a jet engine, generate class, but you'll be added without a model. Took its name, which, let's add wanted without. No, we have our class, and it's always good to keep them type off file. It will be a model creating your fire for the threads model. Look, yes. So now we have everything toe finally start beauty our charts. I just commit the changes to get before we continued, get on gift commits and for a message. So the next lesson we're gonna start to build our mothers and our services 23. 6.2 Chat List and Input: we're going to start with the easier part, which is the message we're gonna make. This functionality works first. So let's start with the message model. Give me that. I d. This will come from for a base. Every time someone sends a message, you're gonna explain a better. It's a string. We're gonna also show who send it. We're gonna need the center idea so we can use on our CSS and, uh, convent. Consider the actual message. What's going toe a time stump. It's gonna be a date. Okay, doc, let's go to the message service and start building up our functions first. It's important. Firestorm, both collections and documents. We're gonna import the message model and the authentication service so we can get the user . I d. Now we need to create them reference for the collection in another base. In a reference for the single message inside the constructors. Let's import the glare Fire in belt Indication, make it private and the privates for authentication service. And also we have seen parking. First thing we need, as always, is to get a message so we can show that message. But I just think it's going to be a star. We need the reference, not let the base for you. So let's call the collection on the top and create a reference in the database with the collection you Let's creates our path chats. And here it should be like a channel reference. And then we're gonna have message collection. Yes, I also had a query on this Look up, we plus the ref. And then we used the ref about order by toward by timestamp. So we have our collection path in you and we have our future. So after we just need to return is that message Scholar collection, not value changes. Let's change this for channel idea, but let's make it so that we can get it from somewhere else. This i d Let's go date the sent message function, and this will take up a few things. Let's pass a channel idea. When we send this message. Make it they stink. It's also give their photo. You're ill Santa. Let's call my here center ivy. So this is everything that we need for our message object. The content also a string. So let's create an object that we can add all the information we're going to receive and then send it over to the database, escape the constant that. And here we're goingto Butor object. What area we could do like this, But like this, we're going to be repeating ourselves. So let's just use the new JavaScript syntax that we only had it once. Send the send her I d content the times thumb. It will be a new bait. So let's return. Is that message collection gonna ads and you're gonna pass the doctor after? Let's just consul log the results. It was successful. Message sent. Then discuss any era. Also also Logan. What message? No, I have a cent function and I get message. Let's, uh, the sent message to the bottle. You need to have the click events so we can send a message. But let's go to in the chatting book and create the scent first into the chatting book and here let's start tow, hook it up to our service. We're gonna need to get the extract them channel i d. From the route we're gonna need also they important message and the authentication service . So let's add it now. The message service, the authentication service and the message model here. Let's add a message String. Do we use it? Desire placeholder for their for that book on the constructor. Let's create our billing toe, a route message service and the authentication service. Now we can go ahead and create a sand methods. Let's talk to put the details together. So first the channel Andy this retaking that in its from their out. Now we need that photo. Your are this You come from the authentication off state, But what? You're ill? Just send them as we know, sometimes we don't have the display name. When the user just create his account, I do not know his profile. So we're going toe call the up states. First, we're gonna try the name, and if not, we're gonna give it the media. So the center of these the idea, uh, stopped grant user idea is that I think so. A message? Yes. You come from Our component is that message. So let's have this message hook to the foot on the port Feuds that's at the engine model. And this will send them the doctor. Whatever the doctor is toe are companies that Yes, these were sent here and we're gonna grab. It's down here. Okay, Let's continue. Oh, message service. And we're gonna call their send message. And you're gonna bus all this information. The general idea. What are you, well, sender, Sender? Ivy, we need to send this in the right order, because if you mess it up, you're gonna get different results in the and after this is done, we're going toe result message. So whenever someone sent something you and said this is gonna get them together and as we know, returning anything less making voids And that's our sense. Let's go back in our components that HTML and, uh, could eat the click event. Yeah, when the small clicks the bottle, we're going to call the function we just created. It was best, and there is only getting this era is because we're here in the service. We're using the message collection, but the messages collection has ah future in here. So that is bound toe break are up. We need to review the address down here instead of calling it from the collection. It's like that. So if you test again, message sent. Now, handle that. The base. We can have a look Have a chance. We got the new in here because yes, we don't have an idea. There's nothing the browser and didn't have a message. And then sometimes its test send by mean in the time Stone. Now, let's continue. It would be nice when the person oppressed enter you to send a message. If someone just want to use the keyboard and just press enter to send the message less obvious. Dysfunctionality now on our chatting puts component not? Yes, let's create a handle. Submit function and he would take an event which is a key down. And if there is an event, we're gonna we're gonna get the cold front it if you start 13. And this court is not like a random. This is the default cold for the he enter in, uh, keyboards. If you do a quick Google search, you're gonna find all the keys that you can use. So if that it's equal toe the enter key that the user pressed, we're going. Teoh, send that use dysfunction here. Now, back in our chatting, booked the estimate. We're going to add a kid. Our event this comes from Ambler Ambler is gonna be watching when they use their press. The key in you're gonna use that handle, submit function we create. And here we're gonna pass the event back to our function. So let's try it the best. And if I pressed Enter Message sent. Let's console log the event. So I'm gonna fast again Number number Santa and you have a keyboard event he was enter called Was Enter and here have the key code 13. So this is where the that cold 13 comes from from the keyboard event on the key. Enter. So now we can just send a message back reciente or you can send a message by pressing the bottom. Let's go, Let's continue. We're done with the shocking book. Now let's work in the message knowing you to be displaying over here. So you know, Mrs Service, we could eight this get message. Let's look it up on our component. We forget message. So here we need toe, get the Channel I d. From the euro. This is the route We don't this many times already. Let's imported first before. Well, let's start start to complain. So we need that. Activate the routes and now let's important the rest of what we need. Import the message and our message service. Let's get the observable as well. So you keep up with you. Have work to start the message already that we're gonna receive here. Let's create this message there. A messages observable. Sorry. Here's a message that would be a Marie off message. Okay, the constructor less Grady linked to the message service and route. And again, this too. We can name it whatever you like, maybe around. So let's continue the route. Let's get the snapshot, then the bottoms mob and get the I think now with a i. D. Let's grab the message from the service and we got I started observable. He's like message service. Call this function we create in their message and besides Arabic Channel Ivy. And if you remember on our service, we ask the general idea. Toby ableto retrieve the message. So that's the only thing we need to send it back to the service and we are ready. So let's call it here on the engine needs toe initialize the observable. When you open it is created. Now let's have the HTML so we can see something in the html were going toe add a fertile. So we got told the message. So and you for let message off message and you're gonna use their racing. Piper's all Okay, So now here. Let's think we could at the message straight in here one by one like, um, a loop off on our list, for example. But we create this chat message component so we can decouple the single message in the message array, and the site is for Look, we're going to add the up message Now we're gonna at least off chat message works. This is coming from the HTML. That's what stricken in there. And this and the reason wise. Ah, five of them. That's because in our database we have five message. So now let's get the actually information from this message to display our message. We're going to use this method Elvis and component least so you can display in a nice mother. You can see scrotal. We have with other tires and stuff, which looks pretty cool. This you save a lot of time so you don't. It by hand, would be something like this. So let's get the FBI imports and other tour material place. Yeah, you save it the check message and you were going to start to create our display list. It's a market based, and I'm at least item and the side that I think we're gonna have the image for. Do let there. That's the message. Not for two year old. So over the era, where did the image is not loaded on for angular? We're going toe. The same are frequented before. It's a great that fake find system address to display you while the message is not working but the out less used the use a message center. Now that's great. Lying my message, content another line and decide I'm gonna create a small talk and display the Time Stone and here I'm gonna Also I bet from now, by reviewed before you're gonna get the nearer because the message is in here is not done. You need to get this information from the message list. So human it to pass the message for it. Message equals message. Now, back in our component, you know, chat message. We need to start toe, create the hoax that well, get this information. So first we need to get this message from somewhere you're gonna use. That thing puts again. So we can I got to see for you. So here less on the input message. It's important. Message message model. So in the constructor, let's get the message service and also go to education service. So we know who it's are sending a message. Okay, lets all toting market right now if you say we should get the message is in here. Yes, we have it, but they look ugly. That's on the CSS that comes with them. Mark list item for the much There's are a lot at least about there. And this is owing the all this stuff is inside the documentation. When you copy the we can copy them examples and it's over there. Lots line. I'm not lining here as well. No, that's much better. You have that throw now. He removed after a Now you see that ugly type of time stump again? One thing I didn't mention before is that Angola has its own pipe. So here in the angular website, if you do a date search you're seeing here are dates by and he had ah you options you can use has tied the medium so you would have to pass the pipe again. Call it dates. And here past the medium are these and you have like that You can try the different ones from the website like a long or also there's one called full time time. So this is our fuel duty tax you can use. So enough of it. Let's continue now we have our message. Let's send enough a new message this and it appears in the perfect. And every time we send a message, it's close down. Let's remove this console log in here to clean up our coats. Your Sunday books? Yeah. Okay, so we're done here. Next, we're going to learn how to create the trends. And we also goingto Aunt Ah, a bottle where they use is gonna create the channel five years so we can actually have another reference for it. 24. 6.3 Chat Thread List: Let's start creating our chat read. Least we're going to have a least off active chat Trans e here. So we're gonna have Ah, no, But there this centre, whoever starts the conversation and the last message. So I'm gonna create a list item and then the user Cleveland off the tracks. It will take them toe the chat, slash the channel i d. So let's start building it now. First, let's get a bad mother Threat class. You have an idea which is a string? No better also a stink and we're going toe have, ah members. That would be an object, you know. Let's go for the thread service you go, we're gonna need to import the angular for store collection document. We're also gonna need the observable That's also calling the threat and the message model. We also want to need the authentication service so we can get the current user i d and the message service. Let's start by creating and threats collection and let's make a threads duck this. You hold our trade information and we also gonna need to create a message observable in a constructor. Let's make a link for the well our Fire star Authentication server sent message service. They all can be private. Okay, We need to add on both When it wads it that would you be threads? And now we read toe creator functions. First he took fetch the travel east from four bays. Let's again Creator, get threads. As you may have noticed, for every model we create, we are We also create something like this all the time Where the get threads singler always ask for a 90 in our case in here, we're going to get a profile light Gonna name it profile idea and I'll explain that later has continually forget threat list Read collection So let's get the place in our database a fast collection and we resides your chance Now we really need to return it is that threats collection and call value chains in it. Now to get the threads Let's link the thread, Doc here No place and again we just need to return and call vital chance in it is all No, let's go on our threads component the threads component that Yes. And here we also gonna need a desirable to hold the threads Observable import run back X Yes. And you get threads an array of treads. Let's import treading here. The constructor. We're gonna call for the that service. Let's make it. I live. And here on the NGO in it, we're going toe just called it. They get threats from our service, get threats and this were holds They are a afterwards knowing the HTML we need toe create. Ah, for Luke. Where is gonna display the single trance? So let's create the main dog. And inside we're gonna call the up threat. And here we need the you could endure form. And you're gonna let threads off. Threads can run on a single fight. No, there's nothing to display what we need in here. We need toe pass it out. The information about the treads, this one we need to pass it out to the thread component dead because that threatened now. Yeah, and you're gonna receive it in there. Child components. We've seen this before. Minuto is the input. That's to be a trance, no less adding, but here and less import threat model. All right, here is gone. And he would be a catalyst inside it. March list. I come like list item they're never gonna have on be much. The source would be that active for a number. And here we read other time that's just removed it out. And here we're going toe just the last message posted on this thread. Now let's create a bottom so the user can go to someone's profile and see a bottle to chat with them. So we're going to add a here, the users detail. But first, let's create the thread service, create red function treads this you take up a fine idea. Now we need toe great current user idea Variable and its story current using it. Grant. Here's an idea. So now we need to create them. Are trans object. If you're going here on the model, we're gonna need that I d. Ever in members, so that starts with the idea. In reality, it's a bit complicated. One. We're going toe give the profile Ivy and the current user i d. And here we're going to evaluate if there is already and i d with this format to profile idea underscore current user i d. It will evaluate this and the other way with the current user, I d. First and then profile idea if you neither off this ideas are created if you create this one. So no matter who is the sender, it will be only one thread amongst these two users. So now let's create about this will be the off off States photo You're ill and the members , the members, it will be an object. And here we're going toe ad both ideas and set it us to So we cannot use it for a lookups. After five idea, you're gonna set his through and the same for currencies are idea through. So if you're under anywhere, the brackets in here this is the way we can set the key in an object. So let's create a thread object. Now you have the information you're trans I d. But there and members splayed a path that's on chance. Find you this idea. You will be this one here Either either one off this, this or this one whoever starts the chat first. So now we just need to return. Yes, duck, give the threat path and you're gonna set. He said, the red object and you also gonna give the marriage through so we don't destroy anything in case there is something that already So let's use this to create a bottle. Let's add it to the user's details. So we every profile int have, ah, a bottom. Use it down. It's just not the lots cards for him, but a lying to the end. Let's at this bottom here. It's called it Send message. It's like the click event chat. Mr. Any created this one. Let's take a look. Users said the message in it to give the material raise but on Actually, we can do better than this instead of the bottom. That's ants, but many five any sides. Let's just add a lot Icon Chunk, Let's go to there is a detail component and create this chant function we need. We're gonna need the i d. So let's just take the same here. And as we saw in here in the service, we need the profile, I d That's what is this service is asking from this job. So we're gonna fileid equals today one instructive you out and going to return this not threat service. That's doctorate servicing here. Well, call me here that service, but great threads here. We need to pass that fine idea. Then let's just on the console log confirmed that was successfully created and also a catch to see if there's an era. So now if you click on this bottom, let's see if he creates anything. Let's create that now, in the final, based at the base Got a chance you've got a 90. And as you can see, that there was created with both years idea. And we have the members in here. So I went ahead and today to users check their profile. Let's create a chops and see if he gets duplicated. You would have the both users. Uh, why? Why? Why? Why live? You and they a wife for both doing here and you have the the non create on the other side, and he just got changed the other time. Here, have a look on the chance. Now I have one ready Here. It's gonna close this one because we've done it anymore. It work. You only creates one shot here. Now that service who were just check this one works beautiful weights one first and then see if the chatter really exists. If not, it created. So now list going. They dreaded company in dot html him. We're going to add some CSS this one. This year's as well come from the material, angular as well. Much list of butter and the other one is Poland's list. Matt Line. You have some headers. We have a few things that you can using here. So let's other much line and soon. That's right. Better if you add something else here, lift the threat Ivy. For now, we could later adding here something like the sender's name. We need to grab the less message from the message. Serie. So we're gonna do that after any. Here, we could do a look up for the sender's name as well. So now let's make this work. When it click, it goes to the shot I d. Over there. If that we need to create it here. Rather link. It was gonna be the chat here in the main switch or router link threads. I d get a science click. No, it's not too narrow, you know much any routes. So that's a routing problem. Let's go to the chat module here. We left in detail a za placeholder. No need to add the i. D strikes again, we click strapped to create message. You have it. The sense sends a message. Now let me pull up the other user. And as you can see our chat ups, working users can talk to each other in the rial time. So now have both threat and message components working. We need to set our security future and add some CSS toe. Make each message to display different, depending on day, whoever is sending it. 25. 6.4 Chat Final Touches: So now we're gonna add a future that we will return a list on Lee with those threats that the user is a member. So let's write this fluttering here. What's the ref? You did the rest. And where I'm gonna check and decide members, then we're going to use the current user, i d. And then if that user equals true, you're gonna get all the threads that the current user it's included, decide the members subject, and we're gonna return that collection. No need to get this current user idea, So let's just put it in straight from up service. So now if you look at our shots, we no longer see this guy's message. Because if you're checking here, this is the current user on this time, and he doesn't belong in there. So it didn't show He doesn't see this message. So just with this line off court, we can set some security for our users. Now we're going to create a condition that we aren't CSS glass to the message and depending if the message is inbound or outbound. So let's go back to our cold editor inside the message. So we're gonna use the engine class. This engine class we can use toe dynamically on CSS class to our components. This comes from angular. So if is involved, be coming. It's out of bounds not being coming. So let's go and add this function, you know, check the message component we're going toe. Add ah function. Check If is incoming or not. Check coming here. We need the current user idea. No. And if this message not sender and user, if there is a message center and if there is a user, we're going ahead with their function. If not, it's one. Do anything but it also one break up. They started coming. We need to create this and it's going to be Ebola. Yeah, I can use it. Who's used up message. But sender I d not be quote toe user. This user now, let's just have the CSS class and we can check if you works the class we gave to the component waas out bombs and in bones involved said background color to life. Something that's yeah and Mr Belt Bombs. But you're on Kohler. I like brain here. So now you only get the outbound step function and here it is the reason why everything's great and not changes because we need toe executives fashion. So here we can just add it and save it and should work now. Very good. Hello. Mine is great because I'm the center and this one is receiving and it's the other color. Now you can play around with the scholars and how we do your CSS Maybe move this to the other side is up to you. This is how you are dynamically the CSS you could eat Ah, a condition with is gonna check something and use the injured class. We evaluate that and adding do CSS class in here at the moment. If you go to our users and we create a chance that we have in here, we need to other less message. And it will be nice toe at the name off the sanding here. We're also gonna at the bottom here so they can remove this conversation. So let's go ahead and start. First we're gonna create is delete function here. We're gonna add a material angular A menu to the chat detail in a tumbler components. Good menu. Yeah, this is what we're going to be adding on that corner. So had the top down, and you're gonna have on the bottom there. So let's cut these reference and we're going toe based on your own. My video margin. What's click in the matter Barn? It's on the bottom and Mr Mott I corn, But on classroom dio much of our own blood. Now inside, we're going to Aunt Amount icon this so called war vert. You have it. We need to have the spaces, so it it flows to the other side. So in between the two bottles, that's other respond town and give it our class offs space. Good. Now, if you click on it, we need to add a figure that will create a drop down here. So on the bottom has created trigger. This comes from much it on black math menu. A girl for it's called a menu. Now we're going to use that Matt menu that were important. That's my new pass. That menu idea given there? Yeah, that's all coming from other gondola. Any side we're going to create another boat on, I'm gonna bust a much menu item. Gonna give this a quick event. We're gonna create a delete function here. So But before that, let's just other matter. I can hear them delete icon and good spine, right? Will it Mr To work? Let's check it out. Click. Gonna have an error. Let's go ahead and create this one. The chanting tells we're going to create the function that we call another function within our tread service. So down here, that's mistress. After the engine, let's create a function called elite and we're going to use this doctor, that service we're gonna need to report it. Drivers, you say this was forget toe particulate melting, part feature and service. No. And let's create a function called the leads, then Mitt Threads. And this is going to pass an I V. Send them an idea. So that's great. Is ivy here? Let's see. I didn't Let's create this viable here, the top just below their of your childs. And we're gonna make this strength can, you know, in order to get this idea, we have ah thread function called get threads. So let's full of that a year. Make uncle get threads. That's great. That was everybody here so again started out the That's maybe survivable. All right, Janice and this would be the threats already missing. Port threads threat. Mother, you know we can once you know what, forget threat function. These doctrines will be equal to the stop that service. And God used to get threats. Function from there. Okay, Now we need toe, subscribe to the trends and get as the specific trends all of it for that. Let's just do on these the threads, let's subscribe, and then you're gonna get the thread front End's single one, and we're going to map its so we can get or information got them. And these thoughts threat i d to be cooked that i d So here you are pulling out threads when you're subscribing toe a single treads map in it getting on that object back and linking the that i d which is the trade objects. So this idea string now we can pass this threat, I d told, is the literal function we're gonna create. So just save it and let's go to our trends. You, this monster work that no more era and let's go to our threats, service and create this day of its function we're going to use ah, new javascript feature called a Sink Away. So let's start beauty and I will explain the trends. I'm gonna get that idea from from the child detail. This is what you're getting there. Just give the same name. So that's great. That con school batch. This one is toe. This is toe reference. The fire base Metal. Yes, that's for the store bunch going to use that made it all. Let's create that query variable to start all the objects from the collections with these that if yes, that collection, I'm gonna pass it to the address. He's gonna be the threads idea. I said I'm gonna bust the reference. Do I get this? Is going to get all the information, all the objects from the collection, but for us to continue, we need to wait for this for this to be resolved, to return all the all the objects for us. And this is why we need a sink. Our weight gonna be a waiting here. So they were gonna create the function and they threw stopping here until all the data is returned. And then we can continue with it. Let's go So long this square so we can see all right, now we can call quickly for each gonna looked through all the objects received. That's muscle of dogs so we can see but is returning. But also how the references here saying the guillotine. Are we sure what the reference is for? No, I reckon the batch, but the lips and past the dark ref. So after we do this, we need to commit the changes. So we do a batch commit. Then let's just do at them. And you were going toe delete our database objects because this function here to delete on Lee the message, the objects inside the message collection. But then we need to delete the the threat itself. So here we're gonna call the FAA s doc. We're going to pass again. The shots I didn't wanna use the thread i d legis chocolate. We should be done. So let's see what's happening here for continuing burning toe. Commend this out and commended, but dilating a swell. I'm going back to my gallery. So it picks up our idea again. Clicking up. Handle it. Yeah, we have the choir snapshot, which is this console log in here? The query We're not getting Ah the data from here. This console log is not working with you. Only see one consular in there. She's very long. Great. Look, is that object from here? It's just setting back to query. So let's check what happening here. We create our treads is looking for after that service, the function and then we subscribing mopping. What you're missing is we need toe financial eyes. This function. Yeah, so let's just starting now. Now we get a bunch of objects or let me undock this one. And this is the query one. And now we get the credit document. And this is where I'm getting the reference from here in the thread components I'm using a dark dot ref which is coming from here. The document reference this one this you're going to use to get the idea and to get the information so we can delete it. So now you receiving this back from this await function, Then you can go ahead and do or deleting process. So we're gonna delete me, pull up the firebase Consul, you have a chance in our message. So let's go ahead and click billets to get only requires not shot it does the batch delete it? Perhaps it, but it doesn't commit. So we need to call the commit functioning here. So after you prep everything you need to commit it, we're going to do it. That's right. Now let's get the fire base again and gonna re initialized them. Component. Click of it Now the litany object. And you see, everything disappears to the roots off our database. There's only users in here, So let's create a few more shots. I just find somebody click on this song. My foot got the chance. I have this junior. So let's add some message. Come out of the bunch of you. No one the other one, most of gonna of the bunch. Let me refresh that at the base. So we see the information, we see our message. So chance both of them has a collection off message. So no, let's just leave billet Deleting everything. Then are the chat still up? Go back to chance static it again And now we disappears. Now the lit function works in the little threat and its collection. Now, when you create the user Ah, chat we have in here. We don't have a last message and we are displaying Ah, the chat id'ing here. So let's under a less messaging here. And also they use the sender name in that. So the easiest way off doing that is to create, ah, some more information in the thread model. We have the other time. So let's Aunt the Tread Creator, this drink and also less message. So we're going to push the creator in here the same way as with the Alberta. Now it's asking for this information. So after Donatella's to the creator in this message, not going to give that information. So let's aren't costs creator. Nobody's that off but upstate display name, But let's under phobic. So if you display they milieu in case the user doesn't have a display name yet, and when they chats created when they trans created, we won't have any last message. So let's just set it to know. But still it this message because it's not correct. Let's create it again that created take a look in our database. We have, ah less message because to know when we have a creator here. So now let's add that creator that is in the single track component instead of the idealists calling for the creator. Let's go back in there now. We have flattering there. Now let's go. The last message. The last message. We need to go over the messages created. So with the chatting put and they were going to create a function which is going toe push the last message to this threads. Let's create Let's start creating dysfunction First, let's go to the art threads and we're gonna create their function here. Let's call it save last message and for it to work, we need toe know which which straddles safe to. And we need to know the message. So we're gonna ask it from the component, the Channel I d. And the message here gonna create our object, which now data. So you less message message. Now we're going to return. And the reason we need to create an object in here is that we are going to save as a document and we need toe add a key value pair. So the last messages that you gonna be starting the base and the message is the value we're gonna be setting toe it the turn, these but turn Got these. If Yes, Doc. Now I need to get the address again. We're gonna bust the channel idea. Then we need to call Set. And here we're gonna posited that the object creators not the So just pay attention when you're sending data. Were your set using the set method that you don't destroy or your database? If you just want to add one fuel, you need toe add merge. Otherwise, you destroy the whole data. So now we dysfunction done. We can call it from our components. Let's go back toward it. Input when you gonna need to import the threat service or you use it here livens No, it was Forget toe import if you don't have the outer import feature on your editor. So let's get that function to save that less message. Gonna be the channel idea in a message. And here we're gonna call the thread service and pulling that save Last message function mattered. Recreated should not idea message. No, we can quality here insides just after the we send the message you can just will save lest message. Let's add the less message toe our HTML Is that a threat instead of this one? We're goingto past there dreads looked less message. Example. We don't have any less message at the moment. Let's just open a new window and we're going to send a last message in here. Did that and their heavens, the last message sent. So every time we going toe like something, we have it in there. Now let's finish up our margin with and save it to get so I get the status as we don't have any five toe, aren't we? Can use the short Russian off the get commits, he said. The person to get on you can on thus a and M so we can do both at same time. Stage the changed and commit to a message at the same time. Okay, so now I could go get brunch. Bring the chancellor's missed the chat brunch no less than do the get merge going toe march . The charts remember toe today that stash no fast forward so we can save the branch history . And on that same for to pass a message, you were just merging. Ah, chat feature. It's no now, let's just delete the chat branch, get brunch last day for the lead and chat Run. Congratulations. Now we have a chat up toe to your future projects 26. 7.1 Navigation: Hello, guys. We reached the final chapter off our up in these module. We're going to talk about the app navigation, the how we can set up our own material team. First, let's tackle the navigation because right now it's really ugly. We're gonna create a component inside our share module called Nab Our. We're going to use the energy generated command, see for component and putting the share folder. We're also going to add to the share module speak added to the declarations and important perfect Inside the El Nagar opponent going to use. They sign out both only no navigation. So let's important the authentication service. It's gonna be public because you're gonna call it straight from under him. HTML was automatically important there. Now let's create also Bible for are apt title submit use for the apple logo. You know, let's start to greater HTML. We're gonna use the motto bar. You're going to use the up title that we created in that when you're creating this up title class so we can target with four CSS. Let's add it to our application so we can see why they were doing it, you know, shared module less Let's export the love bar. Knowing our up component dot html, you can use it just before the route up outlet bar and we got here and there. And that's probably because we do. You know, he parked the share module to the up module. Here, we need toe. Add the share module to our you're up. Look, ds, let's just copy today in part three. Now we have our barn yet. Let's remove these icons. Ended up html. This should be fine up removed. The icons in now have are uptight over here, which is coming from here there. Go back to our motto by and start to create a refuse. That's great. Another respond tagging here and we gonna use the space or classic created before this is to create that gap between the bottom and the title. Now we can start to other buttons or is let's create a normal button for a block. It's gonna be just a matter bottom. Yeah, Rotor link. Look, now, if you click, nothing happens, and that's because we need student toe out there. Rather, module here just started to in parts array, and that should work. Now you're going to look that's not done. A link on the engine fire are in our logos. We, the users, can click and go back to their own home page there, So but now let's remove this outline. It's a little bit ugly and has changed the course auras well since playing a game and icon . So I'm gonna use that up tight, away created, coarser pointer. You're going to remove the focus from the respond tank. That's what's creating that blue outline as this is spirit static. It works, but it will remove their sensibility from your website. So the time bottom won't work to select our logo. But now, if you click, you can go back to our your home page. We're going to chatting here, but it's because you have a redirect. Anyways, let's continue. We're going to add some more bottoms to are not bar. Now we're going to add the signing and sign up bottles. This will display if they use is not authenticated cause we want toe, give them assess toe the signing and Santa Page, and you're going to use the engine. If to evaluate. If there's a user or not, it's gonna copies and and sign up. I'm gonna out click soaking it hit both buttons so much about on the router link. Come back to this on later. But signing first out injured a sign up in a bit We went to Is the engine if And then if the user is not authenticated when the called off use that authenticated matter, do we created it is not authenticated. This will show I just need to change this one to sign up. So if you ever want to hide something from users that is not authenticated, we can use this and if and then you use the matters authenticated we created in the off service. Now that's done less. Let's have the next bottoms. Let's add it as our icons you're gonna add, um, but Icahn photo style, the bottom. But I can bottom and going toe at the linked to the gallery. Copy this one and create the next one for the chat. Yeah, chatter bottle. And we don't want display these icons if the user is not authenticated because you won't have any chance if they're just visiting our page. So let's use the NGF again, but let's remove them Bank from the beginning, so off authenticated. So now you do the reverse. Do you only show if the user is authenticated like I am in here? It's under one more bottom, but this one's gonna get up. Drop down menu. Notice how the Nikon the more vert food for the three dots. But, um, we're gonna add the starting again. Also there. Authenticated. Now we're gonna add a trigger. So for the drop down and this comes from the material angular menu many would trigger for start to create our math menu. So March menu. Thank inside you're gonna have two bottles, one for the users toe navigate to their profile and want for the love bug outs bottom. Here, we're going to add the class Samata menu item inside, you're gonna create a Nikon fridge. But Icahn and both will have I spun. 1st 1 to be profile. So this one's for provide This one's for sign out. You were gonna add a rather link for the profile and for the sign out, we're going to create a public event and call it our function in the authentication service . The mat trigger is I'm working. It is because you need toe. Connect this math menu to the mat trigger. Let's do it now. Here. Other name. You recall the name when you much milieu refiner goes to pro fine. The sign out list right now of my user here. It's an out in the bottoms change. Okay, now let's remove these two buying here and watch this edit. But on that here, because we don't need this to buys. We have one here already. Let's under pose dash morning here as well, and removed his color on the user's component dashboard that's removed this toolbar. Actually, that's the first. Take them Edit profile bottom just below their user name The user in May. Just create some PR times here and based. No, it's down here. Now we can delete this toolbar. It's Uncle meant these dashboard. I'm gonna bring it below. There much of loader in human. On it. Three talk aren't footing, but under the same for the post, so we can have a title here as well in the post dashboard soon. The top of the card now are posting here has thesis CSS, but not their uploaders. So let's copy. Very opposed to assess this one month cards. Another thing here now Both had the same styling. Well, let's remove this collar and started the phones as well. So to remove the color, let's go toe the hero. You hold this big around cooler and also the color white from the front. Yeah, I suspect this font 21 the material Roboto font. We only need to underclass to our top component. That's something here body because you can now use the same front everywhere. Samat, the typography. Uh, glass. This she has class comes from material. Angler, if you're safe, everything should change now to the new. Now here. If you go on edit profile now we have no way toe go back to the view modes So let's Aunt, uh let's other cancer bottom here. It's going to copy there, this bottle It's just below this one in here, Conso, and we're gonna set it so false it is not showing because I still wanted toe removed this bank from here because he would want to show if it's not editing. So now we go have the council voting there. You can So So now the functionalities back in there. Now let's change the read Iraq to go to to use this page in the routing read director users . So at the moment we have our Is there dashboard, which displaced their users details. But if you're not authenticated and you try to go to that address, you get a blank page. This is not really a good to use their experience. So let's create a router work to redirect the users to the signing page. So to create, acquired gonna use the engine generate again, weren't that's cool. It's reality that's pretty flat as well and into the up larger. So we're done this many times. The flat is too create document without a folder and am going out to the module and out module of the provider and was imported Now in the guard. This is what you have when they first creates. The only thing it ask from us is that this returns either true or false. So what you're gonna use a year is we're gonna create our if statement, that is carnival check if the user is Sultan skated or not, and if it's not just gonna really like them, So we're gonna need the authentication service to check if the user is that indicated? And you also gonna need the router to resurrect them. So let's import both now, welter. And for the constructor. I'm just gonna started. Type it for to get them out toe apart. It created constructor que when I drive it off officers. And now the router. Yeah, resulting in port to be him. And now we can create our if statement. So if then users not authenticate it. Remember, we created our function to check if the user is authenticated. Now, off service, we're going toe. Use the router and navigate them toe the signing fridge. Let's console log some messaging here for us. We need to return False. And then if they use their is authenticated. This is just gonna pass. And then we're gonna go through toe return through. Miss. I also love something years. Well, let's go. And not to are up. We know that it's going to be on the user dashboard, so use your module. You need to import damn unions important the rotting wires and on the dashboard Just need to what they can activate. Then Pastor voting weren't Let me love about these are special and goto These are dashboard and I get redirected. Dio signing page signing Becky and go to my use a dashboard. And here it is. And I have to go. Welcome you justice era here. And this we can fix right now here to use a dashboard. It's easy years Use a dashboard component dot es the line 40 here in the line 40. We have two issues. Er you right in here. And they're heroes happening because because you haven't got any far back for this user. We We created the year on the authentication, the current use idea, which is gonna try to get the user. If the user is authenticated, we returned. The idea, if not, is no. So we haven't fought back and you do not give us this year. So let's use this currently residing there split the cost to you idea Here. Just need to change for the viable we created. We shouldn't have a fall back in here Next time we look out, we need to make this chat bottom. We need to make it goto our chocolate when it creates. Now let's go to the Threat service here. We're gonna need to import the router. Yes, we can. The doctor user also added to the constructor. And now in the function where you created trends here, then let's just change. But then and just gonna forget the user today Chart. I d chucked. I did, indictees. It's in here we created before. So you see, we can try it. The user when you clicking here, we should. They're ago. Didn't were here with this scent. Now, let's also remove this to bar here. It was not a sand. Then we need to move with his bottle somewhere else. We're going to add it to the main page here. Together with the cloud least No Chuck detail. We're having this matter bar. So we're gonna delete everything. All this Tovar. I don't need it anymore. Okay, Now, let's just copy these delete function. We're now chat threads components just basic in there. Meet one. They call the Threat Service in the constructor. But mind you parted up in here in the trend I d. Now to get it from from the bottom itself on the chat. That's aunt about on here. And besides, icon the Lit. Here's my take on bottom. You're gonna have the click event calling that function the lit. And here we're gonna The tread idea is a parameter to send it back so we can catch them here. Now, have our bottom in there. If you click, he works. That's good again. Great. We got we're directing there. And here we have our our threat. If you have any less message, it's gonna show in there as well. So now I have been here home page. Have our users have a blogging here. We can also do the same things as it did before knowing very much Gallery Halvari Much our chat works as well. Now, in the next lesson, we're goingto, uh, we're gonna talk about the teams so we can Tyler here. The reason we don't see in the bottom here is because the bottom probably is white. And let's add some colors here in the next lesson. So I see you then 27. 7.2 Theming: So I'm gonna talk about the teams you got to longer material under guides. You have Timmy angler material as we spoken. To begin of the course, they have the distribute which he used before we use the Indigo think. But I also have this one's that is Prib Ute. But in case you want toe starter on down here is this. Snip it off coat that we will help you out. So let's go through it. And are you explain how it works in our up. We're gonna need to use SAS because the material team is designed with firm with sass variables that's creating here under source. It's creating a fire call, Tim, but CSS and let's base that item here. It's gonna run more this violence. And I'm also when I removed the country when I call it engine Fire for day. For our upto be able to pick up this fund, we need to add it to them. Unlikely that Jason, you have a style and then we can add any here team. Look at CSS. You don't need to worry about the CSS analyzed can take it off, converting Ito CSS. But by adding here cannot as many team as you want. Its create your team other here and now. Let's talk about this. You have the money. The primary accent war, you warned the foster red. So there's this website called Material pallets dot com. You have colors and the pallets here over ballots. These are the material design colors in here, over colors. You have the variance for each of them. If you click, you can find their codes on the pallets. Let's say we pick purple in orange. He was gonna show that these purple and green school purple, orange, deep purple, orange that's better. All right, so let's use the purple and orange as accent. It's go back in. Our up you were is deep purple. So let's add it to the floor. Tobar. So we can say better. No bar Pirated. HTML. You look just at the color called it primary. Yeah, but I'm are calling it now. If you removed there Bill Team, we get the narrow. There is a solution. We can stop the servant start again, and he should pick up there, then your fire and never have it. The color is here in the primer. This accent. Now let's talk about this other colors we're having here your own quarters and for the way picked the orange. If you lose thes, you re material uncle. The colors works for material. He would have the primary displays a number, and you have the A for accent, these darker colors they don't have backs in. So let's take a 200 and back in our up to use the color. Just need to adhere in front and that change for its lightly. Let me take a more prominent one so we can see better. It's got there a 100 there, so it shows much better. Much not for the purple. Let's put purple nine hundreds, which is there strongest normal color to have in the purple that's under you to change for almost blue collar. Let me take this blue gray 900 There. This is the color for the warning. You can change the same way as he did in here. She was in a different color. You're created the viable for a primary Apax and worn, and he recreating the team valuable. It is a lie team you can add. A different team is also it's gonna be called as a dark team or a light team, which is with the same I did and just add dark and with their collars. And here calling out those variables, adding toe one object and passing here to the material team, some angular picks up and display in Europe before we created the CSS variables. In case you don't find any color in here, the master up or you need very specific caller Camacho brand, you can use the one with leading you on the CSS. You can create your primary color and accent color and uses the same as we did before. Call them ottobar diseases and are they? Start to it on the next lesson we're going toe finally deploy our website to fire base so we can see the line. So I see in the next lesson 28. 7.3 Deployment: So before we send their upto five days, let's talk about get up a ways and service workers. You're in the docks picnics, you have service worker, they get started page. You can find instructions on how to set up or not existing up like ours. So we first need toe installed a serious worker, then set the value off service worker to drawing. Are unlikely that Jason added to our up module when the imports as well and call this fire . And we need to create this finding our source folder and on this information in it. So that's what's copy this one. This is all out generated by bungler when it build up, are up. So first, let's create this fire school N g s w config, Jason. So now we've created this fire. We need toe install the service worker. Your odds humble our service worker and I have a mission before, but this warnings at the moment uncle are fire to is being under happy development. They're trying to push for this Russian six and fire base also changed. So that's why I'm getting in these eras, but are up. It's working. It's no matter in begin of the year. We got an error just over Christmas on. It wasn't matching. You had toe move diversion off our base to the next. If these areas cause you, any problems in your up is now running or have like, um, any kind off incompatibility issues from installation just go over to them in the jungle. I fired you it have account. And if you go to insure issues here, you can find all the information you need. Toe the bug, Your court. Most of the time, you can just pay some keywords in here for about issue, and you're gonna find someone of the same problem. So far, we have got we don't have any problems. Are ups running that air mine go away on the next update. So no, let's important. Tore up just under your top off their service. Work up from uncle our service worker. Your partner wantedto into our import serie just based in him. And it's calling our fire regulated in him. Here it's saying it's on is gonna be enable for production. But if you remember, you wanted ads firebase toe our test environment. We're gonna need toe give the firebase keys to our production on my website. What I do is like I have fully This is my production website, and here I use it for testing. So I used the court from this sandbox. Oh, my testing environment and my production. I use here for this project I'm not going to. So if you need create a project for your production, use the cords from here inside your production, it's like that and then use the Samos, your son box for the other side. By doing that, when you create your build your up, we're gonna call production in the build process, and it's gonna take this environment keys from here. And the good thing about having this too different keys is that you can test. You can delete. You can add down me information in no affect your up production. I just need to add them Service worker here toe the angler three and we are red toe start to build. So that's exciting Here. Service worker and this on through. Okay, with at dawn now to use fire base, we need to install firebase tools, the young Aunt Firebase tools. This can take some time while it is installing here on the glide Dodge a song Clean. I mentioned this before, but if you notice all of our components got this perfect off happy here. And this comes from this here on the unlikely that Jason is this prefix in here, you can change it to anything you like. You're up name like we have hours, and you fire and it to prefix every component you create. And if you don't want to add anything, just leave it empty and you won't create any perfect. You can also set up this projects pretty processor like you cannot bless us titles a year. No for you to use the firebase cream you need to log in. So do Arthur Bass Logging, if you're not looking, is gonna give you a link. Where you gonna go to your browser and signing with Gouda to your farm? I'm already looking so I can just do for a basing it, you know that's helping here. You see the options. This is to control a few things about your database or far store and other stuff. I don't thing you're actually we'll need in case you want to least your projects in the far base you can use fire base Least it's not very useful, but yes. Hitzer projecting their the other ones we're gonna use is in it. We used to looking and we also going to use the deploy. Let's go for basing it toe. Initiate them. Are racing to this father. It's asking permission to initiate. Yes. Now here's asking. What are we going to use from Parvaiz? We know we have first. Are we gonna use function? We want to use the Holstein circuits and our page, and we also use the storage for photos. So this is the database really at the base? We're not using it. So just toe enter now is asking you to choose which project to you wanna link it to ours? Is the engine fire for babies rules? Yes, that's fine. Indexes were spine. Now here it's what you need to pay attention to. You remember that we spoke about where Uncle I's gonna build your where the build process is gonna explore to your up. It's in the dist. So we need to give Justin Yeah, otherwise we default to public. Some in O. J s applications are building toe public angular, amusing. Just you can changes to public up to you now is asking configure a single page. Yes. We have a spot are up with a single page. This is seizing their rights over your files to be index. You want that naming fire? It's fine now complete. It's quite simple. You set which Redox Using. Give the folder where uncle are. Well, process the beautifies. No, let's go ahead in use their energy build big when I used am n g Butte, you're gonna pass the production flag to it, so it's gonna use our production environment keys. All right, so And you, do you production flung? I'm quite two errors. Where? That bus words. Expect one. Got zero and in dashboard. Expected one. Got Syria. So, bus words 10 31 over there. Have a look. The HTML Dan here is asking for a 1,000,000 from the up and we forgot to put in there. So the user's gonna resent the password import. Amy, this function is gonna take from the input and send toe component. So that's what it was busy. Now the next is the post dashboard 18 34. You say expect one argument because zero on this line, we don't need to send anything because the farm group is is managing these data for us. So the era is he here? We don't need to ask for anything because this data is coming from the form itself. Uncle are fire reactive forms. So let's try again the build process. We go through everything you're up and see what's wrong with you. So now we have them bills processed on a year. It created six chunks. Waas, you go on the dis director, you can find the six junk creates or the jazz fires. We have our CSS, the configuration file and he create um service worker dot Js forces. Well, I will encourage you toe go out and learn more about service work. This is a really big topic. The buzzword Nowadays it's been lovely ways and this is the car. What makes it possible? This can get very complex. But in its basic, you can write your own in the transform your go up into a mobile with only a few lines off court. So are built processes don't have our fires. Now let's just use them firebase deploy and you threw Shekhar files again and we send up to our server. Now it's his project complete, and you have our our link here. Navigate that we have are up and it's running online is underage. TPS firebase Always give use certificate if you host with them. So it's really nice. And he would have are works to say We consign me to fix the line there. Everything works as it supposed to Google, you know, have a rob five days, five days looking for basing it. Five a supply, three simple commands and our poppies on life. So with this, we concluded our up. No, it's on line. You can go. You can go on and try Here you have a complete up with a block system, the user interface, where you can edit the user's profile and control their data. I can't photo gallery. You cannot posts and you have ah functional blawg. Samos for the photo can also relate of the gallery. You have a chance where you can talk to the other users in real time 29. 8 Conclusion: and that concludes angle are five and fire base. They must have teachers for Europe. I hope you enjoy this course. And I hope you learned a lot. You should have very few need now to go out and start beauty, Amazing co ops. And remember to keep learning and practicing what you learn, Butte stuff and teardrop like this. You'll be a pro in no time. Thank you very much for taking discourse and by for not.