Angular material search bar

Introduction to Angular material search bar

Angular material provides us various module which can be used together to build the search bar, we do not have any specific module for this in the material library because search bar is nothing but the input file with some or more kind of styling on that to make it attractive. We also have autocompleted but that is quite different from the search bar because with the search bar we can type in anything and search. We can use ‘input’ tag and ‘mat-icon’ to make this more user interactive, also it is very easy to use, if we already have knowledge about both these, mat-icon is not necessary but this will make and add more sense to the search bar, in the coming section of the tutorial we will have detailed look at the implementation and usage of it for better understanding.

Syntax

As we know there is no such module but we can make use of the input and icon to implemented the search bar using material default styling let’s get started with the basic syntax see below;

<mat-form-field ">
<input type="text" matInput placeholder="Search">
</mat-form-field>

As you can see it is easy to implement we can add our own styling and functionality to it later, but for now, it is enough to get the initial idea about the search bar using the material module, in the coming part of the tutorial we will have look at the practice example for it.

How to Create a search bar in Angular material?

As we have already known, a search bar can be used to search any string of text data within the input provided, it is mainly used to search the data from the list or heavy list containing the bulk of objects, we have seen this kind of search bar on various websites which make it easy for the user to type in few texts to search the desired result. We always have a server call associated with it, which makes the server call and get the data and make this available to search from. All this code will be required to write on the TS file, but here we will mainly focus on the HTML or the template part, let’s get started with the simple piece of code;

1) mai-icon: We can use the material icon module to make this more attractive to the user, and also it adds more clarity to the user that what we can do with it. We just have to use this icon with the ‘input’ tag also we can apply our styling to make to more user-friendly.

e.g. :

<mat-icon >search</mat-icon>

As you can see we mainly used the ‘search’ icon to represent our search bar, it is standard and good to have. 2) input: This is the basic HTML tag that we can create to take the user input on which basic they want to search, this string can pass to the component in order to sort the data and return back as the result on screen. We can add our styling to make this more user friendly, also see sample code reference how we can create this using angular material library with default styling added to it see below; e.g. :

<mat-form-field c>
<input type="tel" matInput placeholder="Search">
</mat-form-field>

As you can see we have used ‘mat-form-field’ which will help us to add the default styling to the inner HTML tag that we have used inside it, here we have used ‘input’ tag.

Now let’s get started with the steps that needs to be taken in order to step up our angular material project initially for beginners see below;

1) First install the angular CLI which enables us to download the required packages and library for our project. You can download it by typing the below command on your command make sure you have already installed node see below;

e.g. :

npm install -g @angular/cli)

The above command will install the CLI globally in our system hence we can use it globally when required.

3) Now in this step we will try to create the new angular project from scratch, this project will not be a material project that we have to add later by installing the material dependency inside our project. so just execute the below command on your Command Prompt and press enter see below;

e.g. :

ng new your project name

ng new my-first-project

This command will create the project with the name my-first-project, you can create your project with any name mentioned.

4) Just to make sure try one command which is mentioned below to install all the required library into our project,

e.g. :

npm install

5) Now you can test and run your project by typing the simple command which is mentioned below. This is just to make sure that we are on the right track and our project has been created without any error or bugs inside it.

e.g. :

ng serve

6) go on browser and try to run the application with the below URL :

e.g. :

http://localhps:4200

By default, the angular project runs on port 4200, you can change it as per your need if required.

7) Now everything is set we have our angular project now we will add the material library to our project just by running the below command on the command prompt;

e.g. :

ng add @angular/material

Example of Angular material search bar

Below are the example to create search bar in Angular material:

1) HTML code:

<h5><u><i>Demo to create search bar in Angular material!! </i></u></h5>
<form class="example-form">
<mat-form-field class="example-full-width">
<span matPrefix> </span>
<input type="tel" matInput placeholder="Search" name= "search" [(ngModel)]= "search">
<button matSuffix mat-button><mat-icon >search</mat-icon></button>
</mat-form-field>
<br/>
{{search}}
</form>

2) component code:

import { Component } from '@angular/core';
@Component({
selector: 'my-demo',
templateUrl: './demo.component.html',
styleUrls: [ './demo.component.css' ]
})
export class DemoSearchBar {
search : String ="";
}

Output:

Conclusion

You can make the search bar more interactive with your styling added to the CSS file, also we can add the server call or predefining call to search from. It is easy to implemented and use with very little change on the HTML file, also make it maintainable if requirements come.

Recommended Articles

This is a guide to the Angular material search bar. Here we discuss the steps to create a search bar using angular material, which is very easy, readable. You may also have a look at the following articles to learn more –

1. Angular CLI
2. Angular 7 Features
3. Angular Time Picker
4. Angular 2 Directives