How to implement Search Functionality in Angular 6 & ASP.NET Core Application

Build an app with ASPNET Core and Angular from scratch

In this tutorial, we will see how to implement the search functionality using Angular 6 and ASP.NET Core 2.0 Application. This is very important concept because almost every application needs search functionality where a user can simply get a specific record. So, in this tutorial, we will learn it and will see how easy to implement in Angular 6 and ASP.NET Core application.

Note: – In the previous tutorial of Angular 6 and ASP.NET Core tutorial series, we have created an application which performs CRUD operations. So, we are not going to create another project for this tutorial, we will implement the search functionality in that project which we have created in the previous tutorial. So, if you want to learn how to create a project or how to implement CRUD operations in Angular 2 and ASP.NET Core, then click here.

• How to set up a project using Angular 6 and ASP.NET Core
• Create CRUD Operation using Angular 6 and ASP.NET Core

Search Functionality in Angular 6 and ASP.NET Core 2.0 Web Applications.

So, let’s start to learn how to implement search functionality in Angular 6 and ASP.NET Core application.

There are two types of filtering or searching techniques. The first one is Client-Side filtering and the second one is Server-Side filtering. We will implement Client-Side filtering in this tutorial.

How to implement Client-side filtering

Whenever we have a small set of records like a few hundred or less than thousands, so then we go for Client-Side filtering. In this filtering, there is no need to get data from server side.

Let’s see how to implement Client-Side filtering.

Step # 1 => Add front-end Code.

Go to project folder structure => open “ClientApp” folder => open “app” folder => then open “components” folder => then “bookstore-list” folder => and finally open the “bookstore-list.component.html” file that is the responsible for front-end code.

Now, add the code as you see in below file from line # 8 to 17.

Let’s understand the above code.

Line # 8: Here in this line we are using a bootstrap class “well”.

Line # 11: Here we are using [(ngModel)]=”filter.id” and (change)=”onChange()”.

• ngModel directive is used to bind the filter object.
• (change): This is a change event. Whenever user will change the value of drop down, then this event will be called and the values of the table will also be changed.

Line # 13: Here we are using *ngFor. This is used to display all the records.

Line # 16: Here we are just using a click event which will call when the user needs to reset the records.

Step # 2 => Add Component Code.

In this step, we will add the component code. So, open the bookstore-list.component.ts file and then add the code as you see in the below file.

Let’s understand the above code.

Line # 12, 13, 14: Here in this line we are declaring objects.

Line # 21, 22: Here in this line we are getting the record from the database which will show in the dropdown list.

Line # 25: Here in this line we are adding one more field “this.allBooks”. Here in this field, we are storing all the records of the bookstore. The other one field is bookstores.

Line # 28 to 34: When user will change the record from the drop-down, then this function will be triggered.

• Line # 29: In this line, this.allBooks will initialize the books variable.
• Line # 30: This line will check if the filter.is has value or not.
• Line # 31: This line will compare all the record with the filter.id and then initialize the books variable with the specific record.
• Line # 33: Then the books variable will pass the record to this.bookstores.

Line # 36 to 39: When user will click the reset button then this function will be called. This function initializes the filter as an empty object and then call the onChange function.

Run your project

Now, run your project and you will see the output page as you see in below screenshot.