Weird behaviour when using Angular class attribute binding

Event calendars & schedulers
1

I am using the following versions:

  • Angular v20
  • Mobiscroll (angular-ivy) v5.34.2

With the latest version of angular, the style guide has been updated, and now the use of [class] is recomended:

When using the [class] attribute there is a weird behaviour compared to [ngClass].

Steps to reproduce:

  1. Create a new Angular application:
npx @angular/cli new test-app --inline-style --inline-template --minimal --skip-git --skip-install --skip-tests --standalone --strict --style=css --zoneless
  1. Install deps & mobiscroll
npm i 
npm i @mobiscroll/angular-ivy
  1. Add mobiscroll styles in styles.css:
@import "../node_modules/@mobiscroll/angular-ivy/dist/css/mobiscroll.min.css";
  1. Add the following to app.ts:
import { Component } from '@angular/core';
import { NgClass } from '@angular/common';
import { MbscEventcalendarModule, setOptions, localeEn } from '@mobiscroll/angular-ivy';

setOptions({
  locale: localeEn,
  theme: 'material',
  themeVariant: 'light',
});

@Component({
  selector: 'app-root',
  imports: [MbscEventcalendarModule, NgClass],
  template: `
    <mbsc-eventcalendar [class]="'foo'" />
  `,
  styles: [],
})
export class App {
}
  1. Serve the app:
npx ng serve

Observe the following in the HTML:

image
image809×100 16.5 KB

Now instead of using [class]="'foo'", use [ngClass]="'foo'":

<mbsc-eventcalendar [ngClass]="'foo'" />

image

See how the class is added to the host while when using [class], the class was added to the first child element of the host.

Also if one uses both, this is the behaviour observed:

<mbsc-eventcalendar [class]="'foo'" [ngClass]="'bar'" />

image