Angular Material component is not looking like it should be

Question

I'm using Angular Material components in my web application. But the thing is everything is working fine but The components are not displaying as they should be looking. I'm doing it for the first time so I'm just copy-pasting stuff to get the idea of how this library works. But I am stuck here.

Here is the screenshot of the original one:

And the component that my browser is rendering:

There is no label, nor any CSS.

My files contents are below:

app.modules.ts:

import { NgModule } from '@angular/core';
import { BrowserModule } from '@angular/platform-browser';
import { FormsModule } from '@angular/forms';
import { HttpClientModule } from '@angular/common/http';
import { MaterialModule } from './material/material.module';
import { MatFormFieldModule} from '@angular/material/form-field';
import { ReactiveFormsModule } from '@angular/forms';
import { AppComponent } from './app.component';
import { HomeComponent } from './components/home/home.component';
import { DashboardComponent } from './components/dashboard/dashboard.component';
import { BrowserAnimationsModule } from '@angular/platform-browser/animations';


@NgModule({
  declarations: [AppComponent, HomeComponent, DashboardComponent],

  imports: [
    BrowserModule,
    FormsModule,
    HttpClientModule,
    MaterialModule,
    BrowserAnimationsModule,
    MatFormFieldModule,
    ReactiveFormsModule,
  
  ],

  providers: [],

  bootstrap: [AppComponent],
})
export class AppModule {}

login.component.html:

  <form class="example-form">
    <mat-form-field class="example-full-width" appearance="fill">
      <mat-label>Email</mat-label>
      <input type="email" matInput [formControl]="emailFormControl" placeholder="Ex. [email protected]">
      <mat-error *ngIf="emailFormControl.hasError('email') && !emailFormControl.hasError('required')">
        Please enter a valid email address
      </mat-error>
      <mat-error *ngIf="emailFormControl.hasError('required')">
        Email is <strong>required</strong>
      </mat-error>
    </mat-form-field>
  </form>
    <div class="example-container  fs-1">
      <mat-form-field appearance="fill">
        <mat-label>Enter your password</mat-label>
        <input matInput placeholder="Password" [type]="hide ? 'password' : 'text'" class="border">
        <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>
      <section>
        <div class="example-button-row">
          <a mat-raised-button color="accent" href="#" target="_blank">Login</a>
        </div>
      </section>
  </div> 

login.component.ts:

import { Component, OnInit } from '@angular/core';
import {FormControl, Validators} from '@angular/forms';

@Component({
  selector: 'app-dashboard',
  templateUrl: './dashboard.component.html',
  styleUrls: ['./dashboard.component.css']
})
export class DashboardComponent implements OnInit {
  email = new FormControl('', [Validators.required, Validators.email]);
  hide = true;
  emailFormControl = new FormControl('', [Validators.required, Validators.email]);
  constructor() { }

  ngOnInit(): void {
  }

} 

login.component.css

    min-width: 150px;
    max-width: 500px;
    width: 100%;
  }
  
  .example-full-width {
    width: 100%;
  }
.example-container .mat-form-field + .mat-form-field {
    margin-left: 8px;
  }
  .example-right-align {
    text-align: right;
  }
  
  input.example-right-align::-webkit-outer-spin-button,
  input.example-right-align::-webkit-inner-spin-button {
    display: none;
  }
  
  input.example-right-align {
    -moz-appearance: textfield;
  }