Angular 10 Tutorial #16 - Templates in Angular Component | 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 about templates in component it's a very basic fundamental thing that a beginner should be aware of a lot of times i have seen most of the tutorials or the series that covers including mine in angular 9 i have covered directly interpolation data binding directives and a lot of you have asked me like can you explain what is the basic template in component how do we customize it how do we change it so that's when i realized that you know probably i should create a quick tutorial on templates to help the absolute beginners to understand how the template system works in component this is part 16 of the angular 10 full complete tutorial playlist i have planned around 100 tutorials for you in the series so make sure that you keep checking the description box below because that's where i'll update the notes and the code so far we have covered all these topics that you are seeing on your screen make sure that you have gone through each of that so you have continuity in your learning as well as you will cover each and every topic and master it thoroughly okay so today we are focusing on learning about templates in angular components so we will learn about what are the what are templates and components what are the different ways to include templates and components and how do you style your components right this is absolutely basic uh kind of abc kind of a stuff in angular and components so let's get started alrighty so this is um i have a this is what the application that we have and that we are building in this particular series which is a simple crm tool which will have contacts leads profile settings and authentication right nothing fancy but i'm sure at the end of this particular application building you will understand how a real-time application is done including each and every features all right so let's get started uh like in i do it in every episode i will um let's make some notes this is episode number 16. today we are learning about templates in in angular components right so we have seen that you know um whenever we generate a component it will come it will come with four files right so whenever we generate a component it would have four files right so you'll have a template file which is nothing but your dot html file right and you have a style dot css which is your style sheet right and then you have your class file right which is nothing but your dot component.ts file dot dot ts file and then you will have template style and then you have your spec file this is nothing but spec file so this is a testing file right so whenever you see spec.ts you know that it's a test file unit test it's important to call it out unit test because uh there is also something called e2e that i have explained earlier so if you have missed it please check it out all right so these are the four files that any of these components that we generate comes with so now take a look here so this is a leads listing page that we are working and it when we generated this component it gave component.html cscss spec and component.ts right so now a lot of you have also asked why is it different that i have scss you have css this is totally based on the choice that you selected earlier at ins at installing angular app right now if you selected if you selected scss which is sas based you would see all the style sheets ending with dot scss if you selected normal css you would see ending with dot css right so make sure that if you see some discrepancy it's okay as long as you're comfortable with whichever format of the css that you have used right now let's open the default dot component dot html right so this is the default now the reason am just writing it here is because this will be the component name at the starting component name dot html so when you open it it says it works right app listings works that's what it would tell you most of the times right so it will say it works that's the basic output of any component right and how is it related so it's the relationship is in the component.ts file right now here i'll again let me write it down dot component or ts file name right so open that file now here you would see something important this is the component decorator right this is a component decorator now what a decorator is is nothing but it will give you information right so what is a decorator right so it's it gives definition and meaning to the uh you can say that this is the definition of this instance right so if you are saying your component it's it will have a definition which will say it will have a selector template url and style url right so these are the three things that make up this component direct decorator right any decorator that starts with at the rate right so that's what it starts with it has prefix of at the rate okay so let's stick to component template that we are learning now this is a particular thing so here we see an important thing which says app leads listing right so every whenever you generate a component by default by default angular will add app in as prefix so your selector is nothing but your app followed by your component name so in this case it would be leads listing right now what is a selector now selector is nothing but think of it like a unique identifier to identify right identify this component right so now each of this component will have a unique selector now this is the one which you will use to add it in your anywhere in your html or any other component that is what will be used and how do we use it so we will write tag like this now this means that you are calling this particular component right i'll show you that also in just a bit just hold on to that thought for now all right so now this is how the selectors are done now a lot of times people ask in interviews also can you change the default app prefix what will happen right what will happen if i change right will your application work will it crash right will your app work or will it crash right so these are common basic things in interviews they ask you to kind of test whether you have working knowledge or not so the answer is yes yes we can we can change it and you know we can change it throughout the app right so in the configuration we can say that we don't want the default to be app we want something to be let's say nx or ngx or whatever you want right to or say arc tutorials right anything you want that that it has no restriction by default it is app but you can always change it to any name we want right and what will happen if we change it nothing will happen right absolutely right nothing happens nothing happens only only thing is only thing that we need to check is that you change it everywhere wherever you have used it right basically whenever you have changed it make sure you update it make sure you update with latest info right that's the only restriction will your app work or will it crash if you have updated all the necessary places with the newly updated prefix of necessary components with latest prefix it will work okay so the whole idea is this is just a configuration we can always change it okay now where do we change this app thing let me show you that also real quick before we jump into template part so see this is very basic very very basic a lot of people think uh that it's it's not covered anywhere else because i feel that these are important things that you should know so i'm covering each and everything so go to angular.json you would see something called prefix right now you change it let's say arc tutorials and generate your application now your components will have this prefix right is it required no is it compulsory to use app no right so that's your answer basically so where will you change it go to angular.json change prefix that's it right so that was about your selector right we will i will continue explaining it let's see in detail the next thing that you would see is in your component.ts you would see template url and style.url so this is extremely important you will see template url and you would see styles url now see the difference the first difference obvious thing is styles url is an array right which means it will take more than one styling right that means it can take more than one styling it can take multiple styles sheets as input right it can be one it can be one or more that's what array means can be one or more style sheets right now template is always one single html file right now there are two flavors to it right now remember this either now see let me break it down right so now templates in components can be used two ways right one is two ways of using templates templates and components right so first way is using template url where you will pass a single url or link the html file the other way is to just pass the template itself that means instead of a html file you will pass the entire template itself as input let me show you here how so now here you will say template here we will pass the template itself instead of file instead of a html5 right so that's the two ways of using templates in component right let me show you here in add contact so now this is your html file which is this link which says add contact works right now that's a template url now i don't have a template url i don't have a file so what we can do is we can just write template delete all of this and just put backtick now backtick is nothing but for this remember we will use backtick and not single quotes a lot of you have made this mistake in angular 9. uh backtick will be found back to key can be found found on left tops side right left side top under this operator right so you would see some operator like this right so make sure that you get that that's the top next to one usually right so make sure you get that right now in the component you will write backtick and then write your actual html code itself what you want so see now we don't have a html file but it's just a pure template itself now what is a template it's nothing but it's just html code right now we will instead we will pass the template itself instead of html file and it means we just pass the html code that simple as that that we want the component to display right we just that's as simple as that right now having said uh i hope you are clear with all of this component and everything and it's time to get into hands-on let me show you the demo with all these things that we have learned so far right so let's do some hands-on examples so that way it will be absolutely clear to you before we jump into other advanced topics like directives data binding interpolation pipes etc all right let's get started again if you have any doubts please drop me a note at surya dot aradia gmail.com and remember friends please support me by liking comment subscribing to my channel thank you so much again let's jump into the hands-on examples first let me start the application and you start the application by typing the command ng serve okay so once you have done it now let's go here and so i'm not going to you create any more components so that you don't have any confusion but i will keep it absolutely simple for you so what we will do we will be using the profile module right so we have a profile module that we created in the modules tutorial please make sure that you check it out all right so once you have that now let's go ahead and i will show it here localhost and simplecrm so you have the localhost 4200 which is giving a simple crm now what we'll do we will create a new component right and we are going to say cd simple crm and ng generate component or i am instead of easy way to do it is go into the particular folder where you have and into the module i have gone into the module which is the profile and here i am saying ng generate component i'm saying list profile right simple component list profile this is my component and you see i have done it in purpose because i don't want to confuse the new beginner new fresh readers who are joining us in this episode so they will also know that these are the files that i just generated right now okay all right so we have it here so we have the list profile component you see here it has all the four files right so now the first thing we learned is that component it has the component works so you just go there it says pro list profile works right that's what is in the default uh html that's what we learnt then it will also have a component.ts which is here listprofile.component.ts then i told you there will be a decorator which will be component right which will have a selector name which will be unique name followed by the app prefix right so you go to component you will see app hyphen list hyphen profile right that's your selector unique id now it's not a id you can just say call it as a unique name for this component right then you have template url which is list to your html link to your html you have your scss which is your style url all right so that's basically all the files that are auto generated you can see it here and you can see that these are all auto generated and your module is also updated okay so so far so good right now let's see what then we saw then we learned that there are two ways to add templates right so let's see that so i'm going to take this right and what we'll do is we'll throw it in the app component i'm going to add it in the app component like this and i told you how do you add it you just add by the selector name that that way it becomes your element right but since we have added it into the module we need to import that right so what we'll have to do is we have to include the profile module okay so this is getting little tricky because we'll have to cover routing and everything but i will still do it for you here but if you don't understand this part it's okay okay so don't worry or you know let me just keep it simple for you right if you can understand let's take the same example do it in app component right so this is also same nothing complicated uh go to app component and you have it here so here what we'll do we have a template url we have our styles url right let's see what our notes we did so we can use template or we can use template url so here let's just use the template okay so we'll use the template and i told you we can use backtick h1 followed by h1 and here we are simply going to say title okay so far so good nothing fancy nothing complicated all right so let's see are in our application so it says title but we want to display the actual title so we are going to use something called interpolation okay so now you see it says simple crm so i have not used the template url but instead i have used the template itself but it still works right so the what you know is absolutely you can use template url or you can use template it doesn't matter right as for styles again we can use anything that we want right so let me go here i'll put this back to template url okay and style urls is nothing but you can pass multiple style sheets here and you can create a new style sheet here and pass that also so this is um let's put it back here i'm going to give a class name and say c1 here and in my css i'm going to add c1 and say background color whatever right right so you see that's how the css is related to this component right so you have your component style where we added scss the style sheet and we have our html which is our template and this app root right which is a selector which is in our index.html if you see here app root now i told you we can change the selector name so let's do that right so now what will happen is there will be no output because in your index.html you are telling load the selector which is app hyphen root but the selector name that we have is arc tutorials root right copy this come to index and then again now put this directive which is arc hyphen tutorials hyphen root and now you will see this back so now i am sure at least you you have got a complete understanding of how template works here how this whole things are related in terms of the template in a component right you would be able to understand relationship between html css component ts and style.scss right so all these files are now you can see the relationship and that's how they're all interlinked for working all right i hope this gives you a complete understanding of templates in component because this is absolutely important for us to start the next episode which is directives in angular thank you so much for joining i look forward to hearing your doubts your queries your feedback if you like this video give a thumbs up please do like share comment and don't forget to subscribe to my channel thank you so much for joining i'll see you in the next episode where we learn about directives in angular thank you so much

Channel: ARC Tutorials

Views: 11,643

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 templates tutorial

Id: ia4ePGh_HX8

Length: 22min 24sec (1344 seconds)

Published: Sun Nov 08 2020