<!--The content below is only a placeholder and can be replaced.-->
<!-- <div style="text-align:center">
<h1>
{{ title }}!
</h1>
</div>
<p>My First Component</p>

<app-product-list></app-product-list> -->



<form>
<label for="firstName">First Name:</label>
<input id="firstName" [(ngModel)]="user.firstName" (input)="onFirstNameChange($event.target.value)" />

<label for="lastName">Last Name:</label>
<input id="lastName" [(ngModel)]="user.lastName" (input)="onLastNameChange($event.target.value)" />

<label for="age">Age:</label>
<input id="age" [(ngModel)]="user.age" (input)="onAgeChange($event.target.value)" />

<label for="gender">Gender:</label>
<select id="gender" [(ngModel)]="user.gender" (change)="onGenderChange($event.target.value)">
<option value="male">Male</option>
<option value="female">Female</option>
<option value="other">Other</option>
</select>

<h4>Preview:</h4>
<p>First Name: {{user.firstName}}</p>
<p>Last Name: {{user.lastName}}</p>
<p>Age: {{user.age}}</p>
<p>Gender: {{user.gender}}</p>
</form>







<router-outlet></router-outlet>