Angular chat integration

In my application, I have a parent component called "chat" with two child components - "sidebar" (which displays the user list) and "conversation detail" (which shows the chat with each user). The functionality I am aiming for is that when a user is clicked on in the sidebar, the chat window for that user should open on the right side, similar to how it works in WhatsApp web. Below is an example code snippet of how my components are structured:

Chat component (parent component)

<div class="container-fluid">
<div class="row">
    <div class="col-5">
        <app-sidebar></app-sidebar>
    </div>

    <div class="col-7">
        <app-conversation-detail></app-conversation-detail>
    </div>
</div>
angulartypescriptchatwhatsapp

Answer №1

To efficiently handle the state, you can manage it within the parent component and then simply pass the relevant data to your sidebar and conversation-detail components using @Input().

One way to accomplish this is by setting up your code as shown below.

@Component({
  selector: 'my-app',
  template: `
  <div class="row">
    <div class="col-5">
        <app-sidebar [convoList]="convoList" (userSelected)="selectUser($event)"></app-sidebar>
    </div>
    <div class="col-7">
        <app-conversation-detail [conversation]="conversation">
        </app-conversation-detail>
    </div>
</div>`,
  styleUrls: ['./app.component.css'],
})
export class AppComponent {
  selectedUser = null;
  conversation = null;
  convoList = [];

  constructor(private conversationService: ConversationService) {}

  selectUser(user: string) {
    this.selectedUser = user;
    this.conversation = this.getConversationsOfUser(user);
  }

  getConversationsOfUser(user: string) {
    return this.conversationService.getConversationOfUser(user);
  }
}

If needed, you can also opt for a more reactive approach utilizing Observables for data handling.

Similar questions

If you have not found the answer to your question or you are interested in this topic, then look at other similar questions below or use the search

Unable to export data from a TypeScript module in Visual Studio 2015 combined with Node.js

Within one file, I have the code snippet export class Foo{}. In another file: import {Foo} from "./module.ts"; var foo: Foo = new Foo(); However, when attempting to run this, I encountered the following error: (function (exports, require, module, __file ...

node.jstypescriptvisual-studio-2015

The function cannot be called on a type that does not have a callable signature. The specified type, 'number | Dispatch<SetStateAction<number>>', does not have any compatible call signatures

Currently, I am working on setting up state to be passed through context in React using hooks. However, when I attempt to use the dispatched state updater function, an error is thrown: Cannot invoke an expression whose type lacks a call signature. Type &a ...

javascriptreactjstypescript

Halt of dispatcher playback occurs after a duration of 10 minutes with discord.js

Currently, I've been working on a music bot using discord.js. To handle audio streaming, I'm utilizing @discordjs/opus and ytdl-core-discord. Everything runs smoothly when testing the bot locally on my machine - songs from YouTube are played with ...

javascripttypescriptdiscord.js

What is the best way to efficiently filter this list of Outcome data generated by neverthrow?

I am working with an array of Results coming from the neverthrow library. My goal is to check if there are any errors in the array and if so, terminate my function. However, the challenge arises when there are no errors present, as I then want to destructu ...

typescript

What is the syntax for accessing elements from an iterable?

Is it possible to create a getter that acts like a function generator? My attempts class Foo { * Test1(): IterableIterator<string> { // Works, but not a getter... yield "Hello!"; } * get Test2(): IterableIterator<string> ...

typescriptgeneratorgetter

Unable to load the Angular material v15 prebuild legacy theme for import

After updating Angular and Material to version 15, I encountered an issue when trying to import legacy prebuilt theme for using legacy components. Unfortunately, importing the material prebuilt-themes that are not legacy ones allows the compiler to build ...

angularangular-material

When you want to place an image in the middle of a cell, you can easily achieve this by utilizing the addImage function

I am currently utilizing the addImage() method within the exceljs library to insert an image into a cell of an Excel file that is exported from my Angular application. While I have successfully added the image using the addImage() method, it appears in t ...

angularexport-to-excelexceljs

I have encountered the same installation error with every Angular Masonry package I have tried to install on various applications

Every time I try to install one of the popular masonry packages for Angular, I encounter the same frustrating error. It's getting to the point where I feel like pulling my hair out. Unexpected token d in JSON at position 702 while parsing near ' ...

angularnpmmasonry

Create a function that accepts a class as a parameter and outputs an object of that class

I am working on an instantiator function that generates an instance of a provided class: declare type ClassType = { new (): any }; // known as "ParameterlessConstructor" function createInstance(constructor: ClassType): any { return new constructor(); ...

typescript

What is the best way to set up JSData with cookie-based sessions and CSRF headers?

In order to properly configure my JSData settings, I must include instructions for passing information related to cookie-based session authentication and CSRF headers. ...

angularcsrfjsdata

The declaration of 'exports' is not recognized within the ES module scope

I started a new nest js project using the command below. nest new project-name Then, I tried to import the following module from nuxt3: import { ViteBuildContext, ViteOptions, bundle } from '@nuxt/vite-builder-edge'; However, I encountered th ...

javascriptnode.jstypescriptnuxtjs3mjs

Error Alert: "Invariant Violation" detected in a TypeScript program utilizing React

When attempting to implement the react-collapse component in my TypeScript application along with a custom d.ts file, I encountered the following error: Warning: React.createElement: type should not be null, undefined, boolean, or number. It should be a ...

reactjstypescript

Error: FullCalendar does not display a header for the timeGridWeek view when the dates fall

Currently, I am integrating fullcalendar 5.5.0 with Angular 10. After migrating from fullcalendar v4 to v5, I noticed an annoying issue where the header for the date before the validRange start is no longer displayed: These are the parameters being used: ...

javascriptangularfullcalendarfullcalendar-5

Issue: ng test encountered a StaticInjectorError related to FormBuilder

I recently started using ng test to run tests on my Angular application. I utilized the Angular-Cli tool to create modules and components, and the .spec.ts files were generated automatically. During one of the tests, I encountered the following error: ...

angular

Angular Leaflet area selection feature

Having an issue with the leaflet-area-select plugin in my Angular9 project. Whenever I try to call this.map.selectArea, VSCode gives me an error saying that property 'selectArea' does not exist on type 'Map'. How can I resolve this? I& ...

javascriptangulartypescriptleaflet

The parameter 'unknown[]' cannot be assigned to the type 'OperatorFunction'

component.ts initialize() method explains The error message says 'Argument of type 'unknown[]' is not assignable to parameter of type 'OperatorFunction<unknown[], unknown>'. Type 'unknown[]' does not match the si ...

angulartypescriptionic-frameworkrxjsangularfire

Specifying the type of "this" within the function body

After going through the typescript documentation, I came across an example that explains how to use type with this in a callback function. I am hoping someone can assist me in comprehending how this callback will operate. interface DB { filterUsers(fil ...

typescript

Ways to compel string type or disregard type?

When using the following code snippet: <Image src={user?.profilePictureUrl} alt={user?.name} /> An error is encountered: Type 'string | null | undefined' is not assignable to type 'string | StaticImport'. Type 'undefined ...

reactjstypescriptnext.js

Updating the variable value within the Highcharts selection event using Angular

Here is an angular 7+ code snippet using the Highcharts API: export class TestComponent implements OnInit{ seek: boolean = false; exampleChart; public options = { chart:{ zoomType: 'x', events: { ...

angularhighcharts

What is the reason behind decorators needing to utilize apply(this) on a function?

I've been delving into the realm of JavaScript and exploring decorator code. One thing I've noticed is that when looking at decorator code like the example below, the input function always applies to 'this' even though it doesn't a ...

javascripttypescriptthisdecorator