@Component({
  selector: 'product-profile',
  templateUrl: './product-profile.component.html',
  styleUrls: ['./product-profile.component.scss']
})
export class ProductProfileComponent {
// I have ommitted so much code here....
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
            });
        }

// I have omitted so much code here....
}

@Component({
  selector: 'product-footer',
  templateUrl: './product-footer.component.html',
  styleUrls: ['./product-footer.component.scss']
})
export class ProductFooterComponent {

// this is the same Observable / property from the parent
// when there is a change in the parent I want to update the property below...
product: Observable<Product>;

constructor(){}
}