working in responsiveness

src/app/pages/chat/chat.page.ts

@@ -1,5 +1,14 @@
 import { HttpClient, HttpHeaders, HttpParams } from '@angular/common/http';
-import { Component, OnInit } from '@angular/core';
+import { 
+  Component, 
+  OnInit,
+  ViewChild,
+  ViewContainerRef,
+  ComponentFactoryResolver,
+  ComponentRef,
+  ComponentFactory,
+  Output
+} from '@angular/core';
 import { ModalController } from '@ionic/angular';
 import { AuthService } from 'src/app/services/auth.service';
 import { ChatService } from 'src/app/services/chat.service';
@@ -43,12 +52,23 @@ export class ChatPage implements OnInit {
     showGroupMessages: false,
   }
 
+  @ViewChild('messagecontainer', { read: ViewContainerRef }) entry: ViewContainerRef;
+  //@ViewChild('groupMessages') child:GroupMessagesPage;
+  componentRef: any;
+
+  roomId:any;
+  showMessages=false;
+  showGroupMessages=false;
+
+  @Output() getRoomInfo;
+
   constructor(
     private http:HttpClient,
     private chatService: ChatService,
     private modalController: ModalController,
     private authService: AuthService,
     private storage:Storage,
+    private resolver: ComponentFactoryResolver,
 
     ) { 
       this.headers = new HttpHeaders();
@@ -73,8 +93,44 @@ export class ChatPage implements OnInit {
       this.load();
     })
 
+    console.log(this.roomId);
+    
+
    
   }
+  destroyComponent() {
+    this.showMessages=false;
+    this.showGroupMessages=false;
+  }
+  openMessagesPage(rid) {
+    this.destroyComponent();
+    this.roomId = rid;
+    this.showMessages=true;
+    /* this.entry.clear();
+    const factory = this.resolver.resolveComponentFactory(MessagesPage);
+    this.componentRef = this.entry.createComponent(factory);
+    this.componentRef.instance.message = message; */
+  }
+  openGroupMessagesPage(rid) {
+    this.destroyComponent();
+    //console.log(this.child.roomId);
+    this.roomId = rid;
+    this.showGroupMessages=true;
+    console.log(rid);
+    /* this.showGroupMessages=true; */
+    
+    /* this.entry.clear();
+    const factory = this.resolver.resolveComponentFactory(GroupMessagesPage);
+    this.componentRef = this.entry.createComponent(factory);
+    this.componentRef.instance.message = message;
+    let comp: GroupMessagesPage;
+    comp = this.componentRef;
+    comp.message = '123';
+    console.log(comp);
+    console.log('1'); */
+    
+  }
+
   
   onSegmentChange(){
     this.load();