reload component/page without refreshing the entire page in angular

Question

After a user has selected a file to upload, the file is only visible after a reload the entire page. I am looking for a neater way for the reload to happen so that I can display the document.

 public onFileSelected(event): void {

  console.log(this.fileId)
   const file = event.target.files[0];
   if (file) {
     const formData = new FormData();

     formData.append("file", file, file.name);
     this.testService.postUrl(`${this.fileId}/upload-document`, formData)
     .subscribe((data) => {
       Swal.fire("Document", "The document has been uploaded.", "success");
     });
   }
   this.getDocuments();
   //this.router.routeReuseStrategy.shouldReuseRoute = () => false;
   const RedirectUrl ='/portal/docupload/' + this.fileId
   this.router.navigateByUrl('/portal/docupload/' + this.fileId, {skipLocationChange: true}).then(() => {
   this.router.navigate([RedirectUrl]);
   this.active = 4;
   // When skipLocationChange true, navigates without pushing a new state into history.
   });
 }

Answer 1

You cannot reload the component because component only iniatlize only one time. you can make a method and and then call the method and change state of the component variables.

Answer 2

You don't have to reload the whole component. Steps to resolve the issue:

1. create variable like fileURL and assign the path or URL of file.
2. You can show it on UI side with {{fileURL}}.

Please let me known if you don't understand, I will create a working example for you.