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>