Indefinite polling of custom css style

[kooshanabedian]

Hi, I have opt in to use my custom css file and luckily got it working the way I wanted. The only problem is that I noticed that the app is showing some unexpected behavior! Polling my customstyle.css file indefinitely like the way it polls listoffriends. Is this intended? If so, how can I shut it down or at least do less frequent polls. Thanks for the amazing job!

[rpaschoal]

Hi @kooshanabedian ,

It's a fairly simple setup at the moment to be honest with you. This is how it is loaded on the DOM:

<link *ngIf="customTheme" rel="stylesheet" [href]='sanitizer.bypassSecurityTrustResourceUrl(customTheme)'>

And customTheme is an @Input property. I wonder if there is something we can do on top of this to prevent the MVVM binder to keep "polling" for the resource? Any ideas @kooshanabedian ?

Cheers!

[anakin59490]

Hi, I have issue with a custom css file declaration and I think you can quickly answer my question : I have chat folder in my angular project with

• chat.component.ts
• chat.component.html
• chat.component.css

I suppose I need to use [customTheme] option, and I use it like this in my ts file:

[customTheme]=" './chat.component.css' "

but it does'nt work. I try to change position parameter, just to test Here the css content :

ng-chat {

position: inherit;
z-index: 999;
right: 0;
bottom: 0;
box-sizing: initial;
font-size: 11pt;
text-align: left

}

Thank's for your help

[rpaschoal]

Hi @anakin59490 ,

You have to pass the Theme property to ng-chat with a custom value. Here is the enum it expects: https://github.com/rpaschoal/ng-chat/blob/master/src/ng-chat/core/theme.enum.ts

When you pass the enum to ng-chat, it will create a wrapping class to the component with the string value of that enum. So for your custom css you will have to add everything inner to .custom-theme.

Not everything can be customized but my suggestion is for you to have a look at how I've built the light and dark themes:

https://github.com/rpaschoal/ng-chat/blob/master/src/ng-chat/assets/themes/ng-chat.theme.default.scss

https://github.com/rpaschoal/ng-chat/blob/master/src/ng-chat/assets/themes/ng-chat.theme.dark.scss

Once you open these scss files you will clearly see the enum string values there (.light-theme, .dark-theme)

Hope this helps! Cheers!

[justincohan]

sanitizer.bypassSecurityTrustResourceUrl is also being used on images causing them to load many times.

In order to fix this you can apply the method only once in the component or you could create a pipe.

[src]="user.avatar | sanitize"

[rpaschoal]

This should now be fixed with version 2.0.5: https://github.com/rpaschoal/ng-chat/releases/tag/2.0.5 👍