Let's Develop an Angular Application - Display the Bike Details in Bike-details Component

Introduction 

 

This article explains how to pass data from one component to another by clicking the component. Here, we will see the use of a custom event binding in Angular. So far, we have created an angular application and a few components, created a model class for our Bike entity, and created an array of hardcoded Bike details. Then, we have displayed the bike details in the hardcoded array using ngFor. Also, we have installed and applied a few bootstrap classes to improve the UI. We created a navigation bar with dummy menus as well.

 

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

Please go through the previous articles to get an overall idea about what we are trying to achieve. 

 

To read my previous article, click here >>  #8 - Create detailed view component template for Bikes

At present, our application UI looks like the below screenshot:

 

 

 

 

Our next action item is to pass the bike details from the bike-list component to the bike-details component. We need to fill the empty bike details template in the above screenshot with correct data from the bike tile component. To accomplish this, we need to do the following activities:

• Create a custom event to emit the selected bike details in the bike-list-box component.

Let’s create the custom event.

 

Open the bike-list-box.component.ts file

 

For this, we can use @Output() decorator and EventEmitter class .

 

Let’s provide the name of the event as ‘selectedBike’.

 

The below statement is used to create the event.

 

@Output() selectedBike=new EventEmitter<void>();

 

We should import the EventEmitter, Output class from @angular/core

 

Next, we have to create a method to emit/trigger our custom event when we click the bike box/tile.

 

Let’s name the method ‘selectBike’.

selectBike()
{
   this.selectedBike.emit();
}

Please refer the screenshot below to see the new changes in the files:

 

 

Next, we need to execute the method selectBike() when we click the bike tile/box. So, add a click listener for bike-list-box.

 

Open the bike-list-box.component.html file.

 

Add a click event listener and call the method selectBike(), as shown below:

 

 

So far we have created the custom event and it will emit when we click each bike tile.

• Next, on clicking each bike tile, we need to pass the selected bike details to the app component.

For this, we need to create a new variable to assign the selected bike in-app component.

 

Open the app.component.ts file.

 

Declare a variable selectedBike of type Bike

 

selected Bike: Bike;

 

Please refer to the screenshot to see the new addition:

 

 

Next, we have to assign this variable with the selected bike object.

 

Open the file app.component.html

 

Here, we are using event binding to pass the data to the app component.

 

For more reading >> https://angular.io/guide/user-input

 

Please refer to the screenshot to see the new changes:

 

 

On the above screenshot, the selectedBike is the custom event created for the bike-list-box component.

 

When this event triggers, the method sendDetails() method in the app component will be executed.

 

We are passing the selected bike object as a method argument.

 

By using this method, we are assigning the selected bike object to the app component variable selectedBike which created a 2^nd step.

 

Create the method sendDetails() in app.component.ts

 

Create the method and assign the selected bike object to the app component variable selectedBike.

 

Please refer the screenshot to see the new changes in the app.component.ts file.

 

 

Pass the selected bike data to bike-details component from the app component.

 

We can use the *ngIf statement that can be used to check whether any bike is selected or not.

 

If selected, we need to display the details in the bike-details component.

 

If none of the bikes are selected, we need to display another template: <ng-template>

 

We use <ng-template> with angular *ngIf directive to display else template.

 

Please refer to the screenshot to see the new changes:

 

 

Here, we are checking whether the selectdBike variable has any valid data, if yes, that value will be assigned to the ‘selected ‘property of the bike-details component.

 

We need to have a property ‘selected’ inside bike-details.component.ts file. We will do that soon.

 

If none of the bikes are selected, the ELSE part will be executed and ng-template with name ‘no_bike_selected’ will be invoked.

 

You can read more about ng-template here >> https://www.angularjswiki.com/angular/what-is-ng-template-in-angular/

 

Create a property ‘selected’ in bike-details.component.ts

 

Since we are assigning the data from outside the component, we should use the @Input decorator.

 

 

Then we need to update the bike-details.component.html file to display the contents of the selected bike details assigned in the ‘selected’ property.

 

 

Here we are using the string interpolation and property binding to display the details of the selected bike.

 

Success!!

 

Everything is completed. Save the changes and check the browser to see the final output.

 

We will see the final result, as shown in the below screenshot:

 

 

 

Conclusion

 

Finally, we have completed the first set of requirements.

 

Let's go over the main activities we accomplished so far:

• Creation of a new Angular project
• Creation of components
• Installation and use of Bootstrap library
• Communication between components
• Use of property binding, event binding, and string interpolation 
• Use of ngIf and ngFor 

From these 9 articles, you will get a basic idea about the basic structure and usage of Angular framework.

 

In the next article, we will see the implementation services.

 

 To read my next  article, please click here >> #10 - Create An Angular Service To Access The Bike Details

 

Happy learning