带有搜索栏的 Angular 创建材质工具栏答案

【问题标题】：Angular create material toolbar with searchbar带有搜索栏的 Angular 创建材质工具栏
【发布时间】：2020-01-30 23:25:20
【问题描述】：

我正在尝试创建一个包含图标的工具栏。单击此图标后，它应该会打开一个搜索栏，请找到随附的两个屏幕截图：

我发现这个漂亮动画的网站是https://material.io/resources/icons/?style=baseline

我已经尝试设置一个普通的工具栏并简单地包含一个输入，但它没有工作。

所以这是我尝试过的代码：

<mat-toolbar color="primary"  >
 <mat-toolbar-row>
  <span>
     <img class="logo" src="../assets/eatsmarticon.png">
  </span>
 <span>
  <p class="toolbarname"> L O C A T I O N S</p>
 </span>
 <mat-form-field class="example-full-width">
  <input matInput placeholder="Favorite food" value="Sushi">
</mat-form-field>
<span class="example-spacer"></span>
<a routerLink="locations">
   <mat-icon class="example-icon" aria-hidden="false" aria-label="Example heart icon">filter</mat-icon>
</a>
</mat-toolbar-row>
</mat-toolbar>

【问题讨论】：

如果你分享你已经尝试过的最小的堆栈闪电，那么帮助更容易

标签： angular angular-material material-design

【解决方案1】：

添加材质图标的结构是<mat-icon class="material-icons">filter</mat-icon>，因此请确保您已经将角度材质库导入到您的应用程序中，并将 MatIconModule 导入到 app.module.ts

【讨论】：