3

Following this question I've run into another 'issue'. Basically I've got a HTML theme that has a lot of initialising code ($document.ready() code) that I need to run in ngAfterViewInit. My issue is that this doesn't work when I put it in my app.ts file (the root app component), so I'm having to put it all into every single component I create, which doesn't seem right.

I wonder if I'm missing something obvious or if the app component instantiates before the rest of the component loads?

app.ts

import {Component, ViewEncapsulation, AfterViewInit} from 'angular2/core';

export class AppCmp implements AfterViewInit {

  ngAfterViewInit() {
     //All my document ready code here, which doesn't work
  }
}

EDIT I will try and be a bit more specific.

The code in question can be seen here. It is basically all the code that instantiates and runs my modals, parallax, dropdowns etc. etc. I.e. all javascript that needs to run after angular has initialised the view and called it's ngAfterViewInit. If I copy paste all the code into ngAfterViewInit in my app.ts, then nothing will work, modals, parallax, accordions etc. But if I put the same code into a specific components (e.g. home.ts) then it works just fine. Hope this clarifies.

Say I wanted to run the following when the page was fully loaded:

setTimeout(function() {
  $('.background-image-holder').each(function() {
    $(this).addClass('fadeIn');
  });
}, 200);

In app.ts this fails to run, but in home.ts this runs just fine

Community
  • 1
  • 1
Chris
  • 7,830
  • 6
  • 38
  • 72
  • 1
    Well, I suggest you start small... instead of trying to get 1300 lines of JavaScript to work, just start with one feature. (You'll likely get more help on StackOverflow this way too). Does all of this code run independent of Angular? If so, you probably don't need to put it inside Angular. What happens if you just load it as a separate JavaScript file? If it does need to interact with Angular, you should explain how (again, with a small example -- as small as possible). – Mark Rajcok Jan 07 '16 at 20:37
  • @MarkRajcok thanks for your reply. And yes, you are right, I did look at splitting it up into smaller segments, but there will still be some code duplication, which I'm trying to avoid. Sideloadong the flle (via a script tag at the end of all the scripts) didn't work either, as it loads before angular is ready. – Chris Jan 07 '16 at 21:20

0 Answers0