I am currently facing a scenario where I have a component being loaded via routing, and my goal is to pass data from the parent component into this child component. How exactly can I achieve this task effectively?
Parent Component Class
export class HomeComponent{
userName: string;
userId: string;
ngOnInit(): void{
this.userName = "user name";
this.userId = "user id";
}
}
Parent Component Template
<div>
<p>Parent Component</p>
</div>
<router-outlet></router-outlet>
Child Component Class
export class ChildComponent{
userName: string;
userId: string;
}
In essence, the home component has specific child routes that are confined within its scope. Although the child component loads automatically alongside the parent component, my main objective is to utilize the data stored in the parent component within the child component seamlessly. I want to ensure that my application is structurally sound and functioning as intended.