Angular 4 Arrays and Objects

Initializing Objects and Arrays in Angular 4 and Use Them.

In this tutorial i will show you how to initialize both Objects and Arrays in Angular 4 as well as listing them in your html.

Initializing an Object in Angular 4

To initialize an Object this should be done inside the component class

export class AppComponent {
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

<h1>My car brand is {{car1.brand}}</h1>

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, below is an example for the 'ngFor' syntax: "This should be used inside the Component HTML"

<tr *ngFor="let car for cars"><td>{{car}}</td></tr>

 


Subscribe to
for video tutorials updates