Initialzing a 3rd-party Library in an Angular 4 App

Question

I'm trying to use Scrollify in my Angular 4 app. I'm supposed to initialize it using this script:

<script>
  $(function() {
    $.scrollify({
      section: ".section-class-name",
      sectionName: "section-name"
    });
  });
</script>

I know that the library depends on jquery, which I already have in my angular-cli.json file declared as so:

"scripts": [ "../node_modules/jquery/dist/jquery.min.js" ]

I want to use Scrollify only in one lazy-laded module, and so I would like to not have to delcare it as a global script like jquery. Is there a way to do this?

Have you tried to add the `` to the template file for this Component? — Ma Kobi, May 26 '17 at 11:17
I honestly don't know any disadvantages for this practice. And you have it only in the components where you added it in the template html. — Ma Kobi, May 26 '17 at 11:25
I just wish I can listen for the mouse wheel scroll event myself and know how to make the page jump by 100vh; that's all I need! — Sammy, May 26 '17 at 11:26
the script tag is automatically removed form template.The only place were you can place the tag is in the index.html. I suppose it doesn't work cause the app is still being loaded when the plugin is trying to hook to the section elements. I'm dealing with the same issue, but without any luck :] .. — Alexus, May 29 '17 at 14:30

score 0 · Accepted Answer · answered May 29 '17 at 14:45

well it seems I have figured it out by trial and error :).

You have to init the plugin from within the component which contains the section elements.

...
@Component({
   template: "<div class='section'></div><div class='section'></div><div class='section'></div>"
})
export class ComponentX implements OnInit,AfterViewInit {

      constructor () {}

      ngAfterViewInit() {
      }

      @ViewChild(SectionComponent) section:ElementRef;

      ngOnInit(): void {
        $.scrollify({
            section : "section"
        });
      }

    }

Also you may need to add a `scrollify` definition into the `@types/jquery/index.d.ts` file. Something like `scrollify(obj:any): void;` Otherwise you may not be able to compile it in AOT mode. — Alexus, May 30 '17 at 08:37

Initialzing a 3rd-party Library in an Angular 4 App

1 Answers1