3. Master Angular 17: A Guide to Creating & Importing Standalone Components - #Angular17

hi guys this is Leela welcome to my channel Leela webd so we have successfully created the project this is our project right now we know that the main part so here lies in the app folder this is where we will be creating all the components and all the things so now how we can create the component so the first one is importing and using of the sorry I not uh creating of this component so how to create a component so for creating a component what we'll try to do is so we'll create a new file and let's go and create profile. component.ts so this is a simple file that is nothing but a Javascript file here we'll be using the typescript as you already people all the people aware of this one so we're using the dots means it's a typescript file so now here we will be writing the code so this is our component profile. component. this is this is the naming convention which we'll be trying to do and here we'll be using export default class profile component and this is the name which we will be creating and for this one to behave as a component we need to use the adate component director which should be imported from the angular core and here in this one you'll be having three important parameters three important keys that is nothing but first one is the selector so here you will be giving the selector thing so here I am writing it as an app ion profile so this is one thing and the another one is the template so what is the template I need to render so here I can write something like H1 and the profile component so here I can write it like this and the last one is nothing but select here spelling mistake and the Styles if you want to implement the Styles and all the things so you can write the Styles and here I can use H1 color green and the background color also you'll try to give background color yellow so this is our simple component so we have created our simple component now we need to use this component so now if you try to see here and if you refresh this page so we are not able to use this component so now we need to create this component how we can create this component so sorry we have created this component how we need to use this component how we can import and use this component let's try to see it so now let's go to the app component. HTML file I'm reming this entire code and I am writing here hila so this is our simple code now here if you try to see here we are able to see the output also now I need to use this profile component in this app component HTML so how can I use this one so here I can write something like sorry let's remove this one all yeah here I need to write app I profile that's it so now when you use this one directly and if you refresh this page here it is showing an error that app ion profile is an angular component I cannot use this one so we need to use this implement this one in the Imports thing so in angular 17 it is recommended we need to use the Standalone components so that is the recommended one which we need to use use this one we to use this one so Standalone component are directly importable into other Standalone components the angular team recommends using the Standalone components for all the new development so now for example let's say that uh the previous method how it was how it was is so we need to go to the app. module. and there we need to import it right so if you try to see here something so we will discuss that one in our module section so first we need to make this one as a standalone component in order to make this one as a standalone component so we need to write here Standalone as true okay so this one we need to make the Standalone as true and now do we can use directly this one so now we are able to see high LA but we are not able to see the component so the component is not getting rendered why because here we are having the profile component and also we have applied some Styles also so how we can make this available if you try to see here we have used this app profile and here it is telling still it is saying that it is not a known element why because so we need to go to the component.ts file and here we need to add it in the inputs why because these are all the Standalone components right so now here for this one what we need to do and here in this one so I need to add the profile component directly now if you try to see the output now we are not we are able to see the profile component thing so this is how we will be creating the component and we will be importing and using the components in another component so now here the structure we have seen it right the Standalone we need to make it as a true so that it is Standalone and the selector we need to use it and the template we will be using like this and styles there is also another way so for example if you are having more and more HTML so how we can implement this one so this becomes a tedious or confusing right how we can use this one is so instead of this template thing we also have another one that is nothing but template URL so for this one what we need to do we need to create another two files that is nothing but profile. component. HTML so which contains all the template and the another one is profile. component. CSS profile. component. CSS that's it so now in this HTML so whatever the code we have written here so this H1 and all those things we can copy it and we can paste it here so but here this is the template URL right so what we need to do here so we need to mention the profile component. HTML so here we have mentioned the path for this profile profile component HTML the same CSS which we have here we can copy it here and we can paste it now here the same thing the Styles so it should be style URL okay style URLs so style URLs you can mention it like this you can also have multiple CSS files you can have you can have another CSS file you can create it and you can have it like this also so that's not a problem so now like this we'll be creating now this also works the same only now we have divided the coding so we have divided the code and all those things so for HT H ml we have made it as a separate file and CSS also we have made it as a separate file so this is one methodology so now we have seen that selector app I profile and we are able to see this code so now one thing we have implemented right so this Standalone so I told you right angular code that predat Standalone componen is it uses the NG module as a mechanism for importing and using other components so we will see about this one in the in our NG module section and all those things so I don't want to explain you so this is all related to the angular 17 so we will learn the latest thing only which which will be completely different with our previous angular course so now we have we have successfully created our own new component so now in this component we need to know what are the different types of selectors that are supported in this one so in angular what are the different how many different types so this is a selector so this one is nothing but what I can say is this is a type selector okay or otherwise we can say it as an element selector okay so this one is a direct L we will be using this component name here directly okay so now this component name how it will be created is when you when we are using this compile time so angular matches the selector statically at the compile time changing the Dom at run time either by angular bindings or with dom APS does not affect the component rendering thing so now the different ways we are having actually so component selectors you need to understand that these are Cas s two so app I profile this one is different and here if you try to see and this one is different so now we are able to see the output okay these are case sensitive so actually we are not able to see it python profile let's see I think this one is working I think but these are generally component selectors are SK sensitive so now I want to tell you that angular supports different types of thing that is type selector attribute selector and also the class selector so first one is this uh so type selector is which we have seen it so that is is nothing but it is matching with an either HTML tag name or the node name and another one is an attribute selector so attribute selector means you can also mention it as an attribute selector for example let's say that here I'm trying to give it something like app python profile okay so this is nothing but app uh attribute selector now if you try to see the output so then also we are able to see this output right now here if you try to go into our app component. HTML now if I remove this one whether we can yeah now it's not working so now here we can also mention it something like uh app python profile like an attribute also now if you try to see the output then also this should work hey why it is not working profile component selector I have used this selector only app ion whether it is running or not so it is also running and if you see the output for this one so now it is working so maybe our Command has got stuck sometimes so whenever you try to see whenever you are not able to see the output expected output means you can restart your angular that command so now we are able to see that app in our profile com so this is our class seor now if I try to use something like app python profile it should not work as expected so now I'm trying to use it now you are getting an error right so now you are able to see that there is no output we are getting so we should get we need to get an so here now we got an output uh sorry error now we are able to see that same error in it's not where see so fine now you are able to understand right so this is one way which we can get it now another one another one which we can do it is so here we can also use the pseudo classes also the only one SoDo class it will be supporting is the not for example let's say that I want to use this one only in the app profile okay I want I don't want to use it for the uh paragraph element okay I don't want to use it for the paragraph element now this one also we can use it now if you try to see here so for this due we are able to use it and if you have another du we are able to use it okay two times the component will come if you try to see and I will try to use the same thing for the paragraph also paragraph also I will try to show you and if you see the output we are not able to get it but here I will try to apply for this pan element so now we are able ble to see the output now three things three three profiles will come if if I try to show you this one in our inspect element so we are able to see this for for this paragraph We we didn't get any anything but for the span element and also for the two D elements we are able to get for but for the paragraph element we are not able to we are not able to render the component so this is just because we have used the not only the not SoDo class will be uh applied so elements and all those things will not be supported angler does not support any other pseudo classes or any pseudo elements in the component selectors so this is one thing and we can also use another type of things like multiple selectors also we can use it like for example let's say that I want to support uh as an element selector and also I want to support as an attribute selector so you can use it like this comma oriented so now this one is this one is also supported now if you try to see here we are using like this right and also you can use it like app python profile like this also you can use it without any problem now 1 2 3 4 5 so total five five times it should be rendered so here we'll be see 1 2 3 4 five so five times it has been rendered so this is how we will be using the selectors combination so now hope you understood about this selectors and all the things so now what what is the main thing so how to choose a selector so vast majority of the components should use a custom element name as then selector all custom element name should include a hyphen as the described thing so now here it should be all the custom elements you here it should be an hyphen so this is the recommended one custom element selector is the recommended one okay by default angular reports an error if it encodes a custom tag name that does not match any available components so for example if you are using an app iphone profile and here you are trying to use any other something like uh app iyon user now here in this scenario the angler will report an error so we show an error so preventing bugs due to mistyped component names whereas in the class selector and all the things it will not show you any errors and also the another one which I want to discuss you before closing of this video is the selector prefixes okay so normally we will be using this selector prefixes like app I fund like this right so you if you want you can also use your custom one uh custom one thing so which is present in the angular.js I will try to show you those all things also okay so no need to worry so prefix is app we are using it right so we can have your own prefix and all those things so like this also you can use it so but we should not use the NG as the prefix why because it is a reserved keyword so that is main thing which you need to use so never use this NG as a selector prefix for your own custom components so when to use this attribute selector and when to use this uh element selector so you may be having a doubt so you should consider an attribute selector when you want to create a component on a standard native element for example if you want to create a custom button component you can take the advantage of the standard button element by using an attribute selector so this is one way where we can use it so that is one thing right uh so these are all the main things which you will be trying to do components that different attribute selector should use the lowercase Dash case attributes you can follow the same prefixing recommendation described about so this is one thing which I want to tell you so now we have understood here creating of the component importing of the component and also the different types of selectors how we can use for creating of the for using the components we have seen it so that's it hope you understood about the creation of the components if you have any doubts or any suggestions please post the comments below to this video and if you like this video please do support me by subscribing to my channel thank you

Channel: Leela Web Dev

Views: 4,953

Keywords: leelawebdev, leela web dev, javascript, angular17, angular, angular features, angular 17, angular tutorial, angular tutorials, angular 17 new features, angular 17 tutorial, angular 17 project, angular 17 course

Id: tzYjBezHTKQ

Length: 14min 12sec (852 seconds)

Published: Tue Jan 16 2024