Let's create a scenario where we have two components: login and home. The goal is to capture the value entered in the text box of the login component and pass it to the text box in the home component when the "proceed" button in the login component is clicked. Similarly, we also want to capture the value from the home component's textbox and pass it back to the login component's textbox when the "proceed" button in the home component is clicked. Below is the code snippet for reference:
Login Component - login.component.html
<div>
<p>Parent Component</p>
<input type="text" [(ngModel)]="inptext">
</div><br>
<button (click)="proceed()">Proceed</button>
Login Component - login.component.ts
import { Component, OnInit } from '@angular/core';
import { Router } from '@angular/router';
@Component({
selector: 'app-login',
templateUrl: './login.component.html',
styleUrls: ['./login.component.css']
})
export class LoginComponent implements OnInit {
users:any;
constructor(private router: Router) { }
ngOnInit() {
}
proceed(){
alert(this.inptext);
this.router.navigateByUrl('/home');
}
}
Home Component - home.component.html
<div>
<p>Child Component</p>
<input type="text" [(ngModel)]="inptext">
</div><br>
<button (click)="proceed()">Proceed</button>
Home Component - home.component.ts
import { Component, OnInit } from '@angular/core';
import { Router } from '@angular/router';
@Component({
selector: 'app-home',
templateUrl: './home.component.html',
styleUrls: ['./home.component.css']
})
export class HomeComponent implements OnInit {
getListData: boolean = false;
constructor(private router: Router) { }
ngOnInit() {
}
proceed(){
alert(this.inptext);
this.router.navigateByUrl('/');
}
}