 Hey friends and welcome to building an application with Angular and Firebase my name is Mark Thompson I'm on the Angular team here at Google and I'll be your workshop host with the most for this session But we're not alone. Let's take a look at the slides so that we can see the incredible teaching assistant squad All right meet Emma Minko, Alex, Pete and Keen So they're gonna be here with us to help support you as we build our application Now if you have any questions, please use the Q&A functionality for this workshop Let's have a look at the requirements You're gonna need the Angular CLI. Well, you're gonna need note and the Angular CLI You're also gonna need a code editor a Google account and a basic understanding of Angular. All right So to get the most out of our time together We're gonna focus on the major parts of the functionality But if you need more time to look at the code well, this workshop is based on a codelab, and that's what we'll be using So here's what you should do Head over to this URL go.gle Slash IO dash Angular dash workshop if you still need to get access to the codelab But it should have already been linked in this session Okay friends, let's head over to the code and create our project Now this is our development environment I'm using visual studio code with Angular language service already installed now I know it looks really cool But you too can have this nifty tool by going to the extensions tab in VS code and searching for the Angular language service on The right hand side of my screen. I have all of our steps outlined in each step It'll tell us where the codelab is what step we're on in the codelab And it'll have an additional resource link with the completed code for a section if you need it Okay, friends, let's get started First thing we need to do is create a new project. Here's the command that we're going to be using Wherever you're gonna create your project. I want you to go to a terminal window and type ng new Tanban that's fire and Use the strict flag This is going to install Angular force and create it's going to create a new project for us All right, would you like to add angular routing this application doesn't need it? So we'll say no then which style she format should you use? Well, we're gonna go with CSS Now while this is installing, let's have a look at our application that we'll be building today Okay, friends. Now this is Kanban fire This is our version of a Kanban style productivity board It'll have swim lanes where we can move our tasks from backlog in progress and end to done Now to make this look great We're gonna actually be using something very special which we'll use in the next step Now if you're at home watching remember, we're on the codelab step one So you can find these directions in more detail there if you need it All right, we're almost done installing our packets Now I'll talk a little bit more about the Kanban fire app our backlog is our to-do list Then our in progress are things we're currently working on and are done is where we'll go when we're finished All right We're just going to give it a little bit of time to go ahead and finish installing and I'm sure that yours are still installing right now So as soon as it's finished, it'll say package install successfully All right friends. Here's what we'll do next. Let's actually view the application that's built by default in Angular So to view your project We're gonna use this command We'll go into the project that we just created and then we'll do ng serve. I'll do that now Okay, so in G serve creates a local it starts up a local development server Now this server is not suitable for production. It's really only good for development. All right Once our development server is started, we'll be able to find our application on port 4200 Now let's go back to our task list while this is starting up We've already completed our introduction now We're on co-last step to what we've created our project and now we're just going to start it and serve it If you have any questions during this workshop, definitely use our incredible teaching assistant team All right, you can find those folks in the Q&A section They'll be able to answer questions and then we'll be able to go from there All right, things are ramping up pretty quickly very very cool. All right friends It looks like our development server is started and it's ready. I'm just gonna jump over and reload the application Okay, this is a default app that gets started with Angular So if we've gotten this far that means our application is working. I have something for you I need you to get that hand up right now wherever you are your left or right hand here I've got for you That's a high five for me to you because you are doing amazing. All right friends. So we have our project created Let's keep this show going The next step we want to do is add material Let's look at the command to add material design to our project I'm going to open another terminal window That way I can keep this one running and I go on to my compound fire folder Then I'm going to do in D add at Angular Flash material and while this is running There's one other step that I want to mention that we can do Let's go ahead and make sure we open our code in visual studio code So our project is not open yet in our code editor. I'm going to do that step now So for me, I'm just going to add it to my workspace Now you can go file open and add it to yours Okay, very cool. So now I have access to my code. All right friends excellent Let's answer these questions. The answers are here in this image for you But we're going to choose indigo pink. You can choose whatever you want for your application We want typography and then we want animations You know why because we want our application to be nice and smooth I'm going to give this a chance to update if you're just joining us. Remember, we're on adding material Which is code lab step three Excellent now, there's one more step that we're going to do to save ourselves some time Every time we want to add a new component from angular material We're going to have to import it into our ng modules and we'll keep going back and forth And this is going to be a little bit time consuming. So to smooth that out I have a pre-built app that module that TS that I want you to copy over to your project Let's do that now. Okay, excellent So go to this URL on the screen Go to that gle slash ng module I give you a second to type that in You want to go to go to that gle slash ng module Okay, once you get there I'm gonna show you what we need so I'm gonna open this up. So here's what we'll end up seeing There's a just with some code here. We're going to use this code for our application All right, so we're going to copy this code And then in our project, let's open up a project structure under source App.module.ts We're going to replace this entire thing. So let me close this for us Okay, perfect. We're going to replace this entire file We're going to take that out and replace it with the contents that you got from that URL And then you're going to do a save All right. So as you can see it already has a bunch of the things that we need for application Already imported that's going to save us a lot of time. Okay, friends Let's see if we can go back here. That was our step tracker. We'll get that back in a second. No problem All right. So now that we have our ng modules set up What are you going to do next is go back to that one window Where you had your development server running and it probably crashed because we changed the ng module so six six so Significantly not the end of the world was going to do a new ng serve and that's going to restart our module Now we're going to wait. I'll give you a chance to catch up to that as I try to go back in my browser window here We go perfect Now we got our steps back Okay, friends perfect. So once this restarts we should see a big difference in our application, right? Well, we'll see that in a second when it fit will give us a chance to finish But let me explain to you what we're doing with angular material So angular material is a design system created by Google and if you're familiar with any of the Google products You've seen angular material in the wild now angular has first-class Integration with material design and there are two parts that we're going to use for our application That's the angular material plug-in which provides some components and then we'll use the component development kit Which provides cool functionality like drag-and-drop accessibility and much more our application is restarted I'm gonna go back to my app here refresh Everything looks the same because we still need to do something. We have to add in some material components Let's do that step now. I'm gonna go. I'm gonna open up app a Component that HTML now I use command P to pop up this window quickly on Mac And if you're on PC, you could do control P. All right friends It was good, so I'm going to delete all the code from here and then we want a material toolbar All right now remember you can copy this step from code lab step three But I want to keep going because we have some really cool stuff that we have to work out Online one we have material toolbar. We set the color of primary on line two We use the icon for the fire department icon was gonna be a little flame and then we have our Combine fire text. Let's see how this looks in our application Do you see this? Do you see this? This is looking good. I want you to do something for me real quick I want you if you can with that hand right over that shoulder Pat yourself on the back because you are straight up killing it. All right, you're doing so great All right, so now we've added angular material to our application. Here's the next step Well, we need to visualize our tasks Okay to visualize the task we need to create a task component Let's do that step together So now we've already done this step, so we're going to visualize our task with the task component All right, so we'll use an angular CLI now go back to another window. Remember the window That you did the ng add that terminal window you want to use that one again Let me clear this so we can make sure we can see it. We do ng generate component And we'll do task. All right friends looking good This is going to create our HTML and our CSS and our type script But we need one more thing our components Will represent a task and our tasks going to have some data because we're going to link to Firebase a very common practice in Angular is to use Interfaces to shape the data so we can define the properties for our for our data So let's do that. I'll give you the command that we're going to use Now here's the command. We're going to generate an interface We do ng generate Interface task Slash task the first task is the folder that we wanted in so we want it in the same folder as our task component And then the second one is the name of the interface Excellent. Let's add our properties to this interface Now in my editor I'm going to command click And go directly to this file We have three properties. We have ID. We're going to put a question mark because that's optional And we have a title as a type string and then we do description I've string excellent. So we'll save that now Let's go over to our task component and make the changes that we need I'll give you a second to type this in and remember don't forget that we're on code last step four Where you can actually find this code if you need it Give you a second to catch up Okay, let's go in our project. Let's go to the task component dot ts We're gonna make some changes here We want this component to accept a task as an input so we can display it And then we also wanted to output an event containing a task for future operations Here's how we do that at the input step Number one import step will bring in the input decorator Output decorator and then the event emitter the next thing we need to bring in we need to import our task And that's going to come from dot slash task because it's in the same folder Excellent down in the body of our task component. Let's set up our input and output So you do at input for the decorator We'll call this a task It's a type task And the default value we'll give it right now is just no And then for our output All this edit and we'll set this equal to a new event emitter Like task perfect So now our component is set up to take our input and and give out our output Go ahead and type that in And if you need the code from the step Check codelab step four or go to g o o dot g le visualize ng visualizing tasks. That's what our url on the site represents Okay, our component class is set up, but let's go into our component itself Inside the component itself we do the task component template. That's a task component html Right now it says task works, but that's not what we want All right, you can copy this from the colab. We have a material card which represents one of our tasks Okay, so if the task exists, we'll render it. That's our ng if if you double click we can call this function for edit We do called edit emit function and then we're displaying the task title and the task description Now if you want to get this to be displayed on the screen, we have to make another change So let's head over to our app Dot component dot ts app dot component dot ts At the top I want to import task I want to import tasks from dot slash task Flash task Excellent now we have our task imported, but we need to have some task data So we can show it on the screen to do that. We're going to create a task array What to do We have type task array It's going to be set equal to a new array here now. Let's put some data in for our tasks So I have my task data Which is going to be my description my title Now we have our task data. You can copy these two from the colab All right friends. Let's go into the component template so we can display the tasks Now I have this breadcrumb at the top of my application. I'm going to click here And I can go straight to app dot components at html excellent Let's bring in the app task component Now I want one of these for every task in our to-do list. So let task of to-do that's from our to-do list That's going to repeat this for each one of these But remember our task has an input. So let's set our input using property binding with the square brackets Well, that's the name of our input and we'll say what the value is is task Hey friends We're now going to loop over our task array and then display one task per line And you'll see that in our application. Oh, it's failed to compile Hmm. Let's see what that can mean I'm going to go into my terminal And go to where my application is running and it says null is not an assignable type of task Well, this is a typescript change that I will need to make. So I'm going to go into this file You see, I've given it the value of null, but I said, well, this thing can only really be a task Let's make a change so it can support null as well We'll use the union and say it could be task or It can be null All right, I'll let you make that change if you have that error That's why you're getting that error should be task union null And let's go back to the UI Okay, I just need to know if your eyes are open and that you can see this magic that we get going on This is because of material design. We're able to use material to get our cards And our title. This is looking really good. I'm super proud of you. You should be proud of yourself This is a thumbs up. I found in this for you. Okay, you can have it. That's for you Okay, friends. So we visualized our task Let's get into the next step and let's implement our drag and drop I'll be completely honest with you. Whenever I think of drag and drop I can only think of all the developer tiers that I have shed over the years And that's because drag and drop is really hard to do but because we're using the component development kit We can do The built-in functionality and that's going to work in our favor, which is really Really, really, really exciting Okay, let's get started with that. So in order to use the development kit We'll need to import some things And remember we're on code left step five. So if you need to copy this code Go ahead and do that now Okay, first things first. Let's go into our app dot component dot html Bronke, there we go. All right app dot component dot html I know we just put this fancy app task here, but we're actually going to drop this Now I want you to copy the code for the swim lanes because we're going to put those swim lanes in right now Okay, friends. Now I just dropped a lot of code on you and you can copy this But I want you to understand what we're doing. Let's head over to the slides because I have some helpful diagrams That should be Supporting our task now Okay, here's what's happening at a high level. We have our container wrapper That's at a high level that's containing all of the swim lanes then inside. We have a smaller container With the diff called container and this is each individual swim lane And that swim lane has an h2 for the title now Inside that's that smaller internal block will have a material card And inside the material card, we're going to have some attributes some directives here. We have the cdk drop list Then we have an id Then we have our to-do list Which is a template variable that we're using that's what the hashtag means and then we have this block of code Which is going to help us to really have our drag and drop working So inside here, we have the drop list data. Well, what is the data supporting the swim lane? Well, that's our to-do from our component Then you need to ask well, where can I go next? Well from the to-do you can go to the done list or in progress list Okay, and then we have our cdk list dropped All right, so this is the event that will be fired once you drop in a card into our swim lane And from there We display our task All right, let's go back to the code so we can implement this functionality All right, so we've dropped in our swim lanes Okay, let's add in let's go to app.component.ts app.component.ts I'm going to go back to that file. Well, we need some more stuff here we need a We need it to do we need our in progress Which is going to be the same type of array It's going to be a type task Right, and then we'll do this and then we'll have our gun Which is going to be the same type of array same type of array Be our task and then we'll do that excellent friend Okay, now we have that working, but we'll need to add some more code here. I'll let you type that in But we'll need to add just a little bit more code All right, we also need to import our drag and drop functionality So we're going to import two things We're going to import Transfer array item And we need one more thing which is cdk drag drop. So we need those two things Now I don't want to spell this wrong. Let me make sure I got this right cdk drag drop when we get both of those from Angular cdk And then we do drag drop. Okay friends Excellent. So we spelled that right that's going to save us some heartache because now I don't have to worry about Taking those errors out. All right So then in the body we added our swim lanes for an in progress and done So we've added those two steps, but now we need to add some function So to add our functions, we're going to go into the body here. We need our edit task You can copy this from the colab. I encourage you to And then we have another function that we have to add Okay, this is our drop function So what should happen when we do our drop so I could I need to spell this properly Okay, I'll get our IO drop Okay, great All right, here's our drop function. Let's break down what we have here. We have drop which takes a task All right a cdk drop event with the task and then we check the event and we have two guards here for 28 to 32 on the screen This is preventing us from just making an illegal drop, right? If it's in the same container, we don't want to do anything and if the data Is not defined. We don't want to do anything if this does work What we expect to have is that we can transfer the data from one array to a different array So we want to transfer from one lane to a different lane. Let's save this All right, go ahead and copy and paste that code in there. It's a lots of type All right, and let's make sure that we can move things around in our application So if everything worked in our favor, I want to be able to click and drag I wish you could see my face of just pure amazement at how cool you are You just implemented drag and drop with a few lines of code. I have something. Where did I put that? Oh, yeah high five That's for you way to be awesome. Okay friends Let's keep this going. So now we have our drag and drop implemented This is exciting Now there's a lot of code for this section So definitely check out the code lab or the drag and drop link if you need to catch up But we need to move on to creating some tasks because right now all of our tasks are hard coded So to start we need to update our code to enable that First thing we'll need is a button. So in app.component.html I'm going to minimize our entire container wrapper Okay friends now I'm going to wrap this with a new div And that's why I minimize it to make this process a little bit easier for myself So I want to wrap it with a new div this entire Container wrapper gets wrapped with a new div now the class of that div is going to be content wrapper So on the outside we have content wrapper on the inside we have our container wrapper which has our swim lanes let's add a button And we'll say it's a matte button so we can get the material design and we wanted to say add task But i'm going to make this a little bit fancier And I want an icon So to add an icon we do matte icon matte icon great And the icon name that we want is add let me format this so it's more easily readable to our friends at home Hope you're having a good time because I am having a blast So we'll save that Now if we go to our application we now have our add task button But guess what we need to do some magic here and make it work. Let's add our on click handler So we'll say click whenever you click this we want a new task But this new task doesn't exist yet. So we're going to have to add that functionality I'll let you type all this stuff in now Okay Going back to app.component.ts Then we're going to have our add task. So I'm just going to drop our new task function All right now this function needs some parts that we're going to bring in now Okay, so when you click on a new task when this function gets executed What we want to happen is a new dialogue to open And then from there enter the data And then come back and add it to the new swim lane. That's the task that we want to happen Okay, now I know dialogues can seem hard, but we're going to use a cdk to help us out here Let's make this possible So at the top we're going to import We're going to import matte dialogue That's the material dialogue service and we're going to import this from angular material dialogue And so that gives us our our dialogue However, we still are getting this error that it doesn't show up. That's because we need to define it in our constructor So let's add our constructor for this. So we'll add a constructor Now i'm putting it between our properties and then our function Okay, we're going to have private and then we'll call this Dialogue And it's going to be the matte dialogue Excellent. So now our application is looking better But we still have some errors because we need to create the task dialogue component and this task dialogue Result now to create our component. Let's make that happen together Okay, so here's a step that we need to create our task dialogue Now let's go to our terminal again ng generate component And we do task dialogue. Okay friends That's going to create the dialogue and then we're going to add some code in there Okay, let yours complete okay We have our task dialogue component and we still need our task dialogue result the angular seal. I created this component So we're in a good place now in our task dialogue component. Let's set up The code that we need for it to display. So i'm going to go directly to task dialogue component dot html Which is our template. Okay, so we brought in quite a bit of code Okay, so this code that we can get Let's let's mark this is complete if you need the code for this. This is in codelab step six And right now we have a material form field and some inputs one cool thing that is worth taking note of Is the cdk? Initial focus Directive this is going to allow when this dialogue opens It'll get the initial focus so we don't have to try to program that with javascript or anything like that Which is pretty great Now that we have this code that we got from codelab step six Let's go into task dialogue the components dot ts And let's make some changes here Okay, first we need to import inject the inject decorator. So let's do that That's on line one Next we need to have the mat dialogue data token and the mat dialogue reference So let's import those two. We're going to get both of these from Angular flash material Okay, slash dialogue. Okay, great So we got both of those Now we're going to update I'm going to bring in i'm going to update my constructor here with the references to these things Excellent. So this constructed you can pull this from codelab step six All right, so we have our dialogue reference and then we still and then we have our data Our our token for mat dialogue data. All right, so for the next part I definitely encourage you to copy this code because there's a lot of type and I want you to avoid some typos We need a backup task because what could happen is a user could open up the window And then they could type it and then hit cancel and so we need a backup task. So let's get our backup tasks In type script partial means take a type and then set all the properties to optional All right, so now we have our constructor Finally, we need a cancel function. So what should happen if they go to create a component? I mean create a task where they don't want it. They're probably going to cancel So let's make that cancel So now we are super duper close. You know what we're missing I think we're missing our task Our task import. So let's add the task import. So I'm going to control space next to it and bring in my task. Let's see Okay, very cool. So on line three. I also imported my task. All right friends So we've done quite a bit of code here. I'm going to keep going because we still have to implement our Firebase project and then moving it on to the internet But we still need some types so let's add Some types that we talked about before Okay, so we need our dialogue type. Okay, perfect So we need our dialogue data interface Which has a type and then if it should be able to be deleted and then we have our top dialogue task result Okay, now this code again, I encourage you to copy it over so that we can get to Because there's a lot of errors and we can get through to the really cool stuff when we connect it to Firebase All right, so let's check on our development server If I go back to the console and check oh wait Our components Our task dialogue component is not there and then our task dialogue result is not there And that's an app component.ts. So let's head over to that file. I'm going to do an import for this So I do control space right next to it to bring it in And then all right Excellent friends Now it looks like we should be On the row. So our application is compiled successfully, which is doing what we want Now let's check this out in the browser What I want to be able to do is click here Get this. Okay. This is working the way that we hoped which is excellent Here's a here's a new task Right because a high five is incoming Excellent. This looks great. So now I have this task You get your hand up. It's in progress It did I drag it to done because There you go another high five phenomenal. So now we have new tasks we can drag and drop And we have our dialogue Now comes the fun part our application isn't looking Especially like a con bond board right now Our swim lanes are In a column like vertically stacked. That's not what we want. So let's improve our app styles So I'm going to do this step. I'm going to go to app.component At html. Sorry not app.component.html. I want to go to app.component.css. That's where my styles live Okay, so we have our app styles Excellent And then I'm going to go to the task. So let's go to task component Okay, let's find it from our Our cyber just to make sure we go to the right place. Okay, so I'm going to go to source app task task component.css All right, do my iotask All right, we save those you should copy these from codelab step seven. All right And now we have a nice looking application. Look at this Sliding nice and smooth remember those animations that we asked for well, this is why Because it's nice smooth drop in Excellent work friends. This is going amazing. You're doing great. I'm so proud of you All right now for the next step and for the sake of time. Here's what we're going to do Go to codelab Step number nine go ahead and create your firebase project. Okay, go ahead and create your firebase project But I've already done that step and I really want to show you how cool this is going to be when we get it On to the internet So go ahead and do that step while you're doing that Creating your firebase project. We actually need to add firebase to this project In in order to make that happen We'll do ng add Angular last fire and I'm going to do at latest because I'm on version 12 of angular Now let me show you the cool thing that's going to happen here because I've already set up my project Angular fire is going to install so angular fire is our integration with firebase firebase is a cloud Hosted database solution with lots of cool features. We're going to use two of these features today We're going to use connecting the database to angular fire to firestore And we're going to use the deployment feature to get our application onto the internet So all of our friends and loved ones can see how cool we actually are So while this is running if you type this in go ahead and create your firebase project because it's going to take a few seconds for The package to install now if you have questions Definitely head over to the q&a section of this workshop so that way our incredible Our incredible team can support you Now we're almost out of time together and i'm waiting for this to install So when we add this i'm going to start i'm going to start adding the code that we'll need So that way we can get our application Running first thing that we need to do In our component For app.component.html i already know this because i've worked on this the Our content wrapper here that we have now all of our code We're going to switch to observables because we're going to use observables. We need to switch this So i'm going to take this and delete it and then i'm going to drop in the Drop in a different one. So i'll do io that okay All my application is crashing. Okay, that's why So we had a little bit of a crash when we're installing. We should be okay Okay, now it's going to proceed My friends, let's see if we can get this working for us. Okay, so we need our we need to convert all of our tasks to be asynchronous Next In our application. Here's what we'll end up having inside of the component.ts We'll change all of our swim lanes. All of these will become Okay, so we're just about We're out of time. Okay friends We're just about out of time and we're not going to be able to finish implementing our application But that's okay. This application was built on a code lab So you can go to the code lab and you can find all the steps to complete this But friends, it's been so fun to hang out with you. I've really loved doing this workshop with you Thank you so much for coming. Thank you to the incredible teaching assistant team. You all are phenomenal And until the next time go build great apps and enjoy i.o