cant disappear placeholder after focus on it - angular5

Question

Here I am using the angular material form for login form using Angular5. when the applications starts, the login form placeholder couldn't be over-written. But once one I logged in and logged out, then only the input fields would be over written. Screenshot
<form [formGroup]="loginform" class="login-form">
<mat-icon style="font-size: 30px ">account_circle</mat-icon>
<mat-form-field class="example-full-width">
<input matInput placeholder="Username" formControlName="userName">
</mat-form-field>
<br>
<mat-icon style="font-size: 30px">lock_open</mat-icon>
<mat-form-field>
<input matInput placeholder="Enter your password" [type]="hide ? 'password' : 'text'" formControlName="password">
<mat-icon matSuffix (click)="hide = !hide">{{!hide ? 'visibility' : 'visibility_off' }}</mat-icon>
</mat-form-field>
<button mat-raised-button color="primary" [disabled]="!loginform.valid" (click)="clicklogin();loginform.reset()">Login</button>
<button mat-raised-button color="primary">cancel</button>
</form>
CSS File
.login-form{
top: 35%;
border: 1px;
border-style: double;
position: absolute;
width: 30%;
border-radius: 5px;
padding: 20px;
left: 30%;
}
mat-form-field{
width: 80%;
}
button{
text-align: center;
margin-left :17%;
}
mat-icon{
float: left;
line-height: 2;
margin-right: 10px;
}

Answer 1

You can use mat-placeholder and handle visibility easily by CSS
styles:
.placeholder.hide-ph {
display: none;
}
component.ts:
<input
...
[value]="value"
floatPlaceholder="never"
(focus)="hidePlaceholder = true" // <== you need this
/>
<mat-icon class="caret" matSuffix>arrow_drop_down</mat-icon>
<mat-placeholder
class="placeholder"
[class.hide-ph]="!!value || hidePlaceholder" // <== and this to hide placeholder by css
>
{{ placeholder }}
</mat-placeholder>

Answer 2

Its working fine for me.
.login-form{
top: 35%;
border: 1px;
border-style: double;
position: absolute;
width: 30%;
border-radius: 5px;
padding: 20px;
left: 30%;
}
mat-form-field{
width: 80%;
}
button{
text-align: center;
margin-left :17%;
}
mat-icon{
float: left;
line-height: 2;
margin-right: 10px;
}
<form [formGroup]="loginform" class="login-form">
<mat-icon style="font-size: 30px ">account_circle</mat-icon>
<mat-form-field class="example-full-width">
<input matInput placeholder="Username" formControlName="userName">
</mat-form-field>
<br>
<mat-icon style="font-size: 30px">lock_open</mat-icon>
<mat-form-field>
<input matInput placeholder="Enter your password" [type]="hide ? 'password' : 'text'" formControlName="password">
<mat-icon matSuffix (click)="hide = !hide"></mat-icon>
</mat-form-field>
<button mat-raised-button color="primary" [disabled]="!loginform.valid" (click)="clicklogin();loginform.reset()">Login</button>
<button mat-raised-button color="primary">cancel</button>
</form>