-
Notifications
You must be signed in to change notification settings - Fork 13.4k
Closed
Labels
Description
Bug Report
Ionic Info
Run ionic info
from a terminal/cmd prompt and paste the output below.
Ionic:
ionic (Ionic CLI) : 4.1.1 (/home/nmartin/npm/lib/node_modules/ionic)
Ionic Framework : @ionic/angular 4.0.0-beta.3
@angular-devkit/core : 0.7.4
@angular-devkit/schematics : 0.7.4
@angular/cli : 6.1.4
@ionic/ng-toolkit : 1.0.7
@ionic/schematics-angular : 1.0.5
System:
NodeJS : v10.6.0 (/usr/local/bin/node)
npm : 6.3.0
OS : Linux 4.18
Describe the Bug
custom attribute Directives are not working in Ionic 4
Steps to Reproduce
Steps to reproduce the behavior:
- run
ionic start myApp tabs --type=angular
- run
ionic g directive hilite
- edit hilite.directive.ts to look like:
import { Directive, ElementRef } from '@angular/core';
@Directive({
selector: '[appHilite]',
})
export class HiliteDirective {
constructor(el: ElementRef) {
console.log('hilite!!!');
el.nativeElement.style.backgroundColor = 'yellow';
}
}
- edit app/home/homt.page.html to look like:
<p appHilite>If you get lost, the <a target="_blank" rel="noopener" href="https://ionicframework.com/docs">docs</a>
will be your guide.</p>
- run the app
Expected Behavior
the paragraph to have a yellow background
Actual Behavior
Nothing. Interestingly, If I move the directive injection from app.module.ts to home.module.ts, it works, BUT only in home.page.html, not any other page in the app, due to duplicate declarations