This question may seem simple, but as a newcomer to Angular 2, I often find myself needing more explanation despite the good examples and tutorials available.
Within a component, I have an observable that gets updated periodically. While I've simplified my code here, the key point is the presence of an Observable named product.
@Component({
selector: 'product-profile',
templateUrl: './product-profile.component.html',
styleUrls: ['./product-profile.component.scss']
})
export class ProductProfileComponent {
// Much code has been omitted...
product: Observable<Product>;
constructor(
private store: Store<any>
) {
this.product = this.store
.let(getProductStore)
.let(getProductProfile);
this.product
.select((product: Product) => product && product.id)
.subscribe(productId => this.productId = productId
});
}
// Much code has been omitted...
}
Now, in a Child component that might not be a direct child but nested several levels deep within another component, we have something like this:
@Component({
selector: 'product-footer',
templateUrl: './product-footer.component.html',
styleUrls: ['./product-footer.component.scss']
})
export class ProductFooterComponent {
// This property also relates to the same Observable from the parent component
// When there's a change in the parent component, I want this property below to be updated...
product: Observable<Product>;
constructor(){}
}
Here comes the challenge - How can I update the product property in the Child component when the value of the product property in the parent changes? Should I use @Input()? The indirect relationship between the Parent and Child components makes me uncertain about how to approach this. Could using some form of EventEmitter be a solution? Any advice or relevant resources would be greatly appreciated, as I'm feeling a bit lost with my current resources!