Ionic 3 simple directive not working

Ionic Framework ionic-v3
1

I’m trying to create a directive to make text bold. It’s not working and I get no errors.

Please help :kissing_heart:

bold.ts

import { Directive, ElementRef, Renderer2 } from '@angular/core';

@Directive( { selector: '[appBold]' } )
export class BoldDirective {
    constructor( elem: ElementRef, renderer: Renderer2 ) {
        renderer.setStyle( elem.nativeElement, 'font-weight', 'bold' );
    }
}

home.html

<p appBold>hello</p>

app.modules.ts

import { BrowserModule } from '@angular/platform-browser';
import { ErrorHandler, NgModule } from '@angular/core';
import { IonicApp, IonicErrorHandler, IonicModule, IonicPageModule } from 'ionic-angular';
import { SplashScreen } from '@ionic-native/splash-screen';
import { StatusBar } from '@ionic-native/status-bar';
import { HttpClientModule } from '@angular/common/http';

import { MyApp } from './app.component';

import { BoldDirective } from '../directives/bold';

@NgModule({
  declarations: [
    MyApp,
    BoldDirective
  ],
  imports: [
    BrowserModule,
    IonicModule.forRoot( MyApp, {
      mode: 'md'
    }),
    IonicPageModule.forChild( BoldDirective ),
    HttpClientModule
  ],
  bootstrap: [IonicApp],
  entryComponents: [
    MyApp
  ],
  providers: [
    StatusBar,
    SplashScreen,
    { provide: ErrorHandler, useClass: IonicErrorHandler }
  ]
})
export class AppModule {}

ionic info

cli packages: (C:\Users\Graham.Simmons\AppData\Roaming\npm\node_modules)

    @ionic/cli-utils  : 1.19.2
    ionic (Ionic CLI) : 3.20.0

global packages:

    cordova (Cordova CLI) : 8.0.0

local packages:

    @ionic/app-scripts : 3.1.9
    Cordova Platforms  : none
    Ionic Framework    : ionic-angular 3.9.2

System:

    Android SDK Tools : 26.1.1
    Node              : v6.10.3
    npm               : 4.6.1
    OS                : Windows 10

Environment Variables:

    ANDROID_HOME : C:\Users\Graham.Simmons\AppData\Local\Android\Sdk

Misc:

    backend : pro
1 Like