scrollViewport directive removes custom CSS classes applied on the viewport element

[hakimio]

Reproduction

Steps to reproduce:

1. Assign scrollViewport directive to your own div
2. Set some CSS class on that element:

<ng-scrollbar>
  <div 
    scrollViewport
    class="foo-bar"
  >
     <!-- CONTENT -->
  </div>
</ng-scrollbar>

Expected Behavior

The class "foo-bar" is retained on the element.

Actual Behavior

scrollViewport directive overrides all CSS classes and foo-bar class is removed.

Environment

• Angular: 16.1
• ngx-scrollbar: 13.0.1
• Browser(s): Chrome 114
• Operating System: Windows 10

[hakimio]

Following line causes the issue:

ngx-scrollbar/projects/ngx-scrollbar/src/lib/scroll-viewport.ts

Line 112 in c265c3c

this.nativeElement.className = `ng-native-scrollbar-hider ng-scroll-viewport ${customClassName}`;

It should prepend existing CSS classes instead of just replacing them.

[hakimio]

I can use viewClass input as a workaround, but being able to set the class directly on my div would be a lot more intuitive.

[hakimio]

@MurhafSousli you fix did not work. For some reason += assignment of the class name doesn't seem to work.

Here is some debugging I did.
Your code with some console logs:

console.log('class name:', this.nativeElement.className);

this.nativeElement.className += `ng-native-scrollbar-hider ng-scroll-viewport ${customClassName}`;
// Check if the custom viewport has only one child and set it as the content wrapper
if (this.nativeElement.firstElementChild) {
    this.contentWrapperElement = this.nativeElement.firstElementChild;
    this.contentWrapperElement.classList.add('ng-scroll-content');
}
console.log('new class name:', this.nativeElement.className);

Output:

class name: my-class-name
new class name: viewportng-native-scrollbar-hider ng-scroll-viewport 

---

If I slightly modify the code:

console.log('class name:', this.nativeElement.className);

this.nativeElement.className = `${this.nativeElement.className} ng-native-scrollbar-hider ng-scroll-viewport ${customClassName}`;
// Check if the custom viewport has only one child and set it as the content wrapper
if (this.nativeElement.firstElementChild) {
    this.contentWrapperElement = this.nativeElement.firstElementChild;
    this.contentWrapperElement.classList.add('ng-scroll-content');
}
console.log('new class name:', this.nativeElement.className);

I get correct result:

class name: my-class-name
new class name: my-class-name ng-native-scrollbar-hider ng-scroll-viewport

[hakimio]

Ok, found out what's the issue. You are missing a space.
Following doesn't work:

this.nativeElement.className += `ng-native-scrollbar-hider ng-scroll-viewport ${customClassName}`;

but this works:

// space before ng-native-scrollbar-hider
this.nativeElement.className += ` ng-native-scrollbar-hider ng-scroll-viewport ${customClassName}`;