Send data from one component to other

Ionic Framework ionic-v3
1

Hi all, I have chatHome.html and chatHome.ts, to display user-related ChatData

below is my chatHome.ts code, at first it call showResult() to fetch chat Home data.

showResult(event) {
    if(this.loader!=null){
      this.loader.present();
    }
    
   this.makeSocketConnection();
    
    this.connection = this.chatService.getMessages(this.user, this.pageno,this.socket).subscribe(message => {
     // this.socket.disconnect();
});


makeSocketConnection() {
    var url = "http://" + this.ip + ":" + this.port + "/";
   
    if(this.socket===undefined||!this.socket.connected){
    
      this.socket = io(url);
      this.socket.emit('add user', this.user);    
      this.storage.set('socket',this.socket) ;
//  this.chatService.setSocket(this.socket);
    }  
  }

chatHome.html is below code

<ion-content  style="position: relative;overflow: auto; height: 100%; " class="has-footer"  > 

            <div [formGroup]="myGroup" >
                <ion-row >               
                   <ion-searchbar *ngIf="showSearchBar"  formControlName="searchMsg" [(ngModel)]="searchWord"  (search)="onSearchMsg()"  name="searchMsg" style="border: 1px solid #eee;">             
                  </ion-searchbar>            
                
              </ion-row>
            </div>
            
            <div *ngIf="searching" class="spinner-container">  <ion-spinner></ion-spinner>
            </div>

            <ion-list *ngFor="let mes of splitData let i = index"
             style="padding-left: 1px;padding-right: 10px;margin: 0;">


             <div class=""             
            (click)="chatByRefId(mes.title,mes.msgFrom,mes.msgTo,mes.room,mes.refId,mes.parentRefId,mes.tetraId)" >
                
                <ion-card-content style="border-radius:5px;margin-left: 5px;">
                    <!-- <div><span style="color:#000;" class="fn-sz-sth"><b>{{getUserName(mes.msgFrom)}}</b></span></div>  -->
                    <ion-row align-items-center style="margin-left: -7px;margin-bottom: -13px;">
                        <ion-col  size-sm style="padding:0px;padding-left: 6px;width:60% !important">
                            <p class="ellipsis fn-sz-sth" style="color:#555;line-height: 15px;">
                               <b> {{getUserName(mes.msgFrom)}}</b>
                            </p>                       
                    </ion-col>
                        <ion-col  size="3" size-lg offset="3" style="padding:0px;padding-left: 6px;">
                              <p class="category-description" style="color:#555;font-size: 1rem !important;text-align: right;margin-top: 5px;" >
                                {{mes.createdOn| date :'medium'}} </p>
                            </ion-col>    
                      </ion-row>
                    <span style="color:#555;font-size: 1em;line-height: 15px;" class="fn-sz-sth"><b>{{mes.title}}</b></span> 
                        <div [innerHTML]="mes.msg" class="category-description fn-sz-sth" 
                        style="color:#555;margin-bottom: 0px;font-size: 0.8em;"></div>                   
                    <!-- <span class="category-description" style="color:#000;font-size: 1.1rem;margin-left: 60%;margin-top: 5px;">
                        {{mes.createdOn| date :'medium'}}
                    </span> -->
                    

                </ion-card-content>
            </div>

                        </ion-list>

           <div *ngIf="!hasMoreData" style="text-align: center;margin-top: 10px;"><b></b>{{datLoadStatus}}</div> 

            <ion-infinite-scroll (ionInfinite)="loadData($event)"  style="height:0;min-height: 0;" position="bottom">
              <ion-infinite-scroll-content ></ion-infinite-scroll-content>
            </ion-infinite-scroll>
            <ion-infinite-scroll (ionInfinite)="calledTop($event)" style="height:0;min-height: 0;" position="top">
                <ion-infinite-scroll-content></ion-infinite-scroll-content>
              </ion-infinite-scroll>
           </ion-content>

So from above code on clicking chatHome item, am navigating to chatHistory page by callingchatHistoryOnId(), here am unable to use same existed socket in chatHistory component so please help me. how to approach.
I have chatHistoryCompo.ts
below is my code.

// get the datachat history based on Id
  public chatHistoryOnId(pNo,socket): any {
    //   this.loader.present();
    //this.socket = this.chatService.getSocket();
    this.socket = socket;
    var id = this.loginService.getRefId();    
    //this.makeSocketConnection();
    this.socket.emit('chatsByRefId', { refId: id,page_no:pNo });
    let observable = new Observable(observer => {     
      this.socket.on('chatsByRefId', (data) => {
        observer.next(data);
        //this.socket.disconnect();
       // this.makeSocketConnection();
     //   console.log("chatsByRefId " + JSON.stringify(data) + " ");
      });     
      return observable;       
    })    
    return observable;    
  }
2

If you have a data depending on a socket connection that needs to be shared, you should either be emitting data from that socket to some subscribers OR persisting that data somewhere for ‘other things’ to read.

here am unable to use same existed socket in chatHistory component

You cannot open multiple connections on the same server port from one client in this case because of some divine rules governing the unique identification of the connection. The local lovable(and appreciated) curmudgeon could probably expand upon this until you’ve either developed a career in network engineering, or lost interest.

If I were doing something like this I’d handle connection/disconnection/success/error logic in a service, and my components would subscribe to ‘stuff’ in that service depending on what they want to know(connection status, socket data…).

1 Like
3

If you want to pass data from one component to another then you will need to be use modal controller.See:

4

Thanks for the reply, So how to subscribe and get the existed connection am unable to know, So if ypu please share code. Thanks

5

Hi Thanks for the reply, But without using modal I need to pass data, because, I am opening other component page it should not be a dialogue.

6

You can use angular router for this. or you can use @input or @output for this.

7

can I send socket object by using @Input and @output , so please show with example, because I was tried ,It was not showing.

8

Sending the socket object around for other components tonuse methods on defeats the purpose of any architectural concpet in angular

The service way imho is the onlybway where the service exposes methods to components and these methods do the socket stuff

You seem to fail in understanding that aspect of the architecture. Refrain from using angular if u like plain vanilla js concepts