Ytukyg

messenger.component.ts

import { MessengerService } from 'messenger.service';



messages: any =;



ngOnInit(): void {

    // call logs to http api

    this.messages = this.messengerService.getData();

}



sendMessage(message){

   this.messages.subscribe(data => {

        data.push({

            message_from: 'borrower',

            message: message

        });

       console.log(data);

    });

}

OUTPUT CONSOLE.LOG(data)

0: {message_from: "borrower", message: "hi", status: 0, user: 1}

1: {message_from: "borrower", message: "test", status: 0, user: 1}

2: {message_from: "borrower", message: "yea", status: 0, user: 1}

3: {message_from: "borrower", message: "aasd", status: 0, user: 1}

4: {message_from: "borrower", message: "aaa", status: 0, user: 1}

messenger.service.ts

public getData(): Observable<MessageData> {

        return this.http.get<MessageData>('API', {

            headers: {

                Authorization: `Bearer ${sessionStorage.getItem('token')}`,

                Accept: 'application/json'

            }

        }).pipe(map(response => response['success']));

    }

messenger.component.html

<ng-container *ngFor="let message of messages | async ">

            //template  

 </ng-container>

Already able fetch the data from Web server API. I want to add another function that sends data and able to show it as soon it clicks submit. How can do that using Observable, which ables to append to the previous list ?

Preview

I just wanted to show immediately the message after the function click sendMessage which will save through API and sync it with the Observable

Completely untested, but the idea is that you use a BehaviourSubject which holds your new user inputted data. Which will be merged onSubmit and send to the this.messages using combineLatest. While on loading of the component it gets the messages from the service.

newMessages = new BehaviourSubject<MessageData>();



messages: Observable<MessageData> = combineLatest(

  this.newMessages,

  this.messengerService.getData()

).pipe(

  map(([added, data]) => data.concat(added))

);



sendMessage(message): void {

  const messages = this.newMessages.getValue();

  messages.push(message);



  this.newMessages.next(messages);

  this.messengerService.addMessage({

    message_from: 'borrower',

    message

  }); // make proper sending logic here

}

If I true understand you question you can use this method

currentTook = new BehaviorSubject();

in get request

    this.currentTook.next(sendData);

and in another component you can input this

@Input() currentTook: Observable<any>;



this.currentTook.subscribe(data => {

         console.log(data);



     });