Angular Component

We are going to learn the basics of a component. We are going to understand what exactly makes up a component and how we can add a new component to our angular application. 

A component is made up of three parts the first one is a template which represents the view this is created using HTML. It will be the user interface for your application, next we have a class which is nothing but code that supports the view and this is created using typescript.

The class like any other programming language contains data properties and methods that can be used to control the logic of the view. For example we can have a method to show or hide an element based on the value of a property. 

Finally a component also has some metadata attached to it and this is the information that angular needs to decide if the particular class is in fact an angular component or just a regular class. 

The metadata is defined using a decorator which is a feature in typescript. A decorator is just a function that provides information about the class attached to it and for component we use the component decorator so if we put together a template a class and some metadata we get an angular component. 

Now let's try to relate this to the app component that we have in our hello world angular application so let me go back to visual studio code and open the file AB component.ts at the bottom we have our class and the name of the class is AB component.

This class currently contains one property which is the title and does not contain any methods keeping it simple to this class we have the metadata attached in the form of a decorator and to be more specific the component decorator. 

The component decorator is basically a function that attaches to the class right below it and in our case it is attached to the app component class and it is this decorator that tells angular hey this is not a plain class and this is a component. 

The component decorator contains both the metadata and the template which represents the view so as part of the metadata we have a selector, a template URL and styles.

The selector is basically a custom HTML tag that can be used to represent this component when you specify a selector in your HTML. Angular renders the components template in its place.