How to import NgChat component in my component so that I can get a reference of it.

[riteshbathwal]

Hello, How can I import NgChat component in my component so that I can get a reference of it using ViewChild? I tried with importing NgChat component import { NgChat } from 'ng-chat';
but this gives error: No exported member NgChat. Please help in this regard.

Also I need to change 2-3 lines of your code in file: ng-chat/fesm5/ng-chat.js. How can I change those? For example one of the change I need to do in this file is call the this.fetchMessageHistory(openedWindow); method openChatWindow method, even when the window is opened, so that I can fetch the latest history. Please help in this regard, stuck in a project.

[rpaschoal]

Hi @riteshbathwal ,

You have to type your view child as IChatController. and not as NgChat. That will give you the ability to trigger some events from your chat component.

Here is the link to the section on the readme file: https://github.com/rpaschoal/ng-chat#triggering-ng-chat-actions-from-elsewhere

Cheers!

[riteshbathwal]

It only allows me to trigger the following events: triggerOpenChatWindow(user: User): void; triggerCloseChatWindow(userId: any): void; triggerToggleChatWindowVisibility(userId: any): void;

But I want to modify some of the methods in NgChat class. That I can do by getting a reference of NgChat class. How can I get a reference to NgChat component?

[riteshbathwal]

Hi, I need to customise the NgChat componentI just need to add 3 lines of code in following 3 methods:

1. fetchMessageHistory
2. onMessageReceived
3. openChatWindow Please let me know how can I do so?

[rpaschoal]

@riteshbathwal I am not sure of what you want to achieve in your application but you could add some custom code to what you've mentioned above by:

1. You can add your code on fetchMessageHistory from your adapter
2. You can subscribe to this event by using an output to onMessagesSeen
3. You can also subscribe to this event by using an output to onParticipantChatOpened

Not exporting the NgChat class was done by design to decouple the component from any application that uses it.

If you really want to update how NgChat behaves for your application you could fork this project and maintain your own repository. This has some downsides such as having to pull any updates, having to keep an eye here for bug fixes, new features, etc.

I am more than happy to help you find a solution for your scenario if you put a bit more details of what you're trying to achieve.

Cheers!

[riteshbathwal]

Hi rpaschoal, Thanks for the kind words.

What I did was copied node-modules/ng-chat folder in my project, and made my changes in the file: fesm5/ng-chat.js. Then changed the name of the module in the package.json file from ng-chat to test-ng-chat. Then I published this changed module on npm and installed this changed module into my project. It worked like charm.

But when I tried to create the build using ng build, it breaks with errors like:

Can't resolve 'ng-chat' in '/home/ritesh/Documents/GATI/Gati-Delivery-Mobile-App/Client/node_modules/bp-ng-chat'

You pointed that I can fork your git repo on my git account. I did that and made the changes and then installed the changed ng-chat using the command: npm install https://github.com//ng-chat/tarball/master. But that too did not worked. Please help me out, as I do not see any other way than changing your files.

Thanks

[rpaschoal]

@riteshbathwal You should not be changing the files on your NPM modules as they are compiled and bundled files.

You also probably don't want to be publishing a package on NPM that is only meant to be used by you. You should just compile and bundle the source code with your code or distribute it locally as I believe you wouldn't want other people seeing your customized application code.

Have you had a shot on trying to use the listed things I told you above (working directly on your adapter)?

[riteshbathwal]

Hi rpaschoal. Below are the three changes I want:

1. in fetchMessageHistory() under the else section - handling getMessageHistory() subscription, I want to replace the below commented line with the next one: //window.messages = result.concat(window.messages); window.messages = result

2. in onMessageReceived() method, I want to implement it like below: if (participant && message) { let chatWindow = this.openChatWindow(participant); if(1) return; } }

3. in openChatWindow() I want to add the below line in the else block, just before the last line - the return statement - of the the method this.fetchMessageHistory(openedWindow).

So if you notice my changes, 1) I cant call fetchMessageHistory() from DemoAdapter, so how can I add my code on fetchMessageHistory() 2) I cant subscribe to onParticipantChatOpened, because the changes I want in the chatWindowOpened, is when the window is already opened. 3) I cant achieve the change I need in the onMessageReceived() because, there I want to call the openChatWindow(), and I cant access it from DemoAdapter.

Please suggest, how can I make all these 3 changes? Please check link to my git repo for ng-chat. I have made the above mentioned changes in the ng-chat.component.ts file: https://github.com/riteshbathwal/ng-chat/blob/master/src/ng-chat/ng-chat.component.ts

Please help me out, as I am stuck in a project since 5 days. If you can create a separate branch on npm with these changes, that will help me. Any help that can solve my problem will be great. Thanks.

[riteshbathwal]

Hi rpaschoal. I have added the git repo of ng-chat module into my project and made my changes in it. Now I got what you mean by : "You should just compile and bundle the source code with your code or distribute it locally as I believe you wouldn't want other people seeing your customized application code."

Thanks for your help. Now I can make any changes on my local copy and have my project run smoothly. I do understand the drawbacks of it though. This issue can be closed now.

[rpaschoal]

Cool @riteshbathwal , I'm glad you got your issue sorted!

I still firmly believe you might be able to sort these out by changing a bit the way your API endpoints behave and just coding against the adapter.