CODEWITHSUNDEEP
angular
michealAtmi
michealAtmi

Reputation: 1042

Angular 2 directive not invoked

The goal of my task is to make url-s in div text clickable. I am starting learning Angular 2. I created a directive and trying to use linkifyjs module.

The directive:

import { Directive, ElementRef } from '@angular/core';
import linkifyStr from 'linkifyjs/string';

@Directive({selector: '[linkify]'})
export class LinkifyDirective {

  constructor(private el?: ElementRef) {
        console.log('CHECKPOINT1'); //THIS IS NOT PRESENT IN CONSOLE
        this.el.nativeElement.textContent = 'asd'; //THE TEXT IS DIFFERENT ON THE PAGE AFTER RENDERING, so this constructor is not even invoked.. ?
        this.el.nativeElement.textContent = this.transform(this.el.nativeElement.textContent);
  }

  private transform(str: string): string {
      return str ? linkifyStr(str, {target: '_system'}) : str;
  }
}

The app.module.ts

import { LinkifyDirective } from './directives/linkify.directive';

@NgModule({   declarations: [
    AppComponent, LinkifyDirective   ],   exports: [
    AppComponent, LinkifyDirective ],

The existing component:

@Component({
  selector: 'app-event',
  templateUrl: 'event.template.html',
  styleUrls: ['event.style.scss']
})

export class EventComponent implements OnInit {

There is no linkify lines here.

The **event.template.html with linkify directive:**

 <div class="text-wrap text-area-description" linkify name="description">
                                      {{event.description }}</div>

The package.json:

"dependencies": {
...
"linkifyjs": "^2.1.5",
....

The rendered content:

<div _ngcontent-c1="" class="text-wrap text-area-description" linkify="" name="description">
              Some sample text with address https://myip.com</div>

The problem here is that the linkify directive is not invoked or something like that. There is no CHECKPOINT1 log and the text is not converted to be clickable although it has url inside.

Some sample text with address https://myip.com

Upvotes: 1

Views: 100

Answers (1)

Tzannetos Philippakos
Tzannetos Philippakos

Reputation: 489

I noticed that your EventComponent is not declared in your AppModule. If you have it declared in a separate module, the linkifyDirective needs to either be declared in THAT module, or in a module that is imported there.

Upvotes: 1

Related Questions