I have in my parents component a list of dates. A button opens a modal with a form that allows me to add a new object to the list. As soon as I clicked the save button, the modal closes. However, my list is not updated. Only when I reload the page the object appears in the list.
How do I make it so that when I click the save button, the list in the parent component is automatically updated?
Of course I have looked at all the tutorials and help pages but they mostly use the Bootstrap modal which I don't use.
My parent component.ts:
import { Component, OnInit } from '@angular/core';
import { lablesHeadlines, lablesConfigAnalytics } from 'src/environments/lables';
import { MapSettingsClientServiceService } from 'src/app/services/map-settings-client-service.service';
import { AnalyticsIndices } from 'src/build/openapi';
import { ActivatedRoute, Router } from '@angular/router';
import { HttpClient} from '@angular/common/http';
import { ModalController } from '@ionic/angular';
import { ModalAnalyticIndicesComponent } from '../../modals/modal-analytic-indices/modal-analytic-indices.component';
import { Subscription } from 'rxjs';
import { ModalAnalyticIndicesPostComponent } from '../../modals/modal-analytic-indices-post/modal-analytic-indices-post.component';
import { switchMap } from 'rxjs/operators';
@Component({
selector: 'app-config-analytics-value',
templateUrl: './config-analytics-value.page.html',
styleUrls: ['./config-analytics-value.page.scss'],
})
export class ConfigAnalyticsValuePage implements OnInit {
headlines = lablesHeadlines;
lablesConfigAnalytics = lablesConfigAnalytics;
analyticsIndicesValue: AnalyticsIndices[];
indexNummer: number;
indexName: string;
analyticsIndices: AnalyticsIndices;
status;
errorMessage;
// eslint-disable-next-line @typescript-eslint/member-ordering
deleteOperationSuccessfulSubscription: Subscription;
constructor(private configClientService: MapSettingsClientServiceService,
private route: ActivatedRoute, private router: Router, private http: HttpClient, private modalCtrl: ModalController) { }
ngOnInit() {
this.route.paramMap.subscribe(params => {
this.indexNummer = parseInt(params.get('indexNummer'), 10);
this.indexName = params.get('indexName');
});
this.configClientService.getAllAnalyticIndicesByIndexNummerAndIndexName(this.indexNummer,this.indexName).subscribe(
(response) => {
this.analyticsIndicesValue = response;
return response;
});
}
openAnalyticIndices(){
this.router.navigate(['/config-analytics']);
}
openSettings(){
this.router.navigate(['/settings']);
}
async openModal(value: any) {
console.log('open modal');
const modal = await this.modalCtrl.create({
component: ModalAnalyticIndicesComponent,
componentProps: {
id: value.id,
indexNummer: value.indexNummer,
indexName: value.indexName,
minVal: value.minVal,
maxVal: value.maxVal,
indexWert: value.indexWert
}
});
await modal.present();
}
async openModalPost() {
console.log('open modal');
const modal = await this.modalCtrl.create({
component: ModalAnalyticIndicesPostComponent,
});
return await modal.present();
}
deleteValue(id: number){
this.deleteOperationSuccessfulSubscription =
this.configClientService.deleteAnalyticIndiceById(id).pipe(
switchMap(async () => this.getNewData())
)
.subscribe(()=> this.getNewData());
}
getNewData(){
this.configClientService.getAllAnalyticIndicesByIndexNummerAndIndexName(this.indexNummer,this.indexName).subscribe(
(response) => {
this.analyticsIndicesValue = response;
return response;
});
}
}
My Modal component.ts
import { Component, Input, OnInit } from '@angular/core';
import { lablesHeadlines } from 'src/environments/lables';
import { MapSettingsClientServiceService } from 'src/app/services/map-settings-client-service.service';
import { AnalyticsIndices } from 'src/build/openapi';
@Component({
selector: 'app-modal-analytic-indices',
templateUrl: './modal-analytic-indices.component.html',
styleUrls: ['./modal-analytic-indices.component.scss'],
})
export class ModalAnalyticIndicesComponent implements OnInit {
headlines = lablesHeadlines;
id;
indexNummer;
indexName;
minVal;
maxVal;
indexWert;
analyticsIndices: AnalyticsIndices;
stringifiedData: any;
// eslint-disable-next-line @typescript-eslint/member-ordering
@Input() inputData: any;
constructor(private configClientService: MapSettingsClientServiceService ) {}
ngOnInit() {
console.log(this.id);
}
onSubmit(data: {id: number; indexNummer: number; indexName: string; indexWert: number; maxVal: number; minVal: number}) {
data.id= this.id;
console.warn(data);
this.stringifiedData = JSON.stringify(data);
this.configClientService.putAnalyticIndiceById(this.id,this.stringifiedData).subscribe((result)=>{
console.warn(result);
});
}
}
My savebutton in my modal.html
<ion-header>
<ion-toolbar>
<ion-title>
Bearbeiten der Indizes
</ion-title>
</ion-toolbar>
</ion-header>
<ion-content>
<form #addAnalyticIndicesForm="ngForm" (ngSubmit)="onSubmit(addAnalyticIndicesForm.value)">
<ion-list>
<ion-item>
<ion-col size="3">
<ion-label>IndexNummer:</ion-label>
</ion-col>
<ion-col size="4">
<ion-input name="indexNummer" type="number" ngModel placeholder={{indexNummer}}></ion-input>
</ion-col>
</ion-item>
<ion-item>
<ion-col size="3">
<ion-label>IndexName:</ion-label>
</ion-col>
<ion-col size="9">
<ion-input name="indexName" type="text" ngModel placeholder={{indexName}}></ion-input>
</ion-col>
</ion-item>
<ion-item>
<ion-col size="3">
<ion-label>MinVal:</ion-label>
</ion-col>
<ion-col size="4">
<ion-input name="minVal" type="number" ngModel placeholder={{minVal}}></ion-input>
</ion-col>
</ion-item>
<ion-item>
<ion-col size="3">
<ion-label>MaxVal:</ion-label>
</ion-col>
<ion-col size="4">
<ion-input name="maxVal" type="number" ngModel placeholder={{maxVal}}></ion-input>
</ion-col>
</ion-item>
<ion-item>
<ion-col size="3">
<ion-label>IndexWert:</ion-label>
</ion-col>
<ion-col size="4">
<ion-input name="indexWert" type="number" ngModel placeholder={{indexWert}}></ion-input>
</ion-col>
</ion-item>
</ion-list>
<ion-button type="submit" expand="block" (click)="modal.dismiss()">Save</ion-button>
</form>
<ion-button expand="block" color="danger" (click)="modal.dismiss()">Cancel</ion-button>
</ion-content>
