Directive isn't applied to dynamic attributes

Ionic Framework Ionic Angular
1

Directive:

@Directive({
  selector: '[href]'
})
export class DirectiveHref {
  @Input('href') href: string;

  @HostListener('click') onClick() {
    console.log(`href:'${this.href}'`);
    return false;
  }
}

This directive works with <a href="..."> but doesn’t work with <a [attr.href]=" '...' ">

Who knows the solution?

P.S. I don’t use angular router (it’s replaced with a custom navigation algorithm)

2

Solution found:

@Directive({
  selector: '[href]'
})
export class DirectiveHref {
  constructor(
    private element: ElementRef
  ) {
  }

  @HostListener('click') onClick() {
    console.log(`href:'${this.element.nativeElement.href}'`);
    return false;
  }
}

This directive is applied to <a href [attr.href]=" '...' "> - native [href] must present explicitly