I am currently working on an Angular 8 application that involves making API calls. Here is an example:
getDossierEntry(patientUUID: string, type: String = ''): Observable<DossierEntry[]> {
const entryType = type === '' ? 'all' : 'type/' + type;
return this.http.get<DossierEntry[]>(`${this.baseUrl}/${patientUUID}/DossierEntry/` + entryType);
}
In addition, I have a parent component structured like this:
export class DossierCorrespondenceComponent implements OnInit {
correspondenceEntries$: Observable<DossierEntry[]>;
@Input() allCorrespondence: Array<DossierEntry>;
@Input() correspondenceEntries: Array<DossierEntry>;
@Input() attachmentEntries: Array<DossierEntry>;
message = '';
emptyMessageCorrespondentie = 'Geen correspondentie.';
errorMessageConnection = 'Er ging iets mis met de connectie. Probeer over enkele minuten nogmaals.';
correspondenceLoaded = false;
showingSingle = false;
single: DossierEntry;
// Rest of the code for DossierCorrespondenceComponent
}
The HTML template associated with the parent component looks like the following:
<app-vital10-page [noTopBar]="true">
<h2 class="dossier-page-header">Correspondentie</h2>
// Other elements in the template
</app-vital10-page>
// Rest of the HTML code related to the parent component
Subsequently, there is a child component defined as follows:
export class DossierCorrespondenceListComponent implements OnInit {
@Input()
correspondenceEntries: DossierEntry[];
@Input() showingSingle;
constructor() { }
ngOnInit() {
// Initialization logic here
}
}
And the corresponding HTML template for the child component is structured like this:
<div *ngIf="!showingSingle && correspondenceEntries && correspondenceEntries.length > 0;">
<div class="main-row main-row-dossier">
// Additional HTML content for the child component view
</div>
</div>
// Rest of the HTML code specific to the child component
However, despite the correct data being retrieved, the child component data does not appear in the parent component view. This may be due to the usage of observables and subscription methods within the components.
If you are seeking a way to streamline this process without direct subscriptions, consider revisiting the data flow architecture between the parent and child components.
Thank you for your attention.