title: Angular : use multiple times the same component at the same time, with different datas
body: <p>I'm working on a livechat application.</p>
  
  <p>I have a chat-component.ts which is working: It allow 2 users to chat each other using socket.io.
  Currently I have something like this :</p>
  
  <pre><code>{ path: 'chat/:profile/:profileId/:user/:userId/:timeIdentifier', component: ChatComponent, canActivate: [AuthGuard,RoomGuard] }
  </code></pre>
  
  <p>When the user join this route, a connection is made to the socket.io and allows him to chat in a specific room depending on the route params.</p>
  
  <p>I also use RouteReuseStrategy, so that users can navigate through the application without leaving the chat.
  <a href="https://stackoverflow.com/questions/41280471/how-to-implement-routereusestrategy-shoulddetach-for-specific-routes-in-angular">How to implement RouteReuseStrategy shouldDetach for specific routes in Angular 2</a></p>
  
  <p>What I want to do is to allow 1 user to chat with multiples users at the same time, using the same chat-component.ts.</p>
  
  <p>I am not sure how can I manage to do that.</p>
  
  <p>For now, when I'm trying to use chat-component multiples times at the same time, it brings a lot of bugs : multiple instances of the component running at the same time are causing them to conflict with each others, as it seems angular doesn't know that there are different instances (but only one of which is re-running all process).</p>
  
  <p>I was thinking of giving a uniq ID to each component instance, but I don't know how to do that.</p>
  
  <p>I'm not sure I've made myself clear, but thanks for your help anyway</p>
  
  <p>Edit:</p>
  
  <p><code>chat-component.ts</code></p>
  
  <pre><code>ngOnInit() : void
  { 
    this.tokenUser = this.userService.getUserFromToken();
  
    const subs = this.route.params.subscribe(params =&gt; {
  
      this.profile = params['profile'];
      this.profile_id = params['profileId'];
      this.customer = params['user'];
      this.customer_id = params['userId'];
      this.room = this.profile + '/' + this.customer;
  
      //Storing the joined room in a Room Array
      this.data.addRoomArr(this.router.url);
  
      //Joining the room (socket.io)
      this.joinRoom(this.room, this.profile_id, this.customer_id);
      this.sendNotification(Action.JOINED);
  
    });
    this.subs.add(subs);
  
    [...]
  }
  </code></pre>
  
  <p>What I would like to achieve is to reuse this component multiple times (joining multiples rooms).</p>
  
  <p>But <strong>if the component has already been created</strong> (meaning the user has joined a room), I can't manage to <strong>re-create the component with differents data</strong> (differents url params) so that the user can join, at the same time, a second room.</p>
  
  <p>When I try to re-create the component (by hiting the same route but with differents params), Angular actually reuse the same already created component, causing a lot of bugs.</p>
  
  <p>I think that what I need to do is to <strong>create a sibling component, totally independent from the first one created.</strong></p>