Angular material搜索栏简介
Angular material为我们提供了各种模块，可以用来建立搜索栏，我们在材料库中没有任何特定的模块，因为搜索栏只不过是在输入文件上加上一些或更多的样式，使其具有吸引力。我们也有自动完成的功能，但这与搜索栏完全不同，因为在搜索栏中我们可以输入任何东西并进行搜索。我们可以使用'input'标签和'mat-icon'来使其更具用户互动性，同时它也很容易使用，如果我们已经有了这两方面的知识，mat-icon就没有必要了，但这将使搜索栏更有意义，在本教程的下一部分，我们将详细了解它的实现和使用，以便更好地理解。
语法
我们知道没有这样的模块，但我们可以利用输入和图标来实现搜索栏，使用材料的默认样式，让我们开始看看下面的基本语法。
<mat-form-field "> <input type="text" matInput placeholder="Search"> </mat-form-field>
正如你所看到的，它很容易实现，我们可以在以后添加我们自己的风格和功能，但现在，这足以让我们对使用材料模块的搜索栏有一个初步的概念，在本教程的下一部分，我们将看一下它的实践例子。
如何在Angular材料中创建一个搜索栏？
正如我们已经知道的，搜索栏可以用来搜索所提供的输入中的任何文本数据字符串，它主要用于搜索列表或包含大量对象的大量列表中的数据，我们已经在各种网站上看到这种搜索栏，它使用户很容易输入一些文本来搜索想要的结果。我们总是有一个与之相关的服务器调用，它使服务器调用并获得数据，使之可用于搜索。所有这些代码都需要写在TS文件上，但在这里我们将主要关注HTML或模板部分，让我们从简单的代码开始。
- mai-icon。我们可以使用材质图标模块，使其对用户更有吸引力，同时也使用户更清楚我们能用它做什么。我们只需在'input'标签上使用这个图标，同时我们也可以应用我们的风格，使其更加方便用户。
例如：:
<mat-icon >search</mat-icon>
正如你所看到的，我们主要使用 "搜索 "图标来表示我们的搜索栏，它是标准的，很好用。
- 输入。这是一个基本的HTML标签，我们可以创建它来接受用户输入他们想要搜索的基本信息，这个字符串可以传递给组件，以便对数据进行排序，并将结果返回到屏幕上。我们可以添加我们的风格，使其更方便用户使用，也可以看到示例代码参考，我们可以使用angular material库创建这个，并添加默认风格，见下文。
例如：:
<mat-form-field c> <input type="tel" matInput placeholder="Search"> </mat-form-field>
正如你所看到的，我们使用了'mat-form-field'，这将有助于我们为内部的HTML标签添加默认样式，在这里我们使用了'input'标签。
现在，让我们开始进行需要采取的步骤，以便初步加强我们的angular material项目，初学者请看下面。
- 首先安装angular CLI，使我们能够下载我们项目所需的包和库。你可以通过在你的命令中输入以下命令来下载它，确保你已经安装了node，见下文。
例如：:
npm install -g @angular/cli)
上述命令将在我们的系统中全局安装CLI，因此我们可以在需要时全局使用它。
- 在这一步中，我们将尝试从头开始创建一个新的angular项目，这个项目将不是一个材料项目，我们必须通过在我们的项目中安装材料依赖来添加。
例如：:
ng new your project name
ng new my-first-project
这个命令将创建一个名为my-first-project的项目，你可以用任何提到的名字创建你的项目。
- 为了确定，请尝试下面提到的一个命令，将所有需要的库安装到我们的项目中。
例如：:
npm install
- 现在你可以通过输入下面提到的简单命令来测试和运行你的项目。这只是为了确保我们在正确的轨道上，我们的项目已经被创建，没有任何错误或错误的地方。
例如：......。
ng serve
- 在浏览器上尝试运行以下URL的应用程序。
例如：......。
默认情况下，angular项目运行在4200端口，如果需要，你可以根据你的需要改变它。
- 现在一切都准备好了，我们有了angular项目，现在我们将通过在命令提示符上运行下面的命令来添加材料库到我们的项目中。
例如：:
ng add @angular/material
Angular材料搜索栏的例子
以下是在Angular材料中创建搜索栏的例子。
1) HTML代码。
<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) 组件代码。
import { Component } from '@angular/core'; @Component({ selector: 'my-demo', templateUrl: './demo.component.html', styleUrls: [ './demo.component.css' ] }) export class DemoSearchBar { search : String =""; }
输出。
结论
你可以在CSS文件中加入你的风格，使搜索栏更具互动性，我们也可以加入服务器调用或预定义调用来搜索。它很容易实现和使用，对HTML文件的改动很小，如果有需求的话，还可以使它得到维护。
推荐文章
这是一个关于Angular材料搜索栏的指南。这里我们讨论了使用angular material创建搜索栏的步骤，它非常简单，可读性强。You may also have a look at the following articles to learn more -
The postAngular material search barappeared first onEDUCBA.
