I created a login page using Angular Material, but I'm facing some issues. The problem is that when I set the style overflow: hidden, the show password button stops working. Additionally, if I click the button twice, the webpage refreshes, which shouldn't happen. As a beginner in Angular and flexbox, I would really appreciate it if someone could help me understand and resolve this issue. Thank you.
Here is my template:
<mat-card>
<mat-card-title>Login</mat-card-title>
<mat-card-content>
<form>
<p class="spacer"></p>
<p>
<mat-form-field appearance="fill">
<mat-label>Enter your username</mat-label>
<input matInput type="text">
</mat-form-field>
</p>
<p>
<mat-form-field appearance="fill">
<mat-label>Enter your password</mat-label>
<input matInput [type]="hide ? 'password' : 'text'">
<button mat-icon-button matSuffix (click)="hide = !hide" [attr.aria-label]="'Hide password'"
[attr.aria-pressed]="hide">
<mat-icon>{{hide ? 'visibility_off' : 'visibility'}}</mat-icon>
</button>
</mat-form-field>
</p>
<div class="button">
<button type="submit" mat-button>Login</button>
</div>
</form>
</mat-card-content>
</mat-card>
My stylesheet:
:host {
display: flex;
align-items: flex-center; /*This style isn't work*/
overflow: hidden;/*This also*/
justify-content: center;
margin: 100px 0;
}
.mat-form-field {
width: 100%;
min-width: 300px;
}
mat-card-title,
mat-card-content {
display: flex;
justify-content: center;
}
.button {
display: flex;
justify-content: flex-end;
}
.spacer{
height: 25px;
}
app.module.ts
import { NgModule } from '@angular/core';
import { BrowserModule } from '@angular/platform-browser';
// Remaining content unchanged...
package.json
{
// Content of package.json remains unchanged...
}
To see how it should look, check out this screenshot: