CODEWITHSUNDEEP
angularangular-materialmaterial-design
Silas
Silas

Reputation: 171

Angular create material toolbar with searchbar

i'm trying to create a toolbar which includes a icon. After this icon was clicked it should open a searchbar please find both screenshots attached:

normal state

after search was clicked

The website i have found this nice animation was https://material.io/resources/icons/?style=baseline

I tried already to setup a normal toolbar and simply include a input but it didnt work.

So here is the code i have tried:

<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>

Upvotes: 2

Views: 6502

Answers (1)

beanic
beanic

Reputation: 564

The structure for add a material icon is <mat-icon class="material-icons">filter</mat-icon> so be sure that you already have imported the angular material library to your app and the MatIconModule to app.module.ts

Upvotes: 2

Related Questions