Why is Angular 7 not rendering my bootstrap classes properly with [ngClass]

Question

[ngClass]="{
                'col-12 h-100': p.length === 1,
                'col-6 h-50': (p.length >= 2 && p.length <= 4),
                'col-4 h-50': (p.length === 5 || p.length === 6),
                'col-3 h-50': (p.length === 7 || p.length === 8),
                'col-3 h-25': (p.length === 9 || p.length === 10)
              }"

so i have this directive on an Angular 7 div. The div also uses *ngFor to iterate over the p array. The *ngFor works fine and so does condition 1,2,3 & 5. for some reason it breaks on condition 4: 'col-3 h-50': (p.length === 7 || p.length === 8). In dev tools the bootstrap class of h-50 is being added, bu the class of col-3 is not. everything else works fine. anyone run into an issue like this or have any ideas?

Answer 1

The order of properties matter (apparently). The last col-3 statement overrules the previous one. You have to split them up :)

[ngClass]="{
  'col-12 h-100': p.length === 1,
  'col-6': (p.length >= 2 && p.length <= 4),
  'col-4': (p.length === 5 || p.length === 6),
  'col-3 h-25': (p.length >= 7),
  'h-50': (p.length >= 2 && p.length <= 8),
}"