CODEWITHSUNDEEP
javascripttypescriptangular2-templateangular2-forms
Narendra Vyas
Narendra Vyas

Reputation: 727

Angular2 how to update image in another component

I am having two components one is of top-bar and another for profile management page.

The issue is on updating the profile image it should also get changed from top-bar header also. It does but on page reload. I want it to be on instant.

For this I can do this if I hit a function in top-bar component and alter variable that shows image. But I am unable to figure out that how I can do so I mean if image is updated in a my-profile component then how I can call a function of top-bar component and change the value of variable.

What I tried is:

top-bar.component.ts :

@Component({


selector: 'top-bar',
  templateUrl: './top-bar.component.html',
})
export class TopBarComponent {
     @Output() myEvent = new EventEmitter();
       test()
    {
    console.log("in test");
    }
   }

my-profile.component.html:

<top-bar #modal></top-bar>
    <top-bar (myEvent)="modal.test()"></top-bar>

I am expecting that on my-profile page load I should get console.log("in tets");. Please correct me if wrong and how can i achieve so. Thanks in

I have imported top-bar component in my-profile component already

Upvotes: 1

Views: 1998

Answers (2)

Absar Hasan
Absar Hasan

Reputation: 184

Here are working PLUNKER components.. This may help you, here header image get changed with/from profile component

Header Component:

@Component({
             selector: 'app-header',
             template: `<header>
                       <img [src]="imgSrc"> 
                       <app-profile (reloadParent)="setImage($event)" 
                       [imgUrl]="imgSrc"></app-profile>
                       </header>`
      })
export class HeaderComponent implements OnInit {
   imgSrc;
   constructor() { }
   ngOnInit() {
   this.setImage({src: "http://files.softicons.com/download/system-
                 icons/oxygen-icons-by-
   oxygen/png/128x128/actions/format_font_size_less.png"});
 }
  setImage($event){
  this.imgSrc = $event.src;
  }
}

Profile Component

@Component({
           selector: 'app-profile',
           template: `<div id="">
           <img [src]="imgUrl">
           <button (click)="changeImage()">Change Image</button>
           </div>`
   })
  export class SearchComponent implements OnInit {
  @Input() imgUrl: string;
  @Output() reloadParent: EventEmitter<any> = new EventEmitter<any>();
  constructor() { }
  ngOnInit() {     }
  changeImage(){
       var img = "https://encrypted-tbn0.gstatic.com/images?
        q=tbn:ANd9GcQWVbaiDV_SRbWJJVfyn7wOinekRzs9xiCHdZK5RU86bkICXcaz";
        this.reloadParent.emit({src: img });
     }
  }

Upvotes: 2

Angular Dev
Angular Dev

Reputation: 4916

I assume you have an image element in your top bar component. You will need to create an input for that component which you will use to bind the image to.

So somewhere in your class you will do this.

export class TopBarComponent {
    @Input() imageSrc: string;
}

Which you will use in your template like so

<img [src]="imageSrc"></img>

Upvotes: 2

Related Questions