I am facing a challenge trying to add multiple classes (in this case 2) to a custom component that includes 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() {
}
}
Initially, when I apply just the size property as shown in the custom list component HTML, it sets w-50 for the list, making it display on 50% of the page:
https://i.sstatic.net/lafVO.png
However, now I want to add a second class. I want to include list-group-horizontal to the div where w-50 is already applied. I have tried various solutions from the documentation but none seem to work:
<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 setup does not achieve the desired result:
<div [ngClass]="'size testHorizontal'" class="list-group">
<ng-content></ng-content>
</div>
The issue here is that only the names w-50 and list-group-horizontal are being added, not their contents. This problem persists with the other options mentioned above. Resulting in something like this:
https://i.sstatic.net/M8aYl.png
How can I correctly apply the values of the properties to the DIV rather than just their names?
Thank you in advance.