Remove label from material input on focus and when leave focus

I am using angular material input with placeholder. When I focus on field I remove placeholder, but if I leave focus and field is empty I see transform animation, that I want to remove too. in this image placeholder that has to be when field is empty.



And in this image I leave focus:



<mat-form-field class="al-subscribe-form-field">
<input formControlName="email" matInput type="email">
<mat-placeholder class="al-placeholder">{{'SHARED.ENTER_YOUR_EMAIL' | translate}}</mat-placeholder>
</mat-form-field>

.mat-focused .al-placeholder, .mat-form-field-invalid .al-placeholder {
display: none!important;
}

Continue reading...