Angular 5 - lifecycle hook in directive

Question

I am new to Angular 5.
I have created the directive for the external JS library.
But in the same directive, I am binding value to the attribute.

I am trying to sue ngAfterViewInit to detect whether all the values are bound to the attribute and then call the jQuery plugin.

But I have find life cycle hook only for the component. Can I use those in directive? Is that a good choice?

<div *ngFor="let item of easypiechartOptions"
    [option]="item"
    appEasyPieChart
    [attr.data-percent]="item.percent">
</div>

If I don't use ngAfterViewInit, then when I call jQuery plugin, the values are not bound.
If I use that, the attribute values are ready when I call the jQuery plugin.

Impregnate

Yes, you can use the same hook in the directive. That's totally fine. Just do implements AfterViewInit and declare your ngAfterViewInit() function. – Unconformable

Answer 1

But I have find life cycle hook only for the component. Can I use those in directive? Is that a good choice?

It seems that the hooks we use for components are intended also for directives. we can understand this concept from the docs, here.

(form the docs :)

A directive has the same set of lifecycle hooks, minus the hooks that are specific to component content and views

Directive and component instances have a lifecycle as Angular creates, updates, and destroys them. Developers can tap into key moments in that lifecycle by implementing one or more of the lifecycle hook interfaces in the Angular core library

there's an example of using the familiar hooks on a directive here

Ingrain

In deed, @Component inherits from @Directive, so that's no surprise that you can use the same hooks for both ;-) (except for the hooks that are specific for Component and thus don't exist on its parent class Directive) – Wingover

Answer 2

Contributing to Ofig's answer, the Directive lifecycle hooks. would be:

• ngOnInit
• ngAfterContentCheckted
• ngOnDestroy

Docs

Ecumenical

Answer 3

All the life cycle methods is available in directive.

I created the custom-directive and added all the life cycle methods as

@Directive({
  selector: '[appCustomDirective]'
})
export class CustomDirective implements OnInit, OnChanges, DoCheck, AfterContentInit, AfterContentChecked, AfterViewInit, AfterViewChecked, OnDestroy {

  @Input() inputValue: string;

  constructor() {
    console.log('Constructor called');
  }

  ngOnInit(): void {
    console.log('ngOnInit called');
  }

  ngOnChanges(changes: SimpleChanges): void {
    console.log('ngOnChanges called', changes);
  }

  ngDoCheck(): void {
    console.log('ngDoCheck called');
  }

  ngAfterContentInit(): void {
    console.log('ngAfterContentInit called');
  }

  ngAfterContentChecked(): void {
    console.log('ngAfterContentChecked called');
  }

  ngAfterViewInit(): void {
    console.log('ngAfterViewInit called');
  }

  ngAfterViewChecked(): void {
    console.log('ngAfterViewChecked called');
  }

  ngOnDestroy(): void {
    console.log('ngOnDestroy called');
  }
}

after applying this directive on html, we got the output

For more practical example is here stackblitz link

Archibaldo

There is no sense in this answer. Plus we do not post answers in images or links – Fairly

Plz read the text before the image, plus what rule are u referring to that restrict to add link? @Fairly – Archibaldo

FYI, I did not downvote. Before the edit, there were (almost) no text. And yes, link-only answers are low quality, there is a flag for that. Otherwise,stackoverflow.com/help/how-to-answer – Fairly

Got it, Thanks u @Fairly for clarifying and for sharing the link. – Archibaldo