Multiple independent instance of same component Angular

Question

I am new to Angular and trying to create a multi-window popup box in the application and using the same component for all windows and I am loading window using ComponentFactoryResolver.

I am able to load the multiple instances of a window without any problem as well as able to pass information to the new window including window header(User Name) information along with the message list and the user name stay unique as expected but however all the message are replacing with whatever is in the very last instance and replacing all message with instance of last one.

dynamic content loading code:

`loadSingleWindow(user_info)

 {
  const chatBoxFactory = this.componentFactoryResolver.resolveComponentFactory(WindowComponent);
  const viewContainerRef  = this.container;
 // viewContainerRef.clear();

    this.componentRef = viewContainerRef.createComponent(chatBoxFactory);
   // this.chatService.joinChat(user_info);

  const windowInstance = <WindowComponent>(this.componentRef.instance);
  windowInstance.chatUser = user_info;
  this.chatService.loadExistingMessage('').subscribe(data => {
    windowInstance.messages = data;
  });

}
destroyComponent() {
  this.componentRef.destroy();
}
`

WindowComponent looks like below.

export class ChatWindowComponent implements AfterViewInit {

  public messages: Array<ChatMessage> = [];
  activeRoom: any;

  public chatUser;

  ngAfterViewInit() {
      console.log('hello world');
  }
}

In the view of WindowComponents I am looping messages object to show all message.

Image with two instances of the same component with a unique header but message part is replacing by whichever load in the last:

Image with two instances of the same component with a unique header but message part is replacing by whichever load in the last

Poul Kruijt · Accepted Answer · 2019-03-20 15:32:10Z

2

I can imagine the hanging subscription is the issue. Change your code to just get the value once by using the take operator:

this.chatService.loadExistingMessage('').pipe(
  take(1)
).subscribe(data => {
  windowInstance.messages = data;
});

answered Mar 20, 2019 at 15:32

Poul Kruijt

72.3k12 gold badges152 silver badges152 bronze badges

Sign up to request clarification or add additional context in comments.

3 Comments

Koders Over a year ago

It works well thank you. But I run through another problem again whenever I am sending a message from one window it's receiving in all windows. I tried to put that take logic in this but not sure how that take is working in this. constructor(private chatService: ChatService) { this.chatService.onNewMessageReceived().subscribe(data => { console.log(data); this.messages.push(data); }); }

Poul Kruijt Over a year ago

@Koders you have to determine somehow from the message stream to which window it should be directed to. You can use the filter() pipe for this

Koders Over a year ago

Thank you for your suggestion.

Collectives™ on Stack Overflow

Multiple independent instance of same component Angular

1 Answer 1

3 Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

3 Comments

Your Answer

Sign up or log in

Post as a guest

Related