Let's Develop An Angular Application - Create A Model Class For Our Bike Entity And Access The List Of Bikes Stored In An Array

This is the 4th article published as part of my  'Let's develop an Angular application' article series.

 

Please read my first article to get an idea about what we are trying to accomplish in this series of articles.

To read my previous article, click here >>#3 - Angular Project Creation- Bike rental portal

 

In this article , we are going to do the following 3 tasks,

• Create a simple model class
• Create an array of hard coded bike details 
• Use the array details to replicate the bike-list-box component using ngFor
  

Let’s create model class for keeping our bike data.

 

First create a typescript file ‘bike.model.ts’ inside Src folder and create a class ‘Bike’.

 

Then create the class variables as in the below screenshot.

 

 

Next step is to create an array of Bikes in App.component.ts file.

bikeList: Bike[] = [
    new Bike('Hayabusa','Susuki','15L',312),
    new Bike('Ninja H2','Kawasaki','33.0L',300),
    new Bike('Mt 09','Yamaha','12.0L',200)
  ];

The model class Bike should be imported from the bike.model.ts file using the below statement.

import { Bike } from './bike.model';

Refer to the screenshot to get a clear picture.

 

 

 

Now, the bike data is stored in ‘bikeList’ array in the App component – Parent component

 

Our next action is to loop though this array element and pass each array element to the bike-list-box component – child component

 

To loop through the array element, we can use the ngFor statement.

 

Open the ‘app.component.html’ file and create a <div> with *ng For statement

*ngFor="let bikeEl of bikeList"

Please refer to the screenshot below.

 

 

Here, the ‘bikeList’ is the array that we have created inside the app.component.ts file.

 

And, bikeEl is the local variable to store each array item.

 

Save all changes and check our application in browser.

 

We will see the screen as in the below screenshot. 

 

 

As we can see, the loop worked 3 times (we have only 3 elements in array) as expected and the child component ‘bike-list-box’ was invoked 3 times.

 

Conclusion

 

In this article, we have created modelclass for bike entity and created an array of type Bike. Then, we created 3 Bike objects and inserted into the array.

 

Then, we accessed the array elements in template file and looped through the array elements.

 

Here, we are using the hard coded data in the array. We will change this to an Angular service soon.

 

In the next article, we will see how to transfer the array element to bike-list-box component from app component. (Parent to Child)

 

Then we will display the details of each array element in bike-list-box component.

 

To read my next article , please click here >> #5 - Angular Component Communication

 

 

Happy Learning!