# Introduction Angular Components

## Angular components

What we will be   going through.

1. creating a Angular component
2. define a metadata with Decorator.
3. import what we need
4. Boot strap.

# Component

Basically are the fundamental building blocks of Angular applications, they are used to :

- Display information’
- listen to events/ user input
- take action based on input

**A component is made up of  :**

[

1. **Template :**

{

its main purpose is to layout the user Interphase fragment defining a view for angular (**defines what is rendered**)applications’, made up of html  and can include binding and directives to power up the view

}

2. **Class :**

{

A class is made up of properties and methods and properties associated for use in the view

example lets say we want a title for  our view we would make a property with the title for our view.

}

3.METADATA

{

provides additional info to angular about the component, it is the metadate that informs angular that a class is a angular  component, and its defined with a decorator

}

]

below is what a component looks like:

```tsx
import{component} from '@angular/core';
//below is our meta data
@component({
     selector :  'pm-root' // a selector is basicsally a html tag
      templete :
<div><h1>{{paggeTitle}}<h1> // see the double {{pageTitle}} thats data binding in action
<div>My First Component</div>
</div>
})
//below is our class
export class AppComponetn{
pageTitle : string = 'Acme product Management';
}
```

 before using a class or a method used in a class we must import that's why you see the Import on the code above, and export.