Introduction Angular Components
Angular components
What we will be going through.
- creating a Angular component
- define a metadata with Decorator.
- import what we need
- 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 :
[
- 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
}
- 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:
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.
