עיצוב מסך בסיסי

npm i bootstrap

npm i font-awesome

"styles": [
    "./node_modules/bootstrap/dist/css/bootstrap.min.css",
    "./node_modules/font-awesome/css/font-awesome.min.css",
    "src/styles.scss"
],

<div class="container p-4 border mt-5">
  <h1>Password Generator</h1>

  <div class="mb-3">
    <label class="form-label">Enter Length</label>
    <input (input)="onChangeLength(getValue($event))" class="form-control"/>
  </div>

  <div class="form-check">
    <input type="checkbox" (change)="onChangeUseLetters()" class="form-check-input" id="changeUseLetters">
    <label class="form-check-label" for="changeUseLetters">Use Letters</label>
  </div>

  <div class="form-check">
    <label class="form-check-label" for="changeUseNumbers">Use Numbers</label>
    <input type="checkbox" (change)="onChangeUseNumbers()" class="form-check-input" id="changeUseNumbers">
  </div>

  <div class="form-check">
    <label class="form-check-label" for="changeUseSymbols">Use Symbols</label>
    <input type="checkbox" (change)="onChangeUseSymbols()" class="form-check-input" id="changeUseSymbols">
  </div>

  <div class="mt-3">
    <button [disabled]="!(length && (includeLetters || includeNumbers || includeSymbols))"
    (click)="onButtonClick()" type="button" class="btn btn-primary">Generate</button>
  </div>

  <div class="mt-3">
    <label class="form-label">Your Password</label>
    <input [value]="password" class="form-control"/>
  </div>
</div>

<div class="mt-3" *ngIf="password">
    <label class="form-label">Your Password</label>
    <input [value]="password" class="form-control"/>
  </div>