NgClass uses property name instead of class content when using more than one class to apply

Question

I am trying to apply multiple (in my case 2) classes onto a custom component which contains a list item component from MDBootstrap:

App.module.ts

<custom-list-component size="w-50">
    <custom-list-item-component href="#">list item 1</custom-list-item-component>
    <custom-list-item-component href="#">list item 2</custom-list-item-component>
</custom-list-component>

Custom-list-component.component.html

<div [ngClass]="size" class="list-group">
  <ng-content></ng-content>
</div>

Custom-list-component.component.ts

import { Component, OnInit, Input } from '@angular/core';

@Component({
  selector: 'custom-list-component',
  templateUrl: './custom-list-component.component.html',
  styleUrls: ['./custom-list-component.component.sass']
})
export class CustomListComponentComponent implements OnInit {

  @Input() size: string;
  testHorizontal: string = "list-group-horizontal";

  constructor() { }

  ngOnInit() {

  }
}

When I "just" apply size like I did in the custom list component HTML, it applies w-50 to the list, which causes it to display on 50% of the page:

But now, I want to apply a second "class", I want to apply list-group-horizontal to the div that had w-50 applied to it. I have been looking in the docs and I tried all of the below solutions:

<some-element [ngClass]="'first second'">...</some-element>

<some-element [ngClass]="['first', 'second']">...</some-element>

<some-element [ngClass]="{'first': true, 'second': true, 'third': false}">...</some-element>

<some-element [ngClass]="stringExp|arrayExp|objExp">...</some-element>

<some-element [ngClass]="{'class1 class2 class3' : true}">...</some-element>

For example, this does not work:

<div [ngClass]="'size testHorizontal'" class="list-group">
  <ng-content></ng-content>
</div>

Because w-50 and list-group-horizontal are not applied to the div, only their names. This also applies to the other options above. It looks like this:

How would I apply the content of the properties to the DIV and not their names?

Thanks in advance.

have you tried like this `[ngClass]="size +' '+ testHorizontal"`? — Sheik Althaf, Mar 28 '19 at 10:29
I haven't, as it wasn't mentioned in the ngclass docs, but it works, thanks! — Niek Jonkman, Mar 28 '19 at 10:32

score 1 · Accepted Answer · answered Mar 28 '19 at 10:39

1

ngClass directive needs a string to appends as a class (in your case).

so we have to make a string with our variables.

[ngClass]="size +' '+ testHorizontal"

constructs a string with two variables size +' '+ testHorizontal

answered Mar 28 '19 at 10:39

Sheik Althaf

1,595
10
16

NgClass uses property name instead of class content when using more than one class to apply

1 Answers1