I have a modal window that contains a form to create new records. The desired functionality is as follows: when the user clicks on the create modal button, the window should close instantly, the newly created record should appear in the table, and a success message should be displayed indicating that the record was successfully created. However, currently only the modal window closure works correctly. To view the new record, the page needs to be manually refreshed, and the success message is not showing at all.
How can this issue be resolved?
import { Component, OnInit, Input, ViewContainerRef, TemplateRef } from '@angular/core';
import { DialogRef, ModalComponent } from 'angular2-modal';
import { Post } from '../../../../../models/post.model';
import { PostService} from '../../../../../services/post/post.service';
import { BSModalContext } from 'angular2-modal/plugins/bootstrap';
import { ToastsManager } from "ng2-toastr";
import { Angular2TokenService } from "angular2-token";
import { Observable } from 'rxjs/Rx';
@Component({
selector: 'app-add-post',
templateUrl: './add-post.component.html',
styleUrls: ['./add-post.component.css'],
providers: [PostService]
})
export class AddPostComponent implements OnInit, ModalComponent<any> {
post = new Post;
posts: Array<Post>;
constructor(
public dialog: DialogRef<any>,
public authTokenService: Angular2TokenService,
private servPost: Post,
public toastManager: ToastsManager,
vcr: ViewContainerRef
) {
toastManager.setRootViewContainerRef(vcr);
}
ngOnInit() {
}
savePost() {
this.servPost.createPost(this.post).subscribe
(success => {
this.toastManager.success('Data successfully created!', 'Done');
this.servPost.getPosts().subscribe(posts => {
console.log(posts);
this.posts = posts;
});
}, error => {
this.toastManager.error(getErrorTextFromJSON(error.json()), 'Error');
});
this.dialog.close(null);
}
}
Is there a way to automatically refresh the page after creating a new record? This would eliminate the need for manual page reloading to display the newly added record.