CODEWITHSUNDEEP
cssangularsignalsng-classangular-signals
monkey
monkey

Reputation: 1651

Using Angular Signals with classes

I have found some behaviour that I can't understand. If I've got a bunch of styles applied like this:

.monkey-ion-item{
 // Country Variant XXXX Not working after upgrade!
  &.monkey-variant-search-list-country {
    .monkey-icon {
      color: var(--ion-color-success, green);
    }
  }

And then in the html:

<ion-item
  [ngClass]="classes"
  class="monkey-ion-item"
  ...

Why does the following work fine:

  get classes() {
    return `monkey-variant-${this.variant()} ` +
    `monkey-input-type-${this.type()} ` +
    'monkey-input';
  }

Doing this successfully adds all of the listed classes to the ion-item element that they are added to in the template. And they show up perfectly in the properties -> classlist when I inspect the DOM.

but the signal approach to the same fails:

  classes: Signal<string[]> = computed(() => [
    `monkey-variant-${this.variant()}`,
    `monkey-input-type-${this.type()}`,
    'monkey-input',
  ]);

In the case where it fails, if I inspect the DOM, I can see some reference to the classes, but it's clearly not right!

ng-reflect-ng-class=\"[Computed: monkey-variant-sear

I'm migrating code over to use signals and was under the impression that this was the "right" way to do things. But I'm clearly missing something here?!

Upvotes: 1

Views: 38

Answers (1)

Naren Murali
Naren Murali

Reputation: 57986

Using the computed is best. Since the output is memoized, if the inputs do not change, the output is not recomputed.

classes: Signal<string[]> = computed(() => [
  `monkey-variant-${this.variant()}`,
  `monkey-input-type-${this.type()}`,
  'monkey-input',
]);

You just need to execute the computed. Since computed is a function we have to execute it to access the value inside.

<ion-item
  [ngClass]="classes()"
  class="monkey-ion-item"
  ...

Upvotes: 2

Related Questions