Angular Material Dynamic Suffix Icon Color Change

Photo by Arif Wahid on Unsplash

Scenario

We want to change the search suffix icon color to primary when the #searchInput field is focused.

Approach

Use the focused property of the #searchInput field.

<mat-form-field floatLabel="never">
<input matInput
#searchInput="matInput"
type="text"
placeholder="Search"/>
<mat-icon [color]="searchInput.focused ? 'primary' : ''" matSuffix>search</mat-icon>
</mat-form-field>

Demo

--

--

--

Founder of Firefly Semantics Corporation

Love podcasts or audiobooks? Learn on the go with our new app.

Recommended from Medium

Pure Functions-JavaScript

How to write an Integration test for Node Js Application

How to Static Web ReactJs using Spaces Digitalocean

Configure private NPM package registry using Yarn 2 and Gitlab CI/CD

Photo by <a href=”https://unsplash.com/@markusspiske?utm_source=unsplash&utm_medium=referral&utm_content=creditCopyText">Markus Spiske</a> on <a href=”https://unsplash.com/s/photos/coding?utm_source=unsplash&utm_medium=referral&utm_content=creditCopyText">Unsplash</a>

Compile Time Modification of Angular Component State with Slice

About Framework

Let’s Build a Roguelike with the Random Walk Algorithm

Get the Medium app

A button that says 'Download on the App Store', and if clicked it will lead you to the iOS App store
A button that says 'Get it on, Google Play', and if clicked it will lead you to the Google Play store
Ole Ersoy

Ole Ersoy

Founder of Firefly Semantics Corporation

More from Medium

Pagination with RxJS state, and Route Params

Angular architecture for enterprise applications (Nx+ NgRx + TailwindCss + AngularMaterial)

Troubleshooting Angular routing

criminal girl with Angular logo

Hasura, GraphQL, and Auto Code Generation With Angular