• About Me
  • Contact Us
  • Privacy Policy
  • Terms and Conditions
  • Advertise / Sponsor

DOTNET DETAIL

Learn Microsoft .NET Technologies

  • Home
  • Tutorials
    • Angular
      • Angular 5
      • Angular 6
    • ASP.NET Core
    • Azure
    • React
    • Vue
  • Books
  • Courses
  • Cloud Hosting
  • Interview Questions
You are here: Home / Angular / How to implement Search Functionality in Angular 6 & ASP.NET Core Application

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

June 13, 2018 by mebakar1005 1 Comment

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.

See also  CQRS and Mediator Patterns in Asp.Net Core 3.1

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.
See also  5 best Angular Datatables with Features

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.

 

How to create CRUD operations using Angular 6 and ASP.NET Core 2.0
How to implement Server-Side filtration in Angular & ASP.NET Core App

Related

Filed Under: Angular, Angular 5, Angular 6, ASP.NET Core Tagged With: ANGULAR, Angular 6 Tutorial, ANGULAR AND .NET CORE, ASP.NET CORE 2.0, Searching Functionality

Comments

  1. kalyani says

    April 9, 2019 at 3:03 pm

    please provide github link to download project

    Reply

Leave a Reply Cancel reply

Your email address will not be published. Required fields are marked *

Buy me a coffeeBuy me a coffee

Jobs

Dotnet Jobs

Join Us

Join Us

Subscribe to Blog via Email

Enter your email address to subscribe.

Recent Posts

  • Top LINQ interview questions and answers.
  • Difference between .NET Core and .NET Framework
  • Top 10 Programming Languages of the Future.
  • Top MVC Interview Questions & Answers
  • 20 best Data Science Books: Beginner to Advanced Level
  • 10 Best Machine Learning Laptops
Copyright © 2022