Ionic4 Angular attribute directive having no effect - angular6

Question

I have created a simple directive that works in an angular demo app according to the guide here.
The appHighlight directive works in Angular, but does nothing when applied in a new blank Ionic-v4 app.
Here are the steps I took to create this ionic project:
ionic start directiveTest blank --type=angular
ionic generate directive Highlight
imported ElementRef from ‘#angular/core’ and injected into
HighlightDirective constructor as shown below.
set ElementRef.nativeElement.style.backgroundColor = ‘yellow’ inside
the directive constructor
checked to make sure HighlightDirective was declared in
app.module.ts added ‘appHighlight’ to tag in home.page.html
Is this expected to work as shown, or am I missing something? Thanks!
highlight.directive.ts:
import { Directive, ElementRef } from '#angular/core';
#Directive({
selector: '[appHighlight]'
})
export class HighlightDirective {
constructor(el: ElementRef) {
el.nativeElement.style.backgroundColor = 'yellow';
}
}
app.module.ts:
#NgModule({
declarations: [AppComponent, HighlightDirective],
entryComponents: [],
imports: [BrowserModule, IonicModule.forRoot(), AppRoutingModule],
providers: [
StatusBar,
SplashScreen,
{ provide: RouteReuseStrategy, useClass: IonicRouteStrategy }
],
bootstrap: [AppComponent]
})
export class AppModule {}
home.page.html:
<ion-content padding>
The world is your oyster.
<p appHighlight> test </p>
</ion-content>