Within the context of my application, there exists a parent component named app-parent and a child component called app-child. In app-parent, I retrieve data from a DataService.
@Component({
selector: 'app-parent',
providers: [DataService]
})
export class Part1Component implements OnInit {
public title: string;
constructor(public dataService: DataService) {}
ngOnInit() {
this.dataService.get().subscribe(data => {
this.itemsSource = this.dataService.convert(data, 1);
this.title = this.itemsSource[0];
});
return this.title;
}
The template is as follows:
<div id="content">Hello!</div>
<app-child [title]='title'></app-child>
I want to pass the title to the child component. The code in my child component looks like this:
@Injectable()
export class InfoComponent implements OnInit, OnDestroy {
@Input() title: any;
ngOnInit() {
console.log('Displaying title')
console.log(this.title);
}
While attempting to use @Input() to pass the data, it doesn't work as expected (I receive undefined instead of the title). This issue arises because in the parent component, the data from DataService is obtained first (setting the title explicitly at the start, e.g., in app-parent, works successfully).
Can you please provide guidance on resolving this problem?