Angular Components

Angular Components

Hi Friends

In this article we will learn about Angular Components. In our previous article I have discussed how to set angular app using Angular CLI. If you have not read the previous article , it is recommended that you go through them first.

If you prefer watching video over reading article. You can watch the video

Be sure to subscribe to this channel to watch more videos

So let’s start and learn step by step

What is Component ?

Components are the main building block of Angular Applications. If you start working with Angular you will definitely spend most of your time working with Components. So, it is very important to understand how components work in Angular

In simple words, we can say Angular App is a tree of Angular Components. As the project size increase we start creating multiple components and it will be a tree like structure

Angular Components

As we can see in above diagram, our angular app will start with Root Component and then we will keep on adding multiple components that will be a child of root component and further it can be a sibling of another components

If you check index.html file that we have created in last article with Angular CLI, you can see a custom tag with the name of <app-root>  </app-root> and this is a root component in angular that will bootstrap our angular application

Angular Components

How to create a Component 

To create component in Angular we can use ng generate command from Angular CLI

Let’s run this command from your current working project

Angular Components

let’s see what this command is doing:

ng : stands for angular CLI object

generate: is used to generate any file (you can also use g (short name) instead of generate)

component: it means we want to generate component(you can also use c(short name) instead of component)

user: name of the component( you can give any unique name for the component)

Once you will run this command you will see 4 files get created instead user folder

user.component.css : this file will contain all styles associated with this component

user.component.html: this is a template file that will render the view associated with this component

user.component.spec: this file will contain test cases for this component

user.component.ts: this is a typescript class where you will write the logic associated with this component

we can see app.module.ts is also updated because A component must belong to an NgModule in order for it to be usable by another component or application

Note: All these 4 files are not required user.component.ts file is mandatory to create component. You can specify extra flag while using generate command to specify which files you don’t need. For example, We don’t want to generate .spec.ts file , you can do so : ng  g  c  user  –spec=false  ( it will not generate .spec file)

Component Structure

Component is composed of three things:

  1. Template :-  It is the view layout of the component , it tell the component what would be render for view
  2. Class :-  It is component class that will have properties and methods that will use by view
  3. MetaData:- This provide additional information to angular about component by Decorator, Metadata tells Angular how to process a class

Decorators are the methods that use to modify the Javascript classes. Decorators attach metadata to typescript classes so that it knows what those classes mean and how they should work.

Angular Components

Component Class

In Angular we create  class like with class keyword followed by className (here it is UserComponent), here we have used export keyword that is ES6 module system. Export keyword here mark this class as public so that we can use it in other files by importing it .

This class will have its own properties and methods that will define the logic of this component . As of now we don’t have any property and method

Angular Components

MetaData

Typescript class will not act like a Angular Component until we don’t attach additional information with metadata and to add metadata we use Decorators.

Decorators are the methods which start with @ symbol. So in this @Component is a decorator which is taking object ({} ) as argument which will allow us to pass metadata

Angular Components

@Component() decorators will have lot of keys that will be used to define our component

  1. selector : selector key is used to define the tag name for the component . Now we can call app-user like a custom html tag <app-user> from any html template
  2. templateUrl: Every Component will have a attached template that will work like a view . So whenever this component will render it will display view to the user and that view will come from this template file
  3. styleUrls:Every Component have their own style that will come from file which you will mention in styleUrls. It takes array as value so we can pass multiple css files

Apart from these keys we can use lots of other keys, but as of now we will discuss 2 more :

     template: templateUrl will link a external html file with your component. But if your template have few lines of html than in that case we can also use inline template with the help of template property

Angular Components

Most of the time we recommend to use templateUrl because in inline template we will not get any intelligence support and any formatting support.

Note: you can use either template and templateUrl in the component because a component can have one template attached to it

styles: same like we have template and templateUrl, we have styles and styleUrls. If we want to write inline style for the component , we can use styles property instead of stylesUrl

angular Components

 

Import Statement 

@Component is a predefined decorator which we need to import from @angular/core library.

Angular Components

Render Component

As we are ready with our user Component but if you will check browser you will not find anything from this component template because we didn’t call this component yet.

So to render this component on browser we need to call it like a custom html tag from the template file of parent’s component with the selector name , here the value of selector is app-user

so now move to app.component.html( this is a root component) and call it like a html tag <app-user></app-user>

Angular Components

 

Test the output

To check this component is working fine or not start your angular server using ng serve  and you if you can see this message on browser it means this component is working. Congratulations 🙂

angular Components

Conclusion

Components are the main building block of Angular Applications. We build from basic to advanced component throughout in angular appliciation

Thanks a lot for reading this article. I hope you liked the description on Angular Components. Please share your valuable feedback and suggestions 🙂 🙂

9 Replies to “Angular Components”

Leave a Reply

Show Buttons
Hide Buttons