Angular Tutorial for Beginners - Learn Angular 14 Frontend Development

welcome to tutorialcu my name is yannick and you have clicked on this video because you are interested in angular during the next hours you will get an introduction into angular software development you will learn everything very practical so you can just follow along and you will learn angular hands on now angular is one of the most popular front-end frameworks out there and it's a great choice to get started and learn it before we dive right in let me tell you that if this video here receives 1500 likes within three months after uploading it we will create an additional video about angular where we cover 25 interview questions so if you want to see that video go ahead and smash the like button right now make sure to subscribe to our channel so that you no longer miss any high quality programming courses right never forget our goal is to turn you into an expert software engineer and also please go ahead into the comment section and tell us why you want to learn angular why do you need it alright and that said let's get started let's dive right into angular [Music] now let's get started with this angular course and before we set up our development environment in angular let's really talk about what angular is it's just a short introduction but angular is a front-end framework which you can use to build web applications and you can build single page applications it's in short spa and a single page application gets downloaded by the browser once you visit the page and then changes are handled locally instead of well downloading the entire web application or website over and over again only because you're clicking a button or link for example right so in angular you create a single page application and when you host it and you visit that application or any other user visits that application or website then the browser downloads the entire application and handles the changes locally so this really speeds up the overall user experience for sure during this course we will dive deep into every angular topic which is important so now let's switch over and set up our development environment and start developing single page applications or web applications using the angular front-end framework okay so in order to start using angular we for sure need two things first of all we need node.js for compilation so if we wanna well build our angular project we wanna use node.js for that so simply search for node.js on google or go to nodejs.org if you haven't installed it already right so right now we're using the latest uh version which is 16.16 in long-term support so this is what we are using right now so go ahead download and install it and for sure we also want to install a code editor so some sort of ide which we can use to build our angular project and we want to use visual studio code in this course so for sure you can go ahead with any other ide which you want to use right there are some others out there but we will use visual studio code so go ahead if you follow along in this video because you want to get started with angular go ahead and also download visual studio code because then you can really just follow along with me and do exactly the same stuff that i am doing too so download visual studio code and install it okay so after installing node.js and visual studio code go ahead and open up visual studio code and then you should come to a screen similar like this maybe you have that well get started screen but that's not important at all now what we need to do is we need to do two things first of all check for the nodejs version that you have now installed to verify that the installation was successful and we need to install the angular comment line interface so that we can really use some angular comments to create new projects and all of that in visual studio you have a terminal so go ahead to the very top terminal and then new terminal you can for sure also use the cmd but we will use this one now because it's directly integrated in visual studio code and the first thing that we want to do is we want to check for the nodejs version so what you want to write down is you write down node and then as a flag you take v for version now let's see what version we got installed and you can see we got 16.16 awesome so node.js got set up and installed successful that's the first part and next up we now want to install the angular cli and for this we will use the npm which is the node package manager right and if you have no clue about that don't worry too much npm is just like a huge library with a lot of frameworks and packages out there and one of those packages is angular so what we do now to keep it really in easy terms and easy words we will now install angular on the machine so use npm which is no package manager run the install comment npm install globally so take the global flag and the package name is called at angular slash cli i will just show you this in a second however now let's hit enter and this will force the node package manager to install the angular front-end framework so here we have npm it's mpmjs.com right no package manager and we can for example search for angular and you will be able to see some angular packages like add angular cli the one we have just installed we can also find like at angular core it's developed by google right so angular is developed by google and um yeah this is where this stuff is like hosted right so here are really a lot of packages out there not only about angular about really a lot of other stuff too and if you want to install anything you can search for it and well run the npm comment like if i click on that you can see on the right side the uh installation comment mpmi which is for install for sure and angular cli so nearly exactly what we have done and you can see well weekly downloads two and a half million that's amazing right so angular is very very popular now switching back to visual studio code and you can see that npm well installed our angular cli successful he has added 29 packages some other stuff got removed don't care about that it's just like angular got installed right now or the angular cli and that's for sure what we need to have before we continue setting up our angular project i want to tell you that we now offer our course library in a subscription-based model if you subscribe right now you get instant access to all of our courses including the complete angular course it has 4 hours more in total than this youtube video here you also get access to all future courses too for sure so what we suggest is that you start your free 7-day trial right now start the angular course over there and afterwards start the asp.net course or the c master class in case you don't have any prior c sharp programming experience and if you are happy with the subscription you can simply continue learning and enjoy all new courses that get added to the library and if you don't like it for whatever reason you can simply cancel the subscription at any time so start your free 7-day trial now simply click on that info card which is popping up right now or in case you are interested in c-sharp and you want to become a true senior developer we can recommend you our 21-day challenge it's about angular and asp.net core and you will learn how to build full stack applications in this course the course has a really huge scope it teaches you a lot of stuff in fact you will learn how to build complete real world applications using angular and asp.net core and in that course you will build a complete flight booking portal from scratch so if you are not only interested in learning angular to become a front-end developer but also interested in getting a huge step beyond this becoming a true senior developer or full stack developer you should definitely check out our asp.net core and angular 21 day challenge i mean we got a huge page right over here which is telling you everything in detail right i cannot recommend it more because this one will make you absolutely job ready for any web development scenario you can find the link to this premium course in the description below now let's create a new project right here inside of our terminal and what we want to do is we want to use the ng new comment so ng means angular right so everything what you can read about ng is always related to angular and then new will create a new project so ng new let's call it to do list let's hit enter now you can see or you might see if you are on windows that arrow here cannot be loaded because running script is disabled on this system now we need to run another comment to enable this execution policy for our current system so if you got that error just write down set execution policy add a flag called scope set the scope to current user and add another flag execution policy and set the value to remote site so set execution policy scope current user execution policy remote site now hit enter and once you run the set execution policy comment you can run the previous comment which was ng new to do list now let's hit enter and it now asks us if we want to add routing to our angular project let's now hit yes we will get to that point later on when we talk about routing in angular right so right now it's not important just write down yes and let's hit enter you can now see that it asks us which kind of style sheet we want to use and we want to go with custom css right now which is the cascading style sheet so simply hit enter again now it really creates a new project for us you can see that inside of a to-do list folder we get the app module ts app component and all of that and we will discover all of this in detail so now the project got created but it's still installing some sort of dependencies so packages which are required for angular this is why npm here is installing so many packages awesome so now for me the packages are installed now next up let's see how we can start our application and take a look on what well this comment has really created for us now let's continue and run our application first of all we need to open up the project you can see that something here got created in to-do list slash source assets and all of that so we got a main folder or root folder which is called to-do list in visual studio code let's open up a new folder and it will automatically open up the documents folder which will be like the main folder where your projects are saved by default uh well maybe you might have changed that previously if you have worked with visual studio right so go to the destination where your project got created for me it's here to do list i just selected folder and that is for sure the default saving path or creation path for a new project now before we really discover what we have here right because we got some stuff we got some note modules we got a source folder and inside there we got our scripts and here we got some configuration files but before we discover all of this let's simply go ahead and start our application so open up a new terminal again and for starting an angular application you want to use the comment ng surf right so angular is a web application and that applications are getting served on your local host for example so let's hit enter give it a moment to process the comment and once that's done you should see that everything here worked fine browser application bundle generation complete and then you can see that the build started here at that time it took 26 000 milliseconds and now angular live development server is listening on port localhost right so open your browser on http localhost you can just hover above this uh hold down control and click you can see follow link right so let's do that control left click and here is our application so this is like the default template that you get when you create a new project and you can see to-do list app is running here right and you can see it's hosted on port 4200 for me localhost means like 127.0 so this is like the other word for localhost right so you can write it down either way however as i said an angular application needs to be hosted anywhere and in this scenario here it's hosted in the local host this is how you can start your application and if you make changes they get updated here so now next up let's see what we got in our project when we take a look at our application again all of what we can see here on this main page or on this single page right because right now we only have that here needs to be anywhere written down in our project so let's discover where this well website what you have just seen is located open up this source folder we will mainly well walk around in this folder and open up the app folder and inside here you can find the appcomponent.html the appcomponent.css and the appcomponent.ts right angular is for sure based on typescript we will cover that so open up the app component html right now as you can see the content below is only a placeholder blah blah blah right all of that is like really what we just have seen we have some style inside here if you're familiar with basic html what you definitely should be right it's just like uh styling and when we scroll even more down more down mourdon we will get to the toolbar which is for sure on the top we got that welcome here we got the card highlighting with that rocket ship and then the name of our application you can see that here app is running you can see we already got some data binding here but we will cover all of this now what we want to do is we just want to remove everything here because we don't need it because we really want to get started from scratch however the entire site that you have just seen when you started your application is inside of that single html file and one thing already which i can tell is that angular is based on components when you create a new angular project you will automatically have one component created by default which is the app component right so and inside of that app component we have the content which you just have seen however let's get rid from all of that let's create a single div let me zoom in press ctrl and plus if you would also like to do that zooming in right and let's simply write down here app component now let's save this and revisit our application now open up terminal new terminal and write down ng surf again make sure that the other terminals are closed if you have them opened if not you will get a message which is telling you that in well that the current port is still getting used which means that you can just go ahead and revisit that page that old page because your application was still running no problem however just give it a second to compile the application let's follow along with that click here and as i said you can now see an empty page which is just displaying app component so inside of that single component we now have no other content than this simple paragraph right here okay so your key takeaway right now should be that you have understood that angular is displaying content inside of components and we can reuse all of these components wherever we like right so just imagine that you don't really want to repeat your design and all of that five or six times just because you need it at different places in your application instead you create the component one time and then really use them like blocks and set them into a specific positions at your application all of that so think about components like building blocks that's all you need to understand right now so next up let's start with creating some user interface for our to-do list because we now have cleaned up our default app component right we removed everything because for sure we are starting here from scratch so the first thing that we want to do is we want to include some css which for sure is about styling so if you have no clue about css and html please go ahead you need some knowledge for angular because we cannot start really with basics of html and basics of css because angular is for a little bit more advanced web developers already so html and css are really very very basic and you can watch any video about that like 20 or 30 minutes that will be enough however we also got typescript here which will get covered after this video instead of writing all the css code down here which is quite boring i will copy it from our github repository you can also do that inside of that github repository you can find a comment for each important step with like um yeah with an information where you can see copy from here right and here is the github repository you can find it at github.com slash tutorial cu slash angular minus course minus to-do list mine is app and there you can find the comment history it's here right now because i just really created that project just some minutes ago you can see that because i will create it uh all over the way while i record this course so right now for sure there's nothing but if you later on click on that link or go to that repository it will be full with some comments and here you can then find the code you need to copy so next comment which i will create is like about that css part and then you can simply go ahead go on that comment find that css file and copy the content and then you got the css code now we have that copied here and paste it so our css file is fine and one thing i already want to say is that each component by default contains four files one for css so styling one for html we call that the template one for the actual typescript code which is appcomponent.ts right here and one for spec which is mainly used for testing okay so now we got css done here next up i will close that css file open up the html5 we got that app component paragraph right here and instead of this we will now bring in a table here right for our to-do list so let's remove app component and create a table here for our to-do list inside of that div we will add a css class and the class is called container now we really don't want to get into that too much and inside that div that first div we have another div and that one has a class which is called to do list and inside that to-do list we have an input group again you can just follow along watch this and then copy it from the github repository don't have to really like copy paste it while i write it down you can for sure do that or you can write it down while i write it down but you can simply watch me doing it and then in the end copy paste it i think that would definitely make more sense and you will not make any copy paste mistakes while just watching and trying to do what i do here okay so we have a diff and inside that div which is actually a class input group that's our form which we can use to add and delete something for example we got an input and that input is type text so what should be added to our to-do list right placeholder we do to do there we go and then we have a button here and that button also has a class and the class is set to add button and all of those classes we can find them in the css file there we go so one container inside that container to-do list inside of that to-do list we have an input group inside of that input group we have an input we have an input field and a button awesome now afterwards right below that input group we will create the actual table and inside of that table we have one table row so tr and inside of that table row first of all to give it a class which is even we have a table data and inside that table data we have pre so pre visit and for example and then after table data we have one more table data you will see where we have it like this just in a second and we have two buttons so let me copy that button here paste it two times adjust the content so that's that one here is like x for delete and this one here is done and for the top one here for add button we can add a plus sign for example right so that we have some content there now this is remove button and this is done button so let me just recap this here at the very top at the to-do list we have an add button and right below inside of that entry of our to-do list we have a remove button and a done button right now let's just copy over the complete table row because one is even and let's create one more which is odd so this is the second one let's call it call that for example and again we have remove and done so the only thing right here is like we're adding another class which is odd right now we are for sure writing all of that hard coded right so we just bringing that in later on we will for sure make all of this bound to real data so that we don't have that only hard-coded here awesome so now let's copy both of them again so that we have table row to table row so that we have two new entries one for even one for odd let's copy that over let's paste it in let's adjust that so instead of visit n2 times we can say go to gym probably it won't happen but however next up we got wash the dishes wash the dishes and we can yeah we can create one more so simply go ahead and copy the even one again and this is why i say just watch me doing it and then later on copy it from the github repository because it's like we're jumping through it copy pasting you know html is very long and really not not that easy to read if you just scroll through it so don't get lost along the way just uh we're not doing any crazy stuff right now you're not missing anything if you just watch me do it and then copy it light your own right so just listen to what i'm explaining here that's more important last one that we have is not go to gym it's shop for the party awesome so now let's save it like this you can see a hot reload took place so once i make a change and hit control s for saving you can see that the build fires again and the changes that are made are getting compiled so now let's go to our application and take a look alright and this is the result that we will then see so this is only html and css so the structure is nice and we also got the styling but we have no functionality so i can click on the buttons but nothing happens and when i write down something here into our input field where you can actually see that nice shadow effect then on focus which is cool however if i write down hello world for example and i click on the add button on the right side you can see that nothing for sure happens and this is where the real fun begins because we will now dive deeper into typescript and angular so that we can add functionality to our application now on the left side in our explorer open up the appcomponent.ts ts stands for typescript and the programming language that you can see here that is typescript and if you are familiar with any programming language like c-sharp python or javascript or whatever or well at least a little bit more advanced javascript you will have an easy time on learning typescript because it's very very close to c-sharp for example but also very close to javascript and it adds just some additional functionality and the pattern or the syntax how it's written down is a little bit different so next up i will give you a brief introduction into typescript so for example just like a c-sharp file or python file or whatever we have that file extension and instead of cs or pi we have ts for typescript and as i said typescript has many similarities to c-sharp for example here we have a class and that class is called app component and every code like functions or variables or properties or whatever has to go in between of the curly braces which you can see right here so code which is related to app component class should be inside of the curly braces to make a class accessible from the outside of this file we have to export it for this we use the export keyword right here be aware typescript is case sensitive so we have to write it in lowercase here inside of a class you can define a field such as title of type string right here right so title colon of type string semicolon we can also set a default value for this field for example and we can change it as we need it so here we have a title and the title is set to app and it's of type string and typescript automatically infers the field type when you initialize the field with a default value as we have done it right here so once we initialize the value with app we don't have to define that it's of type string anymore because well typescript is intelligent enough to see that app like with that single quotes is a string so it automatically sees okay title is of type string because app is a string so let's skip defining the type right here and based on the default value it infers that the type of this field is string as i already said now we can also for sure create arrays exactly in the same way like we would do it in other programming languages so here we have a field called items of type string array and inside of that array indicated by the array brackets you can see that right we have an item1 and item two so this again is of type string but array and since the type is inferable from the initial value we can again omit the type definition here this is how we can define a method inside of a class so if you only know javascript then you might want to consider using the term function right so in javascript you have a function and in c-sharp for example it would be a method so the termination is different here however the function that we have our method is called log it has a parameter of type string which is called text and the return type is set to void right here so this is a method in typescript we can easily define variables in method bodies just as we do it right here so we have a variable of type string with the name message and the initial value is message plus the parameter of the function which is called text just like fields we can also here skip defining the variable so we don't have to include the type here now let's call the log method of the console class to display the message on the browser console it looks just like in javascript right methods are public in typescript by default that's important so if you want to make it private we have to add the private access modifier like fields and variables you can omit method return types when they are inferable from what the method returns so right here we have a sum method and well for sure we are returning a plus b here so it will be a number in the end we don't have integer of load right here it's called number in that scenario and so it automatically well indicates or infers that the return type of this sum method should be a number so we don't have to well set the return type to number here because as with any type that we got it's inferible now remember that this keyword so this is mandatory before fields and methods and typescript when you want to access them from within a class you can also omit semicolons as long as you write different comments in different lines so let me just go back you can see that semicolon here right or this one but we can omit it if we just write one comment in one line so no semicolon here we have number string and boolean those are the primitive types in typescript you can also define variables of the type of classes for sure as you would do it in any other object oriented programming language for example so here we have a class called app component and we create a new variable of type app component and we assign a new object of that type app component we already covered it but this is how you can define arrays and here we got everything summed up just a little bit so you can see you can create a number array string every boolean array and for sure use your custom class so and this is everything what we really want to cover now about typescript because one of the prerequisites of this course is for sure that you know any programming language and really if you know any programming language if it's python or c sharp c plus plus c or whatever even playing javascript you are most likely to be able to follow along in this course without digging deeper into typescript programming awesome now that said let's move on to angular components and to code in angular components we for sure use typescript okay so here we are back at our project app.component.ts you can see that add component decorator here we will talk about decorators along the way but first of all let's really get clear what is a component components are the major building blocks of an angular application a component is usually a composition of an html file some optional css files and the typescript class we just edited the html and css file of the app component and then we saw component class and typescript but how are they composed together on top of a component class there is a function named at component this function includes low-level information the angular framework needs to build and run the application you can see that right here right that add component decorator it's a function inside here we get a selector template url and style urls so the add component function specifies the template and the css files for the component class under it well template url well template is html so the app component html which we have edited is the actual template for this component same goes to style url's app component of css and the selector is approved so we can use an html tag write down approved and it will refer to this component no worries we will see that in action however the component handles the logic behind the template the user interacts with so if i click on the button for example in the html then we can run a function or method inside of our app component typescript class now let's see how this works now let's talk about the one way data binding here in our appcomponent.ts i got that opened on the left side so that you can follow along right appcomponent.ts we're in the typescript file and you can see a field here right so title equals to to-do list so this is a string field which we can use to display it in our html template so if we want to access this property title we can simply go to the related template which is appcomponent.html right i got that opened here but you can find it on the left side here appcomponent.html let's go into that right here at to-do list i want to go into that and want to display the title here so if i write down title like this it's just a simple string so if i save it and run it then you will see that it's just handled like a paragraph so what we want to have instead is for sure the value of title right here i want to show you how this works just in a second but let me just show you what you can see if you just write down title for sure you can see title right here because it's just a paragraph just the string inside of the html content so instead of doing that we want to use binding let's add double curly braces here just like this and in that way if i save it we bind it to the property value app component title right so whatever the value of title is will be displayed so right now it's to-do list right so title here will be replaced with the value to-do list now let's take a look and as you can see we get to-do list right here and this is called one-way data binding and the component and the template can interact just like that and this is one of the angular framework features right so don't forget about that it's called data binding here in our template right don't forget template is html of the component we have hard-coded all the tasks on the to-do list now let's bind them to a new field we will add to the component class instead let's create an array of strings for the tasks so that we don't have to use them hard coded right here right so we want to have that modular and dynamic so here we have a field called title for sure we can go ahead and create one of type string array so let's call it tasks and the value is a new array and inside that array we can write down like visit and another value called that just what we have inside of our template go to the gym wash the dishes and again shop for the party for example okay so now we have an array here right and as you know if we assign an initial value it's automatically inferred so we don't have to say well type of string array for example right we can definitely do that you can see it's still compiling and everything is working fine here but let's remove it because it's easier to read if it's just getting inferred automatically awesome so now for sure we can also use this tasks property here as we have used the title so let's switch over to our template and let's replace the hard coded tasks with the array items so let's start with the first one which is here visit n again two-way data binding so we want to use double curly braces refer to tasks and then for sure we use the array brackets and refer to the first item in the array which is for sure on index 0. now let me copy that over and let me just call that do that instead one right we're doing it from scratch for sure we can use a loop and all of that we will see that just in a second wash the dishes will be three and shook for the party before there we go now let's save and take a look as you can see for sure it's still the same but all the values are loaded from the component and not from the hard-coded values we had before so right now all of these elements here are coming from the tasks array of the component now for sure we can improve that a lot right we don't want to hard code this even year so tasks 4 is also hard coded right instead we want to for sure iterate through it because we can then build exactly the same list just by well using a loop and creating all of the template once instead of copy paste copy paste copy paste i mean that totally makes sense because you never know how many tasks you really have in the end so this is definitely something that should be handled by a loop and what we want to do here is we want to now go ahead and remove everything which starts after the first element so tasks zero and then we get a button and a button table row is ending here and then we can remove all other table rows because we will automatically create them inside of a loop awesome so it will now look like this let me just show you that so i save it and go to the actual application this is what it should look like now so we only have visit n and now let me show you how you can create a loop so right here in our table row because we want to create a new tr table row for each element in our array this is why we create the loop inside of that tr element right because as i said let me just repeat that for each element in the array we want to create a new table row so we say asterisk and then ng for so we create a for loop here right don't forget that ascerisk ng4 and now let's write the condition let task of tasks so what simply happens here is just think of it if you're coming from c-sharp for example over for each loop right so for each task in our tasks array do the following and if you think about it of a for loop then we just iterate through each task inside of the tasks array however we can now use that task object here instead of using that binding so let's just remove the array index like this so that we directly reference the task so let me double click on that and you can see it's highlighted right so task task this is exactly how it's good okay cool so now what he will do for sure is he will iterate through the tasks array and then we take the single object each single object of that array and display it inside here and he will now create multiple table rows so let's see that in action okay and this is now what we got we got all the elements from the iteration of a single loop from that array and this is awesome right so now you have learned how you can use a loop in angular to display well a collection of elements all right so let's just recap this the one-way binding you learned to bind a field of a component class to the template you can see that just right here on the left side we've got the component and the field and on the right side we got the html template where we simply use the double curly braces to bind the value of that property or to bind the property and then display the value right okay so components can also have methods like other classes we already talked about this and this is how you can define a method for components so like say hello and we will do that just in a second because can you guess the most interesting part about it right we can bind events to them from the template so as you can see on the right side right here every time a user clicks this button the say hello method is called now let's do that in practice so that when we click on the button inside of our html we can force a method to run inside of our component okay so switch over to the app component.ts and right here we will now create a new method don't forget if you come from javascript you might want to use the term or you might know the term function so a method is just like a function right so we call that method at because this method should take care of adding a new to do element to our list right now we want to call this method once a user clicks on a specific button for sure it's the add button so let's switch over to our template and here you can see the button class add button this is our button which includes the add sign the plus sign right and now we want to bind it to a specific event and if you are familiar with html you know that a button can have an on click event right and we will use it here in a similar way so what we do is we say parentheses click so this is the event and then you can see we can enter a value here so once the button gets clicked we want to call the add method and again this is working because we are inside of the same component right so appcomponent.ts contains the add method and appcomponent.html so we are inside of the app component here we are inside of the template here we are inside of the script right so this is why we can use the add method here very very easy so what happens now is that once a user clicks on the button the click event gets called and the add method listener which we have now registered will get invoked right if you want to hear it in that termination okay so in easy words once the user clicks on a button we will see that at method here being executed we can write down some logs or something else but to make it very easy we can simply print out an alert and let's say hi so alerts are very easy to see right so let's switch over and once we click or write down something again click on the plus button here our add button you can see an alert popping up definitely make sure in the background that you have your changes saved okay you can see hi so this is the alert box right awesome okay so now we can force an action or a method to be called once you click on the button and this is very important for our main functionality of this application because for sure we have like three actions here we want to add something we want to mark something as done and we have a delete button and every time we click on the specific button we want to perform a specific action right so this is called event binding now for sure we really want to add a new task so let's work on that functionality and we will now talk about the so called local reference and without further explanation you will just see what it does in a second so let's switch over to our html here you can see our input field for a new to-do item so whatever we write down here let's say go to the mall right and you click on the plus sign later on on the add button you will add it to the list so what we want to do is whatever we write down here into the input field let's say go to the mall we want to let the add button know that the value right so that when we click add it actually submits the value from the input field and we will do that by using a local reference so use the hashtag sign we got right here and then call it new task now we can use that reference inside of the button click event so here inside of our add method we can now use new task dot value a new task is an input field and the value is whatever we write down into that input field now he's complaining because our app method right now does not take any parameter so let's switch over or let's say first let's switch over scroll down to our add method and let's add a new parameter here so new task of type string new task is just the name that we can provide it doesn't have to be named exactly like this right but new task is the best possible way because we want to add a new task that makes the most sense and now instead of well displaying alert high we can for sure display whatever the value of new task is just for some simple debugging awesome let's go ahead and check this out here we are in our application go to the mall let's hit add and you can see go to the mod so now this is a local reference let me just explain you that one more time here we got the input field and we add a tag to it which is like new task just like an id think of that and then inside of the button we want to submit the value of that input field because well we want to know what the new task is right and so we just use that id to get access to that input field and then take the value so as i said new task is in html you can see that on the top right side here html input element and this html input element has a property called value and this is whatever you write down into that input field so if i write down hello world the value of that input field is hello world awesome so don't forget that it is called local reference okay to finish up this functionality we for sure really want to add a new task to the array so let's switch over to our script here to lts file and inside of that add method instead of showing an alert we for sure want to go ahead and append this string to the array so what we do is we call this and this is really really important so you have to use this keyword to refer to this object to this app component in that instance right so this dot tasks tasks is our array field for sure dot push you know that from javascript right if you want to add something to an array you need to use the push function or push method and we want to add the value from our parameter right so new task awesome you can use the semicolon if you want but you don't have to let's save it like this and again take a look at the application great so let's go to the mall here let's hit on the add button and you can see go to the mall and we can for sure span that right absolutely no problem and once we update or restart our application for sure this will be gone because we're just saving it during runtime so once as i said for example save it it will regenerate and compile again when you update the page you can see that it's gone for sure because those values here are hard coded uh because we have them integrated directly here so they are kind of hard coded and everything else for sure we get added but it's just as i said it's just in memory and once you shut down the application or just restart or recompile the application everything for sure gets deleted because we are not using any permanent storage here so if you're interested in persistent storage for example so if you want to know how you can connect the database and the backend for example as i said earlier we got that 21 day angular and asp.net core challenge right so angular is used for front end you now know that right and asp.net core is for developing a so-called back-end which also includes a database so if you really want to build a real-world application where your data is getting stored and saved and you can update your data and delete information and all of that using a real world structure so a database and all of that you really want to take a look at this premium course you can find the link to that right now in the info card popping up this course here really makes your job ready as a junior developer for front end development or if you're already experienced as a programmer this will turn you into a full stacked developer great so from my side there is no better way out there to progress faster in your development journey great now that said let's continue okay so now the add functionality is completed we can write down something into an input field click on a button the button calls the add method we use the value which we can grab from the local reference we take that parameter and we push it right into the array and the data binding system of angular automatically updates our view so that we can directly see once we push something to the array that our template here the for loop gets rendered again and yeah well the change is taking effect immediately so if we push a new element to the array it will automatically get rendered because angular has detected a change in the value and that forces angular to update and render the changes great so now we have already completed the functionality of adding a new task now let's move on and talk about how we can remove a task so again we nearly have to repeat all the steps we need to create a new method with the name remove for example for the app component then we need to bind the click event then we need to confirm the removal from the task and again remove the element from the area instead of adding it right so let's get started by creating a new method let's call it remove and for sure we want to remove a specific item so existing task by name for example we don't have an id or something else right now we just identify tasks by the string or the description right so if i say go to the mall is the task then the description is go to the mall okay next up we go to the app component.html let's save it right here and you can see that x here button remove right that class so this is the button we want to use for binding so what we do is we simply go ahead again try to do that on your own right if you want to use the click event what symbols do you have to use you have to use the parentheses right so take that right down click this is the event and you bind it to a method and our method is called remove and it takes a value string value right you can see that right here and the value we want to submit is the one we are getting from the for loop so task let me explain that again by the example of go to the mall in our array we have our tasks and one of them is go to the mall so we render it here using data binding so task is again go to the mall and we want to remove it and submit go to the mall and in the end our method will take care of removing that string go to the mall from the array which will result in the fact that our array has one element less the one where we clicked on remove and then for sure everything gets automatically updated and we can see that the task is then completely gone now let's add some sort of confirmation here so we are done in the template let's switch over and take care about the logic right down confirm you can see in a second what that does let's add some string interpolation here are you sure that you want to remove the following task and we want it include line break and then write down dollar sign there we go existing task so just like that or nearly like that we just need to bring that to the end of the string there we go and we need to add double quotes here okay so in that way it should work okay confirm are you sure that you want to remove the following tasks blah blah blah let's see what this does in action we can do that on an existing item so visit and let's click here you can see i sure you want to remove the following task visit n okay so now you can see why we use that double quotes okay and if we hit okay right now for sure nothing happens but if we click on the board also nothing happens right now let's move on and add the removal of the task from the array that confirm here is well giving us a return value so we can store it and say var user confirmed equals to confirm so we got a value yes the user confirmed the process of deletion or no user did not confirm right so if user confirmed you can write it down like that so if user confirmed this assumes that yes the user confirmed right you may know it like this if user confirmed equals to true but it's exactly the same if you write it down like this okay and then we want to do remove the task from our array and again we have to reference this object so this dot tests equals to this text so we take the entire array and filter out all elements except the one that we have to remove existing tasks there we go all right now let's save it like this and again take a look once we click on visit and and let me click on the board it is not happening right i got that in german here but it's not important it just says abort even though my computer is well completely set up in english and all of that it still however figures out that i'm located in germany all right now let me hit ok you can see well it works fine so after confirmation our if statement is running and we can remove everything from our list awesome so this is our delete functionality let's take a look at how we can mark a task as done awesome so now let's continue and take care of the marking a task as done and for this we again have to repeat nearly all of the same steps so let's get started by binding a button click event for a new method which we call mark as done so let's do that right here let's write down mark as done for sure we again need to know which task you want to mark is done so let's write down task string save like that switch over to the html template and here we got the second button which is done button for sure and again use parentheses click event you can see once you've learned the fundamentals it's most of the time repeating that stuff however there are way way more features of angular to discover but these are really the basics that you can use to build some actual functionality now mark as done and let's submit the task awesome let's switch over to the typescript component now let's alert this so alert the task task some interpolation here is done there we go so that we know which task is actually getting set as done however we need to create a class just in a second to really be able to permanently mark something as them because right now we don't have any field any property on our task to mark it as complete because our task is just a simple string right so let's see that in action let's click on done here the task visit n is done okay so all of the binding and method calling is working that's fine so let's move on now and let's create a class for our task okay in our app component.ts let's create a new class so we can do that right at the very bottom of the script here class task and inside that we have a constructor constructor and inside a constructor we have a field title value data type is string awesome now let me just explain what a constructor is so if you are familiar with c sharp or another object-oriented programming language you're most likely to already know what a constructor is but in case you're just knowing plain javascript or something like that you don't know maybe what a constructor does so if we have a task class right here and we create the task object then we have a so-called instance so we have an instance of an object right so and once we create an object so once we create a new task in that moment in that moment of instantiation or creation of that object the constructor gets called so what we can simply do is we can create a new task and submit some initial values all right just think about it that way so once we create a new task object from that class here right we can submit the initial title for example perfect so now that we got the data type class task we can go ahead scroll up until we come to the tasks array right now those here are really plain strings let's set the type tasks of data type task array so it's no longer a string array it's now a task array now we can no longer say visit and call that instead of we need to create a new task so we now instantiate or create a new object of type task and we can submit the initial value visit n because this is what we have defined in the constructor so this here is what i'm talking about okay so we create a new task and we submit the initial value for the title awesome so now we can just copy that over let me just do it that way and then add the closing parenthesis for the instantiation okay new if you don't know that keyword new creates a new object of a specific data type right so new task reresult of this year will result in an instantiation so an object of that data type task but that's really more about object oriented programming itself and not about angular however i know that most of you and i really mean like 95 or something like that really are familiar with a lot of advanced programming concepts and you know what typescript is or c sharp and you can really work with words like new or construct and all of that this is why we don't dive too deep into that topic because angular is not really for absolute bare bone beginners right now it's for a little bit advanced programmers who already have some sort of basic programming knowledge for sure okay now that we have our task here we can scroll down and can see for sure some reference arrows here because right now new task does not well is is a string right here but we cannot push a string into an array of tasks so this is where we for sure change the data type from string to task and we will also do that if we scroll down here to remove existing task we will now handle that by the task itself and not by the title or description okay now our errors compilation errors here are gone this is fine so now let's switch over to our html we don't want to show the task object anymore okay we want to show the task dot title and that is again let me show you in our task object it's that field here public title so we want to show the title very very important now we can create a field and this is why we just created that class for the class task here public is done the initial value is false so let's scroll up and here in mark is done we want to go ahead and set mark is done first of all we want to change here from string to task and then say task dot is done equals to true awesome so let's remove the alert you can now see that we reference that task it's an object of type task we set it to is done equals to true because we have a field for that right here awesome let's save it let's switch over to our html there we go you can now see that here in the button click add new task value we need to adjust that so what we do for that is we switch over to our app component go to our add method right here and we push a new task object so new task there we go and for sure we want to call the constructor and submit a new task for the title and now we want to change that back from new task to be streamed that was a mistake of mine all right it's just for removing and for mark is done but for adding we for sure need a string to create or to build up that new task all right i was a little bit too fast there awesome so let's save it like this in our app component everything should work fine now we should not see any errors so let's take a look at our app and that's fine so let's just remove visit n awesome let's add go to the mall so everything should work fine go to the mall perfect and if we mark something as done then we cannot see any visual change right i also removed the alert so we don't get any feedback right now and even if we would get some feedback we don't have any visual difference between the done tasks and the remaining undone tasks so next up let's talk about how we can use conditional single class binding so that we can make a difference between done tasks and remaining tasks all right now let's take care of displaying done tasks in a different way than the remaining tasks so go to the appcomponent.css this one is the related styling sheet right and let's add a new css class it's really just two or three lines of code right here so please go ahead and follow along dot is done and we set the text decoration to be line there we go to be lined through right so and this is all we have to do when it comes to the css site now imagine that we have a css class with the name is done like the one we have just created and in html to set a css class to an element we pass the name of the class into the class attribute of the html element angular framework provides additional features to apply css classes based on boolean values for example we can assign the css class to an html element just like this we can also remove the css class from html element like that and we can even bind it to a field or set it to the result of a boolean expression like that one here no worries we're gonna see that all in action right now let's bind the is done class to the is done field so switch over to the template and here where we have the title in line 14 for me so task title we want to go ahead and add something into the given text so pre we got that here i want to go ahead and use class dot is done and we only want to assign that if task dot is done so what it does is assign the class dot is done yeah assign that value that css class when the task or the property is done of the task is set to true so it's done let's see that again is done is this field here just i really want to make it as sure as possible so that i can and i can understand it it's done can be true or false so in the end it would be like class should i assign the is done css class to the object true or false even depending on if the task is done or is not right so this is pretty simple boolean values here okay so now let's see what that does inside of the application click on done oh you can now see visit n all right let's do that with go to gym all right cool that works i mean there are some visual aspects which really don't look very nice right now but we will fix that just in a second however from the functional side it starts working all right let's continue here we are inside of the loop here ng4 right and we can make use of the index right now this is behaving like a 4-h loop if you know one from another programming language however we can also get the index of the iterator so let's assign a semi colon here and let's use the index to equals to index so i equals to index now we can use i and no if we are like on index 1 or 10 right depending on how much elements we have in the array and how far we have processed in the iteration okay so now this way we can use the index for the table row you can see that we always use the class even here right there was a difference before we had that even and odd and even and often it was gray and dark gray and light gray and dark gray and light gray always in the mix okay so let's do exactly the same stuff here we again angular class dot even depending on now we write down a bujin expression i for index modulo 2 so is there any remainder and then equals to zero so one is odd two is even three is odd again four is even right this is exactly what's happening here this is the model or operator you should definitely know that this takes care about even that makes sense and now let's add that same stuff for class dot odd but this time the rest value is not null and there before we can just remove it like this for example or you can write down is not null okay let's see that in action again and that looks nice again so click on done done done done okay now we got even an art aside that works fine now let's take care of that line through visual mistake here the issue is coming from that preformatted text here so we can get rid of it and just write down p for paragraph and for sure we need to adjust the closing tag too however now you can see that just in a second if we take a look at the app now you can see that our margin is gone so the text is now very close to the left side but once we click on done everything looks fine now so the line through looks great let's adjust the margin let's just provide here some space go into the css file and now let's take a look at tr which is the table row text align left we got that right here and inside that table row we have table data we can add some space there so let's add a td for table data and what we want to provide you is margin left and as a value we want to use one ramp for example so let's take a look awesome so now you can see it's not that close on the left side right so there is some space that looks better and the visual effect is still working fine okay very cool now you have learned how you can add css classes really depending on the field of a class for example or on a component's property or whatever however this is just really dynamic so class is done depending on the boolean value this is very very important because this is what you want to use a lot of times in a real world scenario we can also write boolean expressions like this to conditionally write a string somewhere for example so let's switch over and do it like that so that we can change the text from a task which is done to be undo and if it's not done then the text should be done for sure inside of appcomponent.html you can see that button mark is done right here for me in line 19 and that text here done we want to switch it so once the task is marked it's done the text should be undone and not done anymore so let me just add two line breaks here that's easier so let's add double curly braces if task dot is done right we add a boolean expression here then the text will be undo and in any other scenario the text should be done so if the task is done the text of the button should be undo and in any other scenario which would be that the task is not done the text of the button should be done now we need to make some refactoring here because we now no longer set the button to be only done right we later want to switch it back so use it as a toggle so is it done you click again no it's not done you click again yes it's done you click again now it's not done right so instead of having it like a one time button we will implement it like a switch so that you can really turn on and off to do item for example if you just misclicked so let's switch over to our app component.ts scroll a little bit up until you come to mark is done now right click on that and let's click on rename symbol let's call it toggle is done now let's hit enter save it switch over to app component and also change it here toggle is done okay let's start the application and take a look when i click on done you can see the text changes to undone done done done done and all of them now are undone for sure we have no functionality for toggling them but that's what's up next but right now we have really done already a lot of stuff depending on the current state of an object for example so let's go ahead into our code into the appcomponent.ts and toggle this done instead of always setting it to true set it to the value which it is not so if it's true you will set it to false and if it's false you will set it to true and so on so always set it to the different boolean values so if it's true it will be false and if it's false it will be true and that's an ongoing circle this is how a switch or toggle is working for sure let's take a look at our application again there we go done undone done undone and you can see that also the text changes and for sure we can also see that the line through disappears depending on the current state and this is because we have bound all of these classes dynamically to the field is done of the task now we need to refactor one more thing and then we are done with that functionality let's take a look here in appcomponent.js we got our app component inside we got a title we got tasks we have a function for adding a new task and we have a functionality for removing task however the toggle is done method that we got right here that should not be part of the app component because it's related to a single task so let's copy it and let's bring it into the class task because toggling one task is related to that task and therefore from a good or best practices side of view we should use that method and bring it inside of the task and not of the component awesome so if we do it like this we can for sure also remove the parameter here so toggle is done is always then changing the instant field of that specific object now you can just say this dot is done this dot is done exactly this way so this dot is done equals to whatever this dot is done is not awesome okay so now we have a method inside of the task which is toggling the given object we now need to do to make that complete is switch over to app component html you can see toggle is done what we now do is for sure we remove the task from the parameter here or as an argument what we do is we call task dot toggle is done because the task you can see that right here it is a task object right it's an object of type task and therefore we can for sure call the method toggle is done because we got that right here toggle is done awesome so again save it go to our application test it because we made some changes so we want to see if everything is still working and that's absolutely fine very cool all you can see when you click on delete you can see object object that's pretty interesting so let's see where this is coming from as always if some mistakes are happening during recording i will leave them inside i will not cut them out because you can then see how i would usually go ahead and fix those issues so let's switch to our project go into appcomponent.ts and it was by removing you can see user confirm confirm are you sure that you want to remove the following task existing task dot title that's what we need to add here awesome okay let's save it and take a look again so let's click on done and undo and then on remove and you can now see are you sure you want to remove the following task visit and now it's working again so previously we were referencing the whole object but now we are again because we added the title later on we are now really connecting the task title and not the task object and this is usually when you see that object object then you have reference the entire object another specific variable or property all right so everything else really looks fine that's very very cool great now you can also see i'm not sure if you have noticed that but if we say go to the mall and we add that three times in a row for example before we edit the class and i click on delete it deleted all of the items because well they had the same name and we filtered only by name but now we are really filtering by object instance and now once i remove go to the mall it only deletes the one that i really select even if they all share exactly the same name great so the main functionality of this small application is already completed and you have really achieved that using bear angular right so some event binding here some input stuff there some local referencing some boolean binding expression and for sure some conditional single class binding i mean that's what you have learned so far and there's a lot more to discover and we will extend this application really by a lot because there are a lot of more concepts and functionalities that you need to discover in angular so now that we have the first part you finished let's move on with next stuff we already talked about components and we saw the app component right here with its template so html css and typescript file now how can we create a new component because as you already know components are the building blocks of angular so in order to create a new component we can run a comment from our terminal so notice that i'm right here inside of the folder so the folder i changed that after the third or fourth lecture for you you may see a different name right here right so just write down ng this is again for angular generate component you can also shorten that ng g c right so ng generate component or ng g c for generate component but i like it to write that down generate component and let's give it a name and the name is task list so let's hit enter you can see that angular created four new files and updated one so here we have the creation of the task list component html then we have the spec file ts which is for testing then we have the typescript file and we have the css styling file and also our app module got well configured just think about the app module for now like sort of the root of our application where we register our components we will get to that later on but just so that you know why something here got updated now on the left side inside of the app folder you can see a new folder appearing now you can see that in green here task list and if we collapse that or open that up you can see task list component dot css html spec ts and typescript all right so here is our new component now open up the appcomponent.ts and let's move all of the content from here let me just close that terminal let's move all the content from here beginning with the tasks into our new tasks list component so what i do is from tasks here everything add remove class tasks so really everything i will just copy that remove it now so that the class app component looks like this let me just add that curly brace so it should look like this for you now now let's switch over to task list component.ts and here under ng on init we will get to that later on just ctrl v to paste it in here i get it brace too much now let me just remove that one curly brace there we go and now we have that inside of our task list component.ts instead of our app component awesome so we can save it like this let's close it we have to repeat that step also for our template so go ahead and open up the appcomponent.html and the task listcomponent.h so that we really now transfer all of those things over so let me just copy everything here and let's remove it from the app component html and let's paste it here that way you can now see that we should remove the title because we don't have that in our app component we could also leave it here if you like but we will just get rid of it because we don't need it or what you can do is you can just copy it save it like this and we can also for sure bring it here into a like h1 for example right so we could potentially edit like this just so that you know that we can use the title here but i don't want to have that so i would keep that empty okay so and the last thing that we have to do is we for sure also need to move the styling so now open up the app component.css now let's select everything here app component css let's remove it from here we want to save that and then go to task list component and then paste it in again awesome and now for me i will start the application so just ng serve and for you if your application is already running you can just visit the application take a look everything should still be working now and with working i don't mean that we can see anything right we will not see anything but we don't have any compilation errors awesome so let's take a look here great so you can see we have no compilation errors because we can visit everything right and we can see that compiled successfully here but now we need to really take care of displaying our new component because initially it was like we had the app component but now we don't have any content in the app component however it's still rendered but it's empty and we now have to place our task list component into the initial app component and for this we use the selector and you have already seen that if you go to any component into the typescript file you can see that selector here and app task list this is the selector we have to use to display the component so go to app component because that app component here this one is always rendered and now what we want to do is we want to switch over to the html of that so app component and then go to app component html now that one is empty for sure now let's call the selector what you want to do is you want to use that as an html tag so open up those text and then write down exactly how the selector here is defined app task list write that down just like that at a closing tag too and this will force angular to render the html of the app task list and display all of the content so let's compile it let's visit our application again well and you can see that we now have the component and as i said it's a building block right so if we want to have that again well we could simply go ahead and use that in another html file we could simply again just include all of that and angular will automatically render the app task list component including all of the functionality provided from the typescript files which are included from the components so right now if i take a look at the application you can see that we now have three components here right so and we don't have to duplicate that over and over again no we just have to set an html tag like you would do that with a paragraph or whatever so very very simple this is why component is or you can see a component as a building block right because you can compose inside of a new html file you can just compose your components without having to rewrite them and reorganize them all the time now to be a little bit more specific on this a component encapsulates the visual interface data and behavior of a piece of ui and you can include it into other components by using its selector and treating it like an html tag now if you want to rename the selector you can for sure do that let's remove the app task list let's just call the selector task list for sure and that's one of the nine things the compilation will now fail because he has no app task list anymore we need to for sure adjust that here so that we only include the correct selector and now it's compiled again awesome so now you have created your first component and yeah basically we have that app component which is our starting point in the angular application right that is the component which is always provided by default but now you have created a brand new component we just brought in the functionality we just copy pasted it there and then you now have a component which you can use everywhere okay now that you know that we have a task list component which we can use like an html tag we can style our app component html a little bit more so that we add sort of a basic structure here first of all what we do is we will add a header here so add a head attack and inside of that head attack let me just zoom in a little bit inside of that header tag and let me just get that a little bit smaller here header tag we will just write down task list for example and then we can create a body so open up a body tag and put that task list inside of that body tag okay save it okay now you can go to git and copy the app component css for the header so what i do is i go again to the css file and paste it right into that file all right there we go and we have a linear gradient background for the header and we have a like font family set and some styling right okay so let's take a look at the application okay so this is how it looks now we now got that nice header here but the space between the header and our component is a little bit too much so we could go ahead and just remove that padding now so go into task list component dot css and then let's simply take a look right here for the padding so just scroll to the very top and here you can see the padding top you can adjust the value you can completely remove it just as you like depending on your wishes for sure now this definitely looks way better initially we set the padding just so that when we first started the application the component wasn't really at the very very top because that always looks a little bit weird awesome so now it looks definitely way better as i said components are the primary building blocks of an angular application and you should never forget that you can compose different components together to create an entire page app component is the root component of our application it's always provided by default it's called bootstrap component in an angular application other components usually load into the app component so exactly what we have done we have the app component and inside the app component we load our task list component but how do applications distinguish between the bootstrap and the rest of the components now let's take a look at the app module i already talked about that just to give you an idea the add ng module directive accepts a bootstrap property which contains the bootstrap component you might wonder what a module is right modules are typescript classes you can see that right here they can package multiple components whenever we create a new component using the angular cli it automatically adds the new component to the declarations area of the module right just think back when we created our component you saw four create statements like create a new html css and typescript file and you also saw that update app module right and this is what happened inside of our app module the task list component was added into the declarations array and this declarations array contains the components that this module packages so if you remove the task list component from the declarations array of the app module the app component won't be able to load it anymore and calling its selector will throw errors the app module is the main module of an angular application that angular creates automatically when you generate a new application using the angular cli you can also create new modules on your own you can create as many motives as you want and package some components into each you can import the module to another to share its components with the importer to create a new module we can run the ng generate module in the root directory of the project and then name the module angular creates a new folder with the module's name then when the folder doesn't exist already and generates the module class into the folder now let's open up the app module you can find this in the explorer if you take a look right here appmodule.ts is also inside of the app folder let's create a new module with the name task list by running this comment at the root of the project so go to the terminal or you can open up a new one for sure however you can see the powershell here let's write down ng g for generate module let's call it task list you can now see that we have a task list module.ts now let's remove the task list component from the app module you got that right here so task list component let's cut that out we can also remove the import statement right here let's just get rid of it let's open up our new module which is the task list module right here we can now import again that statement or that module so import task list component from task list component and then inside of the declarations we got that right here we can now task list component so that we edit right here awesome so now we have created our own module and added the task list component right awesome and based on the last presentation you know that the task list module is now able to render or display the task list component now to make a class importable to other files we should export it and once we export the class other files can import that class by using its relative address just like you can see it right here but that's just about typescript right and angular has its own system for importing and exporting components from modules as an example importing the class of a component to a module file is not enough for being able to use the component selector in other angular components to be able to use the selector of a component in other components we should declare the component in the declaration section or import it from another module that declares the component and the module that declares the component should also export it to make it accessible by other components now let's export the task list component from the to do list module so switch over to task list module right here and here you can see the imports and we will just extend that add a comma here write down exports just like that make it an array and write down task list component now we need to switch over and import the to-do list module into the app module so switch over save that here to the add module now here at the import statements let's write down import task list module and that module for sure exports the task list component so we can use it so what we can do here inside of our imports we can simply add the task list module now awesome and in that way we can again render our task list component from the app module because it imports the task list module which exports the task list component now let's take a look at our application and check if everything is still working and as you can see everything is still working fine perfect so now we have generated a new module and attached the task list component to it however we exported it and set up everything in a way that our app module is still able to show the content of that component okay now it's time to get started with some new functionality we want to bring in a calendar page so what we will do now is we will create a module and a component for the calendar page so go ahead into your project and let's first of all generate a new module and name it calendar so ng g m calendar angular generate module with the name calendar let's hit enter awesome so on the left side you can see a new folder called calendar and inside there we got a calendar module now let's create a new component ng g c for angular generate component calendar make sure the first comment was creating a module and now we are creating a component so let's hit enter the component again consists out of four files which is ts spec ts html and css you can see that right here oh and you can see it automatically updated the calendar module so let's take a look at the calendar module and you can see that it now declares the calendar component automatically updated because it's like the same root folder right it's the same root which is calendar awesome now let's export that calendar component in ng module here we get imports again we add a section for exports and it exports the calendar component so that we can use it later on from anywhere else let's switch over to our app module.ts and let's import the calendar module so here we got import task list module for sure we can just do the same thing with our calendar module there we go now inside of the imports we will now also import the calendar module which again gives us the possibility to display the calendar component now let's switch over to our appcomponent.html because we now want to extend it here here we get our body here we got our task list component let's add the app calendar component app calendar there we go so now let's take a look at our application perfect and as you can see on the left side you can see calendar works and this is the actual proof that we can see the content of our calendar component let's see why i can prove that because when i go to the calendar folder and here we got the calendar component html you can see calendar works and this is exactly the paragraph which we can see at our website right now okay so within three minutes of video you okay so in under three minutes you have just created a brand new module and a component you have exported it and then show the content of that new component inside of the app module great now it's time to really make that thing a calendar now it's time to bring in some beautiful ui into our application and for that we use the very famous angular material library you can check that out by your own if you like i just want to show you what package we're using it's material.angular. and as i said you can check it out on your own we will use that for our calendar page okay so let's add angular material and the comment for this is ng so angular add now write down at angular slash material that is the name of the package right it's not angular material it's add angular slash material awesome so let's hit enter give it a second to load okay so the package information is loaded and now it wants to install and ask us if we want to proceed and for sure we want to do that so type in y and then hit enter again okay now you can see that it wants us to select a theme and well there are a couple of themes here so let's real quick take a look at them let me just open them up there we go and the last one and then we can just have a preview of them all right there you go so it's just about the theme right so here we got one indigo pink let's see purple green we got pink blue gray and the purple amber so go ahead and just check whatever style you like right you can also click on components here and then get a preview of really a lot of stuff and we'll proceed with that pink blue gray because well that color is really related to our company branding color so let me proceed with pink blue gray right here you can just use the arrow keys and then hit enter set up global angular material typography styles let's write down yes and then include the angular animations module yes we also want to do that so include and enable let's hit enter then okay so now the package got installed successfully and we can see some update statements here for angular.json index html style.css and a lot of stuff so let's take a look on what happens if we add a new dependency for example a package just like that one right here so adding new dependencies other developers may have encountered some of the problems you face and many times they have solved it and shared the code as an open source library to make the job of other developers easier you can install those libraries in your angular application as a dependency to actually use them to add a new package or dependency you can run ng add and then the name of the package you want to install into the root directory of your application you can alternatively also run npm install and then the name of the package you want to install but using ng add also configures your application after installation so this is the preferred way now let me show you where you can find the dependencies if you're just pay attention on the left side right here you can see that package.json file right and here we can see some configurations of our building and watching and starting the application right ng-surf and all that we can configure some stuff here and you can also see the dependencies right here at angular animations for example and also what we just have added add angular material so for sure if we start an angular project we have some well default dependencies like angular core and forms and all of that but angular material and animations for example just got well added by our comment so if you're wondering what dependencies your application covers you can check it out right here in the package.json so when we open up our app module you can see the browser animations module here right so installing the angular material imports the browser animation module to the app module but we want to use it in the calendar module instead so what we need to do is we need to move that browser animation module here to our calendar module and in order to do that we will first of all remove it from here so from the imports just remove it and also from that import directive at the very top so let's get rid of it awesome now let's open up our calendar module and again import it here so import browser animations module we want to import it from add angular platform browser slash animations there we go this is the path that we want to use here and now let's import it here in the module so browser animations module okay so now we switched it over from app module we removed it from here and brought it into the calendar module because we want to use that angular material animations inside of the calendar module for sure great so we can directly stay here because we want to have some more stuff for example we want to have a date picker so let's go ahead and first of all import two more things the matte date picker date picker module from add angular slash material slash date picker and secondly we want to import the matte native data module from angular add angular slash material slash core awesome so those two elements we want to have them imported so let's go ahead scroll down and define it here matte date picker module and met native native data module there we go so met the date picker module met native date module great so it's time to bring that in action let's open up the calendar component html and because we just well imported so many new stuff we can for sure use the matte calendar html tag right here and if we now start the application you can see some sort of calendar and a lot of stuff here going on right sunday monday tuesday wednesday thursday friday saturday and you can see august here and you can see all the days and well you can even click on all of this but we need to configure it okay so the first thing that we want to do is we want to wrap a div around that so div there we go and inside of that div we have the matte calendar perfect now we can save it like this and then go to the calendar component dot css and here we want to create some styling for a div which would then for sure be applied to the div we just created let's say display flex and justify content at center this is the first thing and for math calendar for that tag we want to set the width to 500 pixels okay save and take a look again great so this is what it looks now it's already way better because you can really see a lot of more content without having that on the full width of the screen okay so the first thing that we should do now is to restart our angular project so close your terminal for example here and run again ng surf so that the compilation takes place because then the calendar module well will get applied correctly because right now it was just a little bit kind of bugged you can definitely tell that because it didn't look very nice but that was not an issue so now let's simply restart our application so let's close that here and let's simply run ng surf again and that will result in the fact that our calendar will be displayed the correct way okay you can now see that it's not really appearing but that's not an issue if you can see you can hover above this okay that's fine so now the actual style is getting applied nice but i made a mistake when i selected the theme because this is what i selected it's pink blue gray right so and it's for a dark mode theme for sure because the content then is white and instead what i should have picked instead of pink blue gray is indigo pink so i just made a mistake there we want to use that because that one is made for a white background at first place so the fastest way to fix that issue with the wrong theme is to simply go ahead and remove angular material if you want to do that please go ahead so let's open up a new powershell here and let's simply npm uninstall add angular material because previously we used ng add but there is no reverse ng add right so you cannot ng remove or something like that so as i already told you ng add and npm install are like equivalents but ng add adds some more configuration to our project however now it got removed so let's just again ng add add angular slash material okay so now again let's proceed here because that is by far really the fastest way if you want to switch the theme you can definitely modify the theme but you have some real struggles if you in the end want to change the theme so the fastest way is to get rid of the entire package and then just re-install it and it's however a good practice in installing and removing packages and dependencies and all of that as you can see we are now again here at the theme selection and this time i will not pick pink blue gray i will instead pink indigo slash pink that was the one that we should use set up angular material yes include and enable all right so let's see what happens now because i assume that when we go to the app modules just in a second after the installation is completed we again have to remove the browser animations module so let's take a look you can see angular json and appmodules.ts got configured and you can see we again have that here browser animations module let's get rid of it as we did before that's all we have to do now what we do now is let me just close all of the terminals let me open a new one and again call ng-surf so that we this time force really every package to be included and compiled successfully great when you now take a look at your application and you can see a nice calendar awesome so this is how it should look like for sure okay now we can move on we want the calendar and the task list component to be on two completely different pages right we don't want both of them right here so as you see angular material library contains some components that do a lot of otherwise time-consuming work for us right since angular material is outside of the scope of this course you can learn more about it by reading the documentation on it at material.angular.io however we will still use some components of it okay awesome so now that we got all the visuals fixed again we can proceed to the next topic which is routing and as i said earlier we for sure want separate sites so we don't want to have the task list and the calendar on the same site because in real world applications you also want to have multiple sites each with its own content let's go to the app component html site let me just close that we go to appcomponent.html and what we want to add here is we want to add a so-called router outlet so now pay attention i remove both of the entries right here and put in a router outlet tag and we will have to configure that you can see that just in a second so we want to load components dynamically to the app module as the user selects a link for example and the router outlet enables us to load a component at runtime based on user decisions and that is exactly what we want to have here no worries it will get clear first of all we need to assign a link to each component to enable the user to replace the router outlet with the component the user clicks its link so if we for example want to go to our calendar page router outlet here will be replaced with the calendar right so just think of it that way let's open up the app routing module you can find that right here app routing module we should assign each component a url a component and its url both together are called a route we can specify an array of routes for an application in the routes array right here at the top of the file so let's define a route for the calendar component first of all we need to add the calendar component right so let's do that import calendar component from calendar calendar.component nice now we get our routes you can see them right here and it's an array and inside of that array we want to define a new route so let's do that let's add a new object component is calendar component and path will keep that empty for now just like that so now we have defined a new path for the calendar component and the path is like just the home page because we don't provide any specific path here so what i mean is to load the component into the router outlet by default when the app starts we simply set the path to be an empty string as we do it right here so our calendar component is our default starting site let's take a look at our application and you can see that we only have that component right here so right now we have no way to go to our task list so let's go ahead and add a new road for the tasks inside all that routes array we just want to extend it and add a new path so add a comma add a new object set the component to be task list component there we go it automatically adds the import statement right just in case you didn't know and then we set the pass this time for sure not to be empty but tasks so in the end we will reach that page by writing localhost blah blah blah port slash tasks so let's save like this and again take a look at the application now let's go to the url bar and write down slash tasks right so localhost colin 4200 for me that's my port yours might be different slash tasks and you can see that we when we hit enter get to that url and we can now see that component and what happens in the background is that the component in the router are that switches so right now the router outlet contains the task component and or the task list component when i go back to our start page or home page we will see the calendar component and this is well all driven by the user decision and this is what we call routing okay so next up we want to assign some tasks for a certain date so let's say on 11th of august for example we want to have some specific tasks right because this is the application that we want to build we don't want to have a so simple application where we just have a very long to do app no we want to have like a scheduler where we have a calendar inside of that calendar you can pick a date and then on that date you can see your to do items for example pretty pretty cool so we need to move on here and before we want to take care of that new functionality we just want to add like a link to a different page so that we can swap between the pages so go to the calendar component.html got that right here calendar component dot html and here at math calendar below we want to just add a simple a tag which is an anchor just in case you didn't know and let's call it tasks and we set an href so uh yeah well a target destination right but in angular we do it different we use the router link and we set the value to be of slash tasks exactly as we have defined it awesome okay now let me just add those double quotes there we go okay because this is how you assign a value in html so you can see that it's not compiling but that's not a problem because we now go into the calendar module all right don't go into the component go into the calendar module and here we simply add an import statement and we import the router module and that gives us the possibility to use that so go into imports and also here import the router module that's awesome now you can see the compilation error of the html file is gone we could get an atac router link to tags and all of that perfect so now let's add some simple styling go to calendar component dot css and let's inside of the div here add flex direction set it to column and line items set it to center there we go now let's take a look at the application again you can now see at the bottom of the screen that tasks link here right and if i click on that i'll get to the tasks list and this is how you can for example create a nav menu or something else right so this is how you can use the router to create an atax on anchor to link to a different component right so this is the angular way of creating navigation awesome so now let's really extend our functionality of the application and talk about two-way data binding okay now let's use some two-way data binding for our calendar component so open up the calendar component dot type script there we go and when i scroll a little bit down here after the ng on init life cycle hook which we will cover well it takes some time until we get to it but we will cover the ng on the net lifecycle hook so no worries right here i will create a new field called selected date and the value is a new date right so this is an object here new date object right so that we can really store the information about like 11th of august 2022 for example inside of a variable or field or property or whatever you want to call it now let's switch over to our calendar component.html we got that right here and now inside of the math calendar we can really configure that date so that it is pre-selected when we launch the application and for this we simply go inside of the met can calendar opening tag here and then have the brackets and inside of the brackets the parentheses and then we write down selected and selected is equal to selected date that's for sure the property now what we also want to do is we want to show it here so let's use the binding syntax two times curly braces let's set selected date dot to local date string awesome so let's save it like that and open it up so that we can take a look all right as you can see for me it's 11th of august and that one is now pre-selected because that's the date today and when we create a new object of type date so new date it's always set to the current date great so you can see 11th of august 2022 this is handled by the two local date string but what does two-way data binding mean we will cover that again later on but let me tell you that when i click on 15 here for example the date you can see that here is now set to 15. so by clicking on the on the new date here we update our field right our property so when we start the application we read the value one way and when i click somewhere else on 2022 for example we update the value the property and this is called two-way data binding so i can read the value and automatically update it and once it's changed it's getting read and displayed again this is two-way data binding for reading and setting and updating right awesome now let's take a look at parameterized router links and this is very important if you want to transfer some data information from link a to link b let's call it like this right so if you change your route so your url you want to take some information from a to b so when a user clicks a link to load a component for example we can set up parameters for that road inside of the route definition and afterwards we can receive those route parameters from the ng on init lifecycle hook of the newly loading component now let's send the selected date to the task list component inside of our calendar component.html here we get our atac and we will now modify it you can see that we are redirecting the htag to slash tasks route now let's extend that add a comma and let's add a new object and set the date to selected date which is the property on selected date in our calendar component awesome because we also used it here right so for sure we can also use it here in an a tag so what happens now is once we go to slash tasks in the url browser box right where you can see the url you will also see parameter call date with this selected or with the current value of the selected date property now let me show you that so here we are at our page and when i select for example the 16th of august and i click on tasks you can see in the browser box right here in the url bar tuesday 20th of august for example okay so now we got it in the browser url bar so we are submitting the information but now we for sure need to read it here inside of our task list we need to read it from the url or route so switch over to our task list component.ts not the calendar right because now we want to adjust it in the task list we are sending the information from the calendar component to the task list by using the route awesome so task list component dot yes and inside here we want to make use of the router so let's import two things here the activated route which is the current route when you're on the website for example and we for sure want to use the route object so there we go we can grab both from at angular router now inside of that export class task list component you can see implements on inet and this is the life cycle hook and on init or ng on in it will get called once the component is loaded great so the first thing that we have to do before we go to the ng on init here inside of the constructor we now need to go ahead and configure the route so let's say private route activated route so that we can really use the value of the current route in the browser right now let's switch over to the on init life cycle hook and let's write down var date for example of type date equals to new date we create a new date and now we read the value from the route so this dot route dot snapshot so we make a snapshot of the current route take the params so params and let's from that params fetch the date object so date or the key or its specific value in that case and then log the information so console dot log date so that we can really verify that everything is working as expected so save it like this and let's check for that let me open up the console ctrl shift j and google chrome at least and now when i go back to our tasks calendar there we go let me select the 24th of august for example and i go to tasks now you can see that we got in yeah an entry here and since it said to locale this is german for me right so because it applied it in the german way but for you it may be different depending on wherever you are and yeah that's the lock so this got read from the actual route which you can see at the browser url bar so we're sending it from the calendar component to the task list component and we are able to actually read it in the task list so our task list now knows on which date the user has clicked before so we now can filter or can set up the system where we say now only show the tasks for that specific date okay you now have reached the end of our free angular course here on youtube and if you want to continue you want to go to our all access subscription right an info card is popping up right now because you can sign up there and start your seven day free trial and there you can continue with the rest of this course it's about four hours in total so four hours more content right in total the course is about 6 hours long so you now had 2 hours here for free on youtube and the rest of the course is inside of that subscription you can start it for free right away 7 days continue the course and if you like to learn something else we recommend asp.net core right here right so that should be your natural next step you can for sure continue learning or cancel your subscription at any time however as i already said at the beginning of the video if you are more interested in an absolutely serious way so that you really proceed on your journey as a developer to become a senior developer we suggest you to join our angular and asp.net chord challenge so for that you will need some basic c-sharp knowledge but if you have that basic knowledge about c-sharp you should definitely take that course inside there you will learn how to use angular and asp.net core to build a real application in that course you will build a flight booking portal which you can see right here now i'm absolutely sure that there is no way to increase your value as a programmer faster than taking this online course and i guarantee you that you have never seen a course just like that it took us months to create this course and the students are absolutely amazed by its quality so if you wanna take a look at it go ahead and check out the link to that course in the description below so thanks for watching this video my name is janik and i would be happy to see you next time in another video definitely don't forget to smash the like button if you're interested in that angular interview question video and for sure subscribe to our channel because you don't want to miss our programming courses right here on that youtube channel

Channel: tutorialsEU

Views: 42,532

Keywords: angular tutorial, angular, tutorial, angular course, course, angular full course, angular crash course, angular tutorial for beginners, angular forms, angularjs, angular project, angular course 2022, angular course for beginners, angular course full, angular components, angular directives, angular services, angular modules, angular tutorial 2022, angular tutorial mosh, angular routing, angular app tutorial, angular basics, angular form validation, angular freecodecamp

Id: WaT_yGzm47I

Length: 126min 50sec (7610 seconds)

Published: Tue Aug 30 2022