Introduction
This is the 8th article as part of my 'Let's develop an Angular application' article series. So far, we created an angular application and few components,c reated a model class for our Bike entity, and created an array of hard-coded Bike details. Then, we displayed the bike details in the hard-coded array using ngFor. Also, we have installed and applied a few bootstrap classes to improve the UI and created a navigation bar with dummy menus as well.
Please go through the previous articles to get an overall idea about what we are trying to achieve.
At present, our application UI looks like the below screenshot:
The next work items that we have to implement are listed below:
- Update the model class to add 2 more variables - bike description, and bike image path
- Update the bike-list-box component to display the image of the bike on each tile’s right side
![]()
- Make the bike tile clickable
- On clicking each tile, the bike details should display in bike-details component on the right side of the screen
Let’s do this one by one !
Action Item 1
First, add 2 more properties in the bike model class and update the constructor accordingly.
You can refer to the screenshot below:
Then open the app.component.ts file. There will be some errors.
We need to provide the values for the 2 newly added properties.
I have copied some descriptions from the internet and copied the image URL for our newly added properties.
Our first work item is completed. We have modified our model and updated the bike array in the app component accordingly.
Action Item -2
Our next action item is to display the bike image inside the bike list tile.
To implement this, we have to update the bike-list-box.component.html of the bike-list-box component.
For this, I am using t classes to place the bike details on the left side and bike image right side of the tile box.
Please refer to my changes below:
Here, I have used 2 inner div elements. For one, I used pull-left class and pull-right for the others. Then, we moved old contents into the first div and the image element is added inside the second div. Here, the statement [src]=”bike.imagepath” is called property binding in angular. We can use the interpolation method to do the same. Then the statement will be like below src="{{bike.imagepath}}" To learn more about property binding and string interpolation, visit
here.
Save the file and check the result in the browser. We will see the result, as shown in the below screenshot.
Better than before, right!
The second action item is also completed. Let’s move to the third action item
Action Item -3
Our third action plan is making the bike tile clickable. It is a very simple task.
Just we have to change the <dev> element to <a> element.
Then add a click event listener and the method ‘selectBike()’.
Please refer to the changes in the below screenshot.
If you check the browser, we will see that each tile is clickable now.
Action Item -4
Our 4th action item is to display the full bike details of the selected bike in another component – bike-details component.
First, we can work on the bike-details component.
Open the bike-details.component.html file and add some HTML statements to display the bike details such as bike image in a bigger size, name, company name, description, etc.
You can refer to my HTML template below. I have created 2 rows and displayed the bike image inside the first row and the other bike details are displayed in the second row.
Please save the files and check the application in the browser to see the result.
We will see a screen as shown in the below screenshot:
So the template seems good.
The next step is to pass the bike details from the bike-list component to the bike-details component.
We will implement this in the next article.
Conclusion
In this article, we have added a few changes, like showing the bike image in each tile. Then we created the template to display bike details in a new component when the bike tile is clicked. In the next article, we will pass the bike details from the bike-tile-box component to the bike-details component.
Happy Learning!