Angular lifecycle: How do I execute a javascript function AFTER Angular has been initialized?

Question

I'm supposed to use this third party framework and have to initialize it after Angular has initialized.

I've tried adding it to my index.html:

<body>
  ...
<script>
    document.addEventListener('DOMContentLoaded', () => {
        console.log('DKFDS Initialized', DKFDS);
        DKFDS.init();
    });
</script>
</body>

but that doesn't work.

So I tried adding it to ngOnInit() in app.component.ts:

ngOnInit() {
    document.addEventListener('DOMContentLoaded', () => {
        console.log('DKFDS Initialized', DKFDS);
        DKFDS.init();
    });
}

still no luck :-(

The only way I can get it to work is by using jQuery to call the init() function:

ngOnInit() {
  $(() => {
    console.log('DKFDS Initialized', DKFDS);
      DKFDS.init();
    });
}

EDIT: I've also tried ngAfterViewInit() with the same disappointing result...

So my question is: How do I make this work in a pure Angular app without jQuery?

I've made a stackblitz to try to illustrate the issue. A menu should popup by clicking the "Overflow menu": https://stackblitz.com/edit/angular-ubsvkt

Call your function in ngAfterViewInit becasue DOMContentLoaded equivalent to ngAfterViewInit — er-sho
– er-sho, Commented Oct 30, 2019 at 11:12

Arun Saini · Accepted Answer · 2019-10-30 11:15:50Z

1

In such a case, you can initialize the third party lib inside ngAfterViewChecked

ngAfterViewChecked() { 
      DKFDS.init();
}

For angular Lifecycle Hooks refer: https://angular.io/guide/lifecycle-hooks

answered Oct 30, 2019 at 11:15

Arun Saini

7,9641 gold badge24 silver badges26 bronze badges

Sign up to request clarification or add additional context in comments.

2 Comments

CJe Over a year ago

I tried that but then DKFDS.init() was called all the time... :-)

Arun Saini Over a year ago

@CJe , You should use a flag variable to check if it is initialized once.

Fjordo · Accepted Answer · 2019-10-30 13:24:03Z

0

See the updated stackblitz example, now it works,

You can find the dkfds dependency installed, and now the dropdown menu works as expexted. The problem was Angular doesn't know what that library was. Here is the dkfds npm page, you can install into your angular project with npm install --save dkfds

answered Oct 30, 2019 at 13:24

Fjordo

8924 gold badges21 silver badges46 bronze badges

Comments

sibabrat swain · Accepted Answer · 2019-10-30 11:11:09Z

0

Add a setTimeOut to make it work like charm. Or use ngAfterViewInit() angular hook.

ngOnInit() {
  setTimeOut(() => {
   document.addEventListener('DOMContentLoaded', () => {
      console.log('DKFDS Initialized', DKFDS);
      DKFDS.init();
    });
  });   
}

answered Oct 30, 2019 at 11:11

sibabrat swain

1,3789 silver badges21 bronze badges

Comments

Adrita Sharma · Accepted Answer · 2019-10-30 11:13:03Z

0

You can show/hide the "overflow-menu-inner" div by toggling showOverflowMenu on button click.

Try like this:

Working Demo

<button (click)="showOverflowMenu = !showOverflowMenu"
  ...
</button>

    <div class="overflow-menu-inner" id="overflow1" *ngIf="showOverflowMenu">

        <ul class='overflow-list'>
            <li><button>Option 1</button></li>
            <li><button>Option 2</button></li>
            <li><a href='#'>Option 3 as link</a></li>
            <li><button>Option 4 is longer text</button></li>
        </ul>

    </div>

answered Oct 30, 2019 at 11:13

Adrita Sharma

22.3k11 gold badges75 silver badges85 bronze badges

3 Comments

CJe Over a year ago

This works nicely :-) The issue is that the overflow menu is not the only component of the DKFDS framework. So I'll have to do workarounds for the others too :-/

Adrita Sharma Over a year ago

This is the way things work in Angular, why do want to do it in jquery way?

CJe Over a year ago

Oh I don't want to do it using jQuery - definitely not. That was my entire issue - how to get it working w/o jQuery :-)

Collectives™ on Stack Overflow

Angular lifecycle: How do I execute a javascript function AFTER Angular has been initialized?

4 Answers 4

2 Comments

Comments

Comments

3 Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

4 Answers 4

2 Comments

Comments

Comments

3 Comments

Your Answer

Sign up or log in

Post as a guest

Related