How can I store something written in an input ?

#angular #help #typescript

How can I store information written in an input and make whatever is written in the input to show in the browser. These are the codes I wrote for the html and the typescript

This is the html code

<form action="">
    <h1>Add User Information</h1>
    <input name="userName" (input)="userDetails()" [(ngModel)]="userName" type="text"><br>
    <input (input)="userDetails()" type="email" [(ngModel)]="email" name="email" placeholder="Email"><br>
    <input (input)="userDetails()" type="text" [(ngModel)]="course" name="course" placeholder="Course"><br>
    <input (input)="userDetails()" type="text" [(ngModel)]="location" name="Location" placeholder="Enter Your Location"><br>
    <button (click)="addUser()">Add User</button>
    <div *ngFor = "let user of allUser">
        <h3>{{user}}</h3>
    </div>
</form>

This is the typescript code

  public userName:string = "";
  public email:string = "";
  public course:string = "";
  public location:string = "";
  public allUser:Array<object> = [{userName: this.userName}, {email: this.email}, {course: this.course}, {location: this.location}];
  userDetails(){
    console.log(this.allUser);
  };
  addUser(){
    this.allUser.push(this.userArray);
    console.log(this.allUser);
  };

I'm new to Angular, so i don't really understand it yet