Upadate Image in sidebar after submitting form Angular 2

Question

I have the following setup: Layout and Routes folders, Layout consists of sidebar where I am displaying user image, and Routes consists of all the pages I am displaying in router outlet.

I have a page inside Routes folder where I am uploading new image, and after submitting that form, I want to show the new image in my sidebar at the same moment. For now, it displays the image after I reload the page but thats not the behavior I need.

I even tried creating a component that holds that image in shared folder, and displaying 2 images there, one with current user image (or default) and the other if user uploads new image, but I couldn't make it work.

Anyone has any suggestion/example on what to try?

Can't copy the code since I have no idea what to do, the idea so far is somehow to reload the sidebar component only after submit. Fishing for ideas here.

How to trigger the Event that will change my image immediately when I submit form with new image?

Vega Vega · Accepted Answer · 2017-07-20T11:13:22

Write a shared service which will have a field to hold the filename with two methods to return the field value and update it (getter/setter). Inject it in the two components( one that updates it and the one that displays it). Call the updating method from the updating component and return the file name to the displaying component.

I didn't test yet but with a little debugging and adjustement this should work:

updating component:

import {SharedService} from './app/shared.service'
..
constructor(private sharedService:SharedService){}
..
onSubmit(filename:string):void{
   this.sharedService.update(filename);
}

sidebar component:

import {SharedService} from './app/shared.service'
..
constructor(private sharedService:SharedService){}
..
getImageFileName():void{
    const fileName=this.sharedService.getFileName();
    console.log(fileName);
}

and shared Service

...
    private fileName:string;
..
    getFileName():string{
       return this.fileName;
    }
    updateFileName(fileName:string):void{
        this.fileName=fileName;
    }

Upadate Image in sidebar after submitting form Angular 2

1 Answers