Angular 4 Components Properties, Arrays and Objects
Angular 4 QuickStart Tutorial - Part 3 , in this video i will be talking about Angular 4 Components properties like templateUrl, styleUrl, selector and more.
I will be also showing how to initialize an Array, Object and display the data.
Components Properties and Structure
After creating an Angular 4 Component you will notice that it consists of three sections.
Component Import Section
This is where you import any services needed to be used in that component
Component Properties
This part is used for setting a lot of component properties like:
selector: This can be considered as the component name or identifier which can be used to call the component template.
templateUrl: This is where you set the path of the HTML which will be used as an output for that component.
styleUrls: Is the property which is used for setting the CSS path for the above mentioned HTML.
providers: Which has all list of providers needed for this component “dependencies“.
Tips:
You can specify HTML directly to templateURL by changing it to template like below example:
template: `and write html here`
You can also do the same with the stylesUrl by changing it to styles only like below example:
styles:`
h1 {
font-style:italic;
}
`
Initializing an Object in Angular 4
To initialize an Object this should be done inside the component class
car1={
engine: 3.5,
model: 2008 ,
brand: ‘Toyota’
};
To call the car1 brand from the HTML then you specify the object and it’s property
{{car1.brand}}
Initializing Angular 4 Array
To initialize an Array this should be done inside the component class
cars = [‘Toyota’, ‘Honda’,’Chevrolet’];
List Array in Angular 4
Listing an Array in Angular 4 can be done using the ‘ngFor’ directive and this will be discussed in later video.
Angular 4 QuickStart - Part 1
Create Your First Angular 4 Project
• Angular 4 QuickStart - Angular 4 Install a...
Angular 4 QuickStart - Part 2
How to Create Component
• Angular 4 QuickStart Tutorial - Structure ...
