Angular Components | Angular Tutorial For Beginners | Angular Components Explained | Simplilearn

hey everyone welcome back to another video in the angular series in today's video we're going to be covering the topic of angular components so without further ado let's begin first let's look at what's in store for us first we'll get acquainted to what exactly angular components are then i'll help you create an angular component by showing a quick demo and lastly we'll learn about component decorator metadata but before we begin make sure to subscribe to our channel if you love watching new and interesting technology videos also hit the bell icon to never miss an update so what exactly are angular components now i'm sure everybody uses web applications and one of the most widely used applications is gmail correct now to help you understand what components are consider them as lego blocks now they basically are combined together to form the final application so in this case here we have the logo component then you have a sign in component an image component and then a create account component now all of these components generally don't affect the working of each other but however when embedded they define the ui of your application so i hope you understood what components are so to go ahead let's discuss some of its common features now firstly they are the building blocks of an application generally you have a root component which is basically the app component and then it branches out into other components creating a hierarchy and these components are a subset of directives now don't worry about what deductives are because we'll cover them later on in the series but to give you an idea there are three types of directives you have the structural directives the attribute directives and the component directives only one component can be instantiated per element in a template now components are typically custom html elements and each of these elements can instantiate only one component now don't worry you'll understand this better when i show you the demo nextly a typescript class is used to create a component now this class is then decorated with the at component decorator now the decorator accepts a metadata object that gives information about the component now a component must belong to the ng module in order for it to be usable by another component or application and finally components control their runtime behavior by implementing life cycle hooks so this was just a brief introduction to what angular components are now you will only be able to understand the working of components when i show it to you practically so let's head over to a visual studio code now here back in my vs code i've created a folder called angulardemo within which i've created an angular application called demo components once executed the browser looks something like this so if you haven't watched our previous video on getting started with angular that is angular hello world i highly suggest you go through that video first it helps you create your first angular application so now let's go ahead and create our first component now the command used to create our component is ng gc and your component name once executed it creates four different files now let's just see how this works on rvs code now what you can do is head to your terminal and type in the command ng g c and provide a name for your component for example i'm going to just call my component text component all right so what it does is that it creates four different files you can see you have four different files that have been created and finally it updates the file that is app.module.ts indicating that this new component has been created so here in your source folder within which there's an app folder and again here you can see that your four different files have been created first is the html file where you can define all the code that you want for your component next you have the css file for your styling then you have the dot ts file which includes the component decorator and finally you have spec.ts which is basically a unit test file all right and then in your app.module.ts you can observe that the component that you've created that is text component has been imported that is what the message conveys here all right now let's go back to our app.component.html now this basically has all the code for your application so let me just get rid of it [Music] and i'm just gonna display a basic heading saying hello welcome all right so let me save it and if you go ahead and look at your browser hello welcome message is displayed now let's go back to our component dot html file and here let me provide a message [Music] let me say h 3 and let me display a message saying welcome to this tutorial on angular components all right now in your text component dot ts file which is your typescript file the selector mentioned here is app hyphen text component now go ahead and copy this and in your final component.html go ahead and create your custom html tag with the selector that you just copied now this indicates that the component that you just created that is the text component is being incorporated in the final render so what happens is that whatever is defined in the component.html file is also being rendered in your final output so when i save this let's go ahead and check our browser you can see that the message welcome to this tutorial on angular components is displayed so this was a simple creation of a component now for this let's give it some styling so here go to your dot css file and provide some styling say for example here i just say text line and let me say center and also in my app.component.cs i'm going to give the same thing and say each one text align is center all right so let me save this and there we go now we can also create multiple components and define the tags in the app component now the components are executed sequentially so now let's create another component just to give you a brief insight into it let's say nggc image component now here i'm going to be adding the simply learn logo so i'll show you how that works now you can see that a new component has been created with four files again so in my assets folder here i've added the logo so what i can do is back in my html file i can go ahead and create an image tag so first let me just display another message here just to avoid any confusion and let me say this is the image component [Music] and then let me say image source equals so the source is basically assets [Music] slash logo dot png and class equals center [Music] all right so you can also head to your css file and provide any sort of styling that you need so let me just say text align to be center and then let's create a styling for the image and here i mentioned the code for the image so let's save this and from the dot cs file let's copy the selector and create a custom html tag in our final component.html file so there we go let's save this and check the output and there we go first the hello welcome message is displayed next you have the message displayed from the first component and then you have the second component so this is how you can create your own components and don't forget to incorporate these selectors into your final html file so moving on to our next topic component decorator metadata now as mentioned earlier the at component decorator accepts a metadata object that provides information about the component correct here is a list of properties of the metadata object first up is the selector now basically the selector is a css selector that identifies this particular component in a template now this corresponds to the html tag that is included in the parent component you can create your own html tag however the same has to be included in the parent component so to help you understand that better let's head back to our vs code and say for example in our text component here the selector says text component correct for the time being let's change it to say n component all right now when you save it and look at the browser the message is not displayed so what we can do is you can copy this selector and then include this here and now you can see that the same component has been rendered onto your output all right so the selector plays a crucial role in that next up we have the template now a template is an inline defined template for the view now the template can be used to provide some particular markup the markup could typically include some headings or paragraphs that are displayed on the ui next up we have template url now it is the url for the external file containing the template for the view so here you can see this is basically the external file that contains the template for the view next up you have styles now these are also inline defined styles that can be applied to the components view so any code that you provide in the dot css file can also be included here next you have the style urls now this is a list of urls to your style sheets that are applied on your components view next up you have providers now this is again an array where certain services can be registered for your component lastly we have animations as the name suggests these are animations that can be listed for your components however these are a little advanced as we proceed in the series we'll understand them better i hope it really helped you if you have any doubts or queries let us know in the comment section below we'll be back with new videos on angular soon until then keep learning and stay tuned to simply learn [Music] hi there if you like this video subscribe to the simply learn youtube channel and click here to watch similar videos turn it up and get certified click here

Channel: Simplilearn

Views: 4,586

Rating: 4.9024391 out of 5

Keywords: angular components, angular components in depth, angular components tutorial, angular components and modules, angular components library, angular components explained, what are components in angular, what are components in angular 8, angular components beginners guide, angular template, angular classes, angular metadata, how to use components in angular, learn angular, angular tutorial for beginners, angular training, simplilearn angular, simplilearn

Id: qkk9giUxIHs

Length: 12min 15sec (735 seconds)

Published: Fri Aug 21 2020