*****************************************************************************************************
app.component.ts
*****************************************************************************************************

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

@Component({
  selector: 'my-app',
  templateUrl: './app.component.html',
  styleUrls: [ './app.component.css' ]
})
export class AppComponent implements OnInit{

  versuche:number = 0;
  geheimZahl:number = 0;
  ergebnis:string = "";
  fertig:Boolean = false;

  ngOnInit(): void {
    this.NeueZahl()
  }

  OnTipClick():void{

    this.versuche += 1;

    const value = (<HTMLInputElement>document.getElementById("zahl")).value;
    const tip: number =+ value;

    if(this.geheimZahl === tip){
      this.ergebnis = `Bravo, du hast die Zahl '${this.geheimZahl}' erraten. Du bauchtest ${this.versuche} Versuche.`;
      this.versuche = 0;
      this.fertig = true;
    }
    else if (this.geheimZahl > tip) {
      this.ergebnis=`${tip} ist leider falsch. Die Zahl ist grösser. Versuche es erneut.`
    } else {
      this.ergebnis=`${tip} ist leider falsch. Die Zahl ist kleiner. Versuche es erneut.`
    }
    (<HTMLInputElement>document.getElementById("zahl")).select();
  }

  NeueZahl():void{
    this.ergebnis = "";
    this.fertig = false;
    this.versuche = 0;
    this.geheimZahl = Math.floor(Math.random()*100)+1;
    console.warn(this.geheimZahl);
  }

  OnNochmalsClick():void {
    this.NeueZahl();
  }

}



*****************************************************************************************************
app.component.html
*****************************************************************************************************

<h1>Rate mal!</h1>

<div *ngIf="!fertig">
  <p>Hallo, ich habe mir ein Zahl zwischen 1 und 100 ausgedacht. Deine Aufgabe ist nun sie zu erraten.</p>
  <input id="zahl">
  <button id="btn" (click)="OnTipClick()">Prüfe</button>
</div>

<p>{{ergebnis}}</p>

<div *ngIf="fertig">
  <button (click)="OnNochmalsClick()">Nochmals spielen?</button>
</div>




*****************************************************************************************************
app.component.css
*****************************************************************************************************

* {
  font-family: 'Open Sans', Helvetica, sans-serif;
  text-align: center;
}

h1 {
  color: orange;
}

button {
  color: white;
  background-color: orange;
  padding: 12px 28px;
  border-radius: 12px;
  transition-duration: 0.4s;
  font-size: larger;
}

button:hover {
  background-color: white;
  color: orange;
}

input {
  padding: 12px;
  margin-right: 16px;
}