What is the process for integrating a dynamic search bar onto an Angular table?

I have a table and I want to add a search box above the table that dynamically searches through the data and filters it to make it easier for users to find what they are looking for.

Here is the code for my table:

<mat-card class="fields-list" *ngIf="tableShown">
      <mat-card-content>
        <mat-card-actions align="end">
          <button type="button" class="topia-btn topia-primary-btn action-buttons" (click)="addClicked()">
            Add New Office
          </button>
        </mat-card-actions>
        <mat-table #table [dataSource]="officePinList">
          <ng-container cdkColumnDef="label">
            <mat-header-cell *cdkHeaderCellDef fxFlex="20%">Label</mat-header-cell>
            <mat-cell *cdkCellDef="let officePin" fxFlex="20%">{{officePin.label}}</mat-cell>
          </ng-container>

          <ng-container cdkColumnDef="postalAddress">
            <mat-header-cell *cdkHeaderCellDef fxFlex="55%">Postal Adress</mat-header-cell>
            <mat-cell *cdkCellDef="let officePin" fxFlex="55%">{{officePin.postalAddress}}</mat-cell>
          </ng-container>

          <ng-container cdkColumnDef="trash-icon">
            <mat-header-cell *cdkHeaderCellDef fxFlex="15%"></mat-header-cell>
            <mat-cell *cdkCellDef="let officePin" fxFlex="15%">
              <mat-icon (click)="deleteGroupOffices(officePin.id)" mat-list-icon matTooltip="Delete" class="icon">
                delete_forever
              </mat-icon>
              <mat-icon (click)="editField(officePin.id)" mat-list-icon matTooltip="Edit" class="icon">edit</mat-icon>
            </mat-cell>
          </ng-container>

          <mat-header-row *cdkHeaderRowDef="displayedColumns"></mat-header-row>
          <mat-row class="table-row" *cdkRowDef="let officePin; columns: displayedColumns;"></mat-row>

        </mat-table>

The data source for my table is officePinList

Is there a way to implement a search filter similar to this example on my table:

javascripthtmlcssangulartypescript

Answer №1

To easily implement a search feature, just insert an input box for searching:

HTML

<mat-form-field>
  <input matInput (keyup)="applySearchFilter($event.target.value)" placeholder="Search">
</mat-form-field>

Next, you'll need to create a method that applies the filter to your data source:

TypeScript

applySearchFilter(searchValue: string) {
  this.officeList.filter = searchValue.trim().toLowerCase();
}

Hopefully, this explanation is useful to you.

Similar questions

If you have not found the answer to your question or you are interested in this topic, then look at other similar questions below or use the search

DivIcon containing a Leaflet Angular component

Currently, DivIcon is being used with a html string parameter to render different information fetched from an API every 3 seconds. However, as more styles and information need to be added, the concatenation of strings has become quite large and difficult t ...

angularleaflet

Deactivating attribute inheritance / configuring component settings with script setup and Typescript

Is there a way to disable attribute inheritance for a component's options when using script setup syntax with Typescript in Vue 3? Here is the JavaScript code example: app.component('date-picker', { inheritAttrs: false, // [..] }) How ...

typescriptvue.jsvue-componentvuejs3vue-script-setup

Evaluating the criteria and presenting two distinct notifications with setCustomValidity

When validating text fields in an HTML form, I am looking to check two conditions. Currently, the code below checks if the phone number entered is in the correct format and displays a message 'Enter a valid mobile number' if it is incorrect using ...

javascripthtml

Embedding one embed on top of another using wmode set to direct positioning

I'm struggling to place a flash banner above a gpu accelerated video player. I vaguely recall reading about the importance of wmode direct, but can't remember why it's crucial. Is there a way to position the banner over it without being abl ...

htmlcssflash

Ways to retrieve the page name where the script originates from

I have a function that is triggered from three different pages. Each page involves adding an attribute to a specific div. For instance: <div id="posts" page="home"></div> <div id="posts" page="feed"></div> <div id="posts" page= ...

phpjavascriptjqueryajax

Extract and loop through JSON data containing various headers

Having no issues iterating through a simple JSON loop, however, the API I am currently utilizing returns a response with multiple headers. Despite my efforts in various methods to access the results objects, I still face some challenges. The response struc ...

javascriptjqueryjson

Transfer the data from one object to another while disregarding any additional properties

I am dealing with 2 objects: person{ name : string gender : string } woman{ name : string } The challenge I face is that I have an object "person" filled with values, and I need to copy those values into a new object "woman" without including the "ge ...

javascriptjqueryangularjstypescript

Angular 2: How to Reset Dropdown Selection

I'm trying to clear the selected value of a select input, but even when I set valueS = null, the Select still shows the last selected value. How can I make sure that the selected value is cleared when clicking on the button? <select (ngModelC ...

angularselect

What is the best way to determine if a received object (from an HTTP request) is missing a specific array in React JS?

When I retrieve an object (containing a text value and several arrays) from an API, I assign them to local variables for usage. Everything is functioning properly except when the fetched object does not contain one of the arrays and I attempt to utilize ...

javascriptreactjsarraysapierror-handling

Does PHP/AJAX only function when an output is generated?

I am attempting to fetch the Wordpress blog header into a php file in order to use it for an AJAX call function. define('WP_USE_THEMES',false); echo 'Something'; require(explode("wp-content",realpath(dirname(__FILE__)))[0].'wp-b ...

javascriptphpajaxwordpress

Responsive Bootstrap column with a fixed-width card

My Bootstrap-card is currently not adjusting its width properly. I want the card to occupy the full width of the column it's in. Below is a snippet of my code and a screenshot showing the current width along with the desired width indicated by a blue ...

cssbootstrap-4bootstrap-cards

What is the process for incorporating styles into an external widget?

I am currently navigating my way through NextJS and attempting to incorporate a bespoke stylesheet into my code using a third-party widget. Unfortunately, I have hit a roadblock in this process. The names I have assigned to the style sheet align with what ...

cssreactjsnext.js

Unable to access a file located in the views folder through the Express route

I'm new to programming and struggling with getting the recipe.ejs file to display. I can't seem to create a proper route from recipe.js to render the file. Any assistance would be greatly appreciated. /routes/recipe.js var express = require( ...

javascripthtmlnode.jsexpressejs

I am looking to incorporate two interceptors within the Angular application - one dedicated to user authentication and another specifically for admin authentication

I am trying to differentiate between user requests and admin requests in my app. The goal is to have user requests pass through the UserAuthInterceptor, while admin requests go through the AdminAuthInterceptor. How can I separate these interceptors within ...

angular

Is there a way to shade the entire webpage background in HTML?

Instead of affecting other DOM classes, I tried using another div but it doesn't darken the whole page. This means I have to manually modify each DOM class. Is there a way to overlay the entire document with a semi-transparent gray plane? ...

javascripthtml

How do I transform the date "Tue Nov 26 2019 16:00:00 GMT-0800" into the .NET JSON date format "/Date(1574812800000)/"?

I am looking to convert a date from ISO format to .NET JSON date format using JavaScript. For example, I want to change "Tue Nov 26 2019 16:00:00 GMT-0800" to "/Date(1574812800000)/". ...

javascriptjquerydatetime

Tips for choosing an <li> element with JavaScript

<style> .sys_spec_text{} .sys_spec_text li{ float:left; height:28px; position:relative; margin:2px 6px 2px 0; outline:none;} .sys_spec_text li a{ color: #db0401; height:24px; padding:1px 6px; border:1px solid #ccc; background:#fff; dis ...

javascriptjqueryhtmlcss

Error: Attempting to split an undefined property (function without a name)

Trying to troubleshoot an error after moving a form that was functioning correctly on the index page to the post page. Unfortunately, simply relocating the form has resulted in an error: Uncaught TypeError: Cannot read property 'split' of undefin ...

javascriptjquerypythondjango

Having trouble getting Material Design Lite to function properly on my site

I'm having trouble with my HTML template that incorporates Google Material Design Lite. The header is working fine, but anything I add below it just moves to the top. Can someone take a look at the code and offer some assistance? .demo-layout-trans ...

htmlcssmaterial-designmaterial-design-lite

What is the reason behind the input value becoming empty after a reset?

Currently, I am working with an input element reference: @ViewChild("inputSearch", { static: false }) This is how the template looks like: <input tabindex="0" type="text" (keydown)="keydownInputSearch($event)" #inputSearch autocomplete="off" ...

angularangular6angular8