host-context not working in Angular - css

Question

The button background is red, when it should be green
i.e. the conditional styling controlled by :host-context is not activated?
Child component styles commander.scss
commander {
button {
background-color: red;
}
:host-context(.enough-space) .btn-theme {
background-color: green;
}
}
Child component template commander.html
<button class="btn-theme" (click)="demand()">{{requestText}}</button>
Host component template front.html
...
<commander (command)="requestPage()" [requestText]="requestText"></commander>
Host component code front.ts
#Component({
selector: "page-front",
templateUrl: "front.html",
host: {'class': 'enough-space'}
})
export class FrontPage {
...
}
Much of this is based on https://blog.angular-university.io/angular-ngclass-ngstyle/ so it should work - the only real differences I can see is that I have separate files for the templates and styles and I am using Angular within Ionic.
Packages used
"#angular/common": "5.0.0",
"#angular/compiler": "5.0.0",
"#angular/compiler-cli": "5.0.0",
"#angular/core": "5.0.0",
"#angular/forms": "5.0.0",
"#angular/http": "5.0.0",
"#angular/platform-browser": "5.0.0",
"#angular/platform-browser-dynamic": "5.0.0",
"ionic-angular": "3.9.0",
Works in different environment
Here is the same code in stackblitz, and it is working fine, the button is green as it should be: https://stackblitz.com/edit/ionic-host-context
The only differences I can see is that stackblitz uses Angular 4.1.3 and Ionic 3.5.2? Although I am not sure how exactly they have set up the rest of their environment.