Angular 10 Tutorial #17 - Directives in Angular | Angular 10 Tutorial For Beginners

hi friends welcome back to arc tutorials this is angular 10 full tutorial series for absolute beginners in today's episode we are going to learn a very very important and very very fundamentally critical topic called directives you cannot build an angular application without directives is it a true statement or false think again that's true you cannot build any angular application without a directive now you you will think hey so far we have covered 16 episodes but we never created any directive and it's still working you at the end of this episode you will get your answer let's get started this is part 17 of the angular 10 complete tutorial playlist i am planning around 100 tutorials for you including live application as well so make sure you check out the notes and the github link for the code all right so so far these are the topics that are on your screen right now which i've covered so far right so make sure that you have checked out all the previous episodes so that you have continuity in your learning today we are talking and focusing on learning directives in angular all right so the first and the most foremost question that is often asked in interview especially if you are a little bit experienced kind of a developer in a role the question is what is an angular directive a lot of people talk about types of directive different built-in directives available etc etc but sometimes they fail to explain a simple thing like what is a directive right so a directive is used to extend the power of html by giving its new syntax right that's the simplest way you can explain angular directives are used to extend they are used to extend the power of the html by giving its new syntax right now what directives can do direct directives can extend can change modify behavior of any dom element right so that is what is an angular directive now what are the different types of directives so there are namely three types of directives component directive structural directive and attribute directives right now these are the three built-in directives right now there is also a thing called custom directives right where we can create our own directives but high level there are three types of directives right now like i said cust component directive this we have seen in the previous episode we have generated components and we know that every angular application comes with at least one component which is app component right so at the beginning of this episode i told you can there be an application without any directives the answer is no it has there has to be one and that one is a component directive it's called app component right so if you want to refer you can refer it in your folder directory you go you would have a default app component here right so you will have a default component called app component right that means every application should have at least one component directive now why are these called component directives because they have its own templates right that also we have explored in detail in the last episode so make sure that you check it out it's extremely important that you understand and follow each and every topic carefully now you can attach events to component directives right that can also be done so that is what we call it as event binding right so we'll see that in the coming episodes the next one is structural directives so what are structural directives anything that updates the structure of the template or the view or the page so for example when you say ng4 it will add more elements it may delete elements ng if may toggle the view ng switch based on a certain condition will you will display an element or not so these are all called as structural directives right because they are changing the structure of your view or the structure of the template right the next one is attribute directives right so attributes are nothing but like ng style ng class right again we can extend it by writing custom directives but that's a separate topic altogether we'll cover down the line right all right so how do we generate a directive right so like i said we can generate a custom component component is also a directive right so we can write ng generate component followed by component name we can also write ng generate directive followed by directive name that becomes your custom directive what it does how to use it will cover it later that's not for today right so let us go back and kind of make some notes for you quickly so you have a recap of what we are doing this is episode number 17 we are learning about directives right so what is a directive directive easier is a way to extend our html right both view and behavior right including both view as well as behavior right so directives are used to extend the power of html right now there are mainly three types of three types of directives right so first is component directive and you have structural directive and then you have attribute directive right so i am going to explain you little bit so that you understand how it works right so with some examples now so if you go to appcomponent.ts we saw this is a template right this has its own template this is the selector right so this is the example of app component is an example of component director right now in the structural directive will have something called ngf ng4 and ng switch right now we'll see them how to use them in the next episode but today just know that attribute is nothing but ng class ng style these are all the built-in ones right at the same time we can also have custom directives okay so what are custom directives that we can create our own directives we can create our own attributes and which can be reused again right and how do we generate them so we generate using ng generate directive and i am creating a new directive i am saying highlight a row right highlight row right or i am just saying just highlight right so what this will do it will generate a new directive and what i will do with it is wherever i use this directive it will highlight it right so let me show you that how so what we are going to do ng generate directive so let's first clear this screen okay so here we will write ng generate directive and then i am going to write highlight so see i'm generating a directive by the name highlight now it will generate in your app and that can be reused anywhere and everywhere you want wherever you want to highlight or simple crm and then again all right so now you have to be inside the project directory to generate it so that's what i have done ng generate directive highlight let's give it one quick minute in the meanwhile please do like share comment and don't forget to subscribe to my channel thank you in advance all right so we see that uh it has created our directive and it has updated our app module also right so you see highlight directive right you see here the files are generated directive and directive.spec right don't worry about it today this is an advanced advanced advanced topic we'll do it we'll do it we'll revisit that right pick and we are we will revisit revisit this topic again once we have our foundations better right for today just understand that what is a directive what are the different types of directives and how do you relate to that right because in the next episode right um so yeah like i said uh learn about the previous check out the previous episodes to learn about component directives that i've covered in the previous episodes in detail make sure you don't miss that in the next episode i'll start with structural directives again you don't want to miss on that one so make sure you stay tuned and please do subscribe to my channel thank you so much

Channel: ARC Tutorials

Views: 10,145

Keywords: Angular 10 tutorial for beginners, angular 10 crash course, angular 10 tutorial for beginners step by step, angular 10 tutorials for beginners 2020, angular tutorial 2020, angular 10 full course, angular full example, angular 10 for experienced, angular 10 full tutorial series, angular 10 crud tutorials, angular 10 tutorial for beginners, angular complete tutorial series, angular 10 beginners tutorials, angular 10 tutorials, angular 2021 full course, Angular directives tutorial

Id: RaFJlxUwdjs

Length: 9min 28sec (568 seconds)

Published: Thu Nov 12 2020