המשך תוכנית בסיסית

<div>
  <label>Use Letters</label>
  <input type="checkbox" (change)="onChangeUseLetters()">
</div>

export class AppComponent {
  password: string = '';
  includeLetter: boolean = false;

  onButtonClick(){
    this.password = "My Password";
  }

  onChangeUseLetters(){
    this.includeLetter = !this.includeLetter;
  }
}

<div>
  <label>Enter Length</label>
  <input (input)="onChangeLength(getValue($event))"/>
</div>

length: number = 0;

onChangeLength(value: string){
    const parseValue = parseInt(value);

    if(!isNaN(parseValue)){
      this.length = parseValue;
    }
  }

  getValue(event: Event): string {
    return (event.target as HTMLInputElement).value;
  }

onButtonClick(){
    const numbers = '1234567890';
    const letters = 'abcdefghijklmnopqrstuvwxyz';
    const symbols = '!@#$%^&*()';

    // According to user checkbox, add the chars to include in the password.
    let validChars = '';
    if(this.includeLetters){
      validChars += letters;
    }
    if(this.includeNumbers){
      validChars += numbers;
    }
    if(this.includeSymbols){
      validChars += symbols;
    }

    let generatedPassword = '';
    for(let i = 0; i < this.length; i++){
      // Choose a random index on the chars array
      const index = Math.floor(Math.random() * validChars.length);
      generatedPassword += validChars[index];
    }

    this.password = generatedPassword;
  }

<div>
  <button [disabled]="!(length && (includeLetters || includeNumbers || includeSymbols))"
  (click)="onButtonClick()">Generate</button>
</div>