How can I pass input values from a form in the parent component to be displayed in the child component using @Input?
Login Form (Parent):
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
</head>
<body>
<div class="form">
<h2 id="registration">Login Form</h2>
<form (ngSubmit)="navToDisplayForm()" #f="ngForm">
<div>
<label for="firstname">First Name</label>
<input type="text" id="firstname" placeholder="Your name.." name="firstname"
[(ngModel)]='userModel.firstnamedetail' required>
<label for="middlename">Middle Name</label>
<br>
<input type="text" id="middlename" placeholder="Your middlename.." name="middlename"
[(ngModel)]='userModel.middlenamedetail' required>
<br>
<label for="lastname">Last Name</label>
<input type="text" id="lastname" placeholder="Your lastname.." name="lastname"
[(ngModel)]='userModel.lastnamedetail' required>
</div>
<br><br>
<button class="btn btn-info" type="submit" routerLink="/userdata" (click)="navToDisplayForm()"
value="Submit" id="btn">Submit</button>
<p>Not Registered? <span>Create Account</span></p>
</form>
</div>
</body>
<app-userdata [childData]="sendToChild"></app-userdata>
</html>
Login Form TS (Parent):
// Angular code here
User Data TS (Child):
// Angular code here
User Data HTML (Child):
<!-- Angular HTML structure -->