Angular - wyświetlenie danych z inputa po kliknięciu przycisku

Witam,

muszę dodać trzy inputy (imię, nazwisko i wiek który ma mieć wczesniej ustaloną wartość)przy użyciu ngModel, wydaje mi się ze dobrze to zrobiłem.
Teraz muszę stworzyc button, po kliknięciu którego wyświetle wszystkie dane poniżej buttona jako listę i drugi button, który wyczyści pola inputa.
Zrobiłem takie coś ale średnio to chyba działa i wygląda, głownie dlatego ze wiek jest od początku widoczny pod buttonem bez klikania na niego.
Dzięki za wszystkie rady

component.ts:

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

@Component({
  selector: 'app-lab3cw2',
  templateUrl: './lab3cw2.component.html',
  styleUrls: ['./lab3cw2.component.scss']
})
export class Lab3cw2Component implements OnInit {
  imie = '';
  nazwisko = '';
  wiek = 22;

  value = '';
  value1 = '';
  value2;
  onEnter(value?: string, value1?: string, value2?: number) { this.value = value; this.value1 = value1; this.value2 = value2 }
  constructor() { }

  ngOnInit(): void {
  }

}

component.html:

<h3>Użycie ngModel</h3>
<p>Imię ucznia to: {{ imie }}</p>
<br>
<p>Nazwisko ucznia to: {{ nazwisko }}</p>
<br>
<p>Wiek ucznia to: {{ wiek }}</p>
<label for="student">imię: </label>
<br>
<label for="student">nazwisko: </label>
<br>
<input [(ngModel)]="imie"> {{ imie }}
<br>
<input [(ngModel)]="nazwisko"> {{ nazwisko }}
<br>
<input [(ngModel)]="wiek"> {{ wiek }}
<br>


 <button type="button" (click)="onEnter(imie, nazwisko, wiek)"> Wyświetl </button>
     <p>{{value}} {{value1}} {{value2}}</p>

Oskar Wołcz napisał(a):

Zrobiłem takie coś ale średnio to chyba działa i wygląda, głownie dlatego ze wiek jest od początku widoczny pod buttonem bez klikania na niego.

Możesz zrobić warunek i wyświetlać imie / nazwisko / wiek, dopiero jak zostaną wypełnione przez użytkownika.

https://angular.io/api/common/NgIf

<div *ngIf="imie">
  <p>Imię ucznia to: {{ imie }}</p>
</div>

@Xarviel: To generalnie sama forma zaimplementowania funkcji tego buttona jest okej?

value = '';
value1 = '';
value2;

onEnter(value?: string, value1?: string, value2?: number) { 
  this.value = value; 
  this.value1 = value1; 
  this.value2 = value2 
}

Nie korzystam na co dzień z Angulara, kojarzę jedynie jakieś podstawy składni, wiec musiałbyś poczekać, aż wypowie się ktoś inny, ale na pewno można popracować nad nazewnictwem.

Jak masz zmienne value, value1, value2 to na pierwszy rzut oka nie wiadomo za co odpowiadają te wartości i do czego one służą.

EDIT:
@Oskar Wołcz:
Możesz jeszcze spróbować dodać jakąś prostą walidacje przy zapisywaniu danych i przy nowych nazwach zmiennych kombinowałbym jakoś w ten sposób.

onEnter(name: string, surname: string, age: number) {
  // Imię musi być wypełnione jakimkolwiek znakiem
  if (name.length) {
    this.name = name; 
  } else {
    this.nameErorrMsg = 'Pole wiek jest wymagane';
  }

  // Nazwisko musi być wypełnione jakimkolwiek znakiem
  if (surname.length) {
    this.surname = surname;
  } else {
    this.surnameErrorMsg = 'Pole nawisko jest wymagane';
  }

  // Wiek musi być równy, lub większy niż 1, oraz równy, lub mniejszy niż 100
  if (age >= 1 && age <= 100) {
    this.age = age;
  } else {
    this.ageErrorMsg = 'Wiek jest nieprawidłowy';
  }
}

Czemu nie zrobisz tego przy użyciu ReactiveForms? Button type submit, podpinasz pod funkcję która pobierze dane i zapisze, a poźniej masz już wiele opcji. Wyświetlasz przez interpolację, poprzez ngIf, poprzez ngModel.