Is there a way to access the public variable offlineArticlesCount from an inner child page within the parent page?
Please note: Each of the 3 components mentioned below has its own set of modules.
myPage.html - Parent Page
<picks *ngFor="let pick of pickData" [data]="pick"></picks>
<p>{{instance.offlineArticlesCount}}</p> //How can I achieve this?
myPage.ts
@ViewChild(DownloadOfflineArticleComponent) instance: DownloadOfflineArticleComponent;
picks.html
<download-offline-article [data]="data" (onDownloadOfflineArticle)="downloadOfflineArticle($event)"></download-offline-article>
download-offline-article.ts - Inner Child Component
export class DownloadOfflineArticleComponent {
offlineArticlesCount: number = 0;
constructor() {}
downloadOfflineArticle() {
this.articleService.downloadOfflineArticle(this.data.id)
.subscribe((res: any) => {
this.onDownloadOfflineArticle.emit(true);
this.localCacheService.clearMyLibraryPageCacheGroup().then(() => {
this.getAllMyPurchasedOfflineArticles().subscribe((res: any) => {
this.offlineArticlesCount = res.count; // This is where the update occurs
},
error => { },
() => { });
});
},
error => { },
() => { });
}
}