2

As I would like to use the fade-in on scroll feature you can see on many websites, I would like to know how to implement such functionality in my application the "angular way". I already have a component implementation that works and maybe this helps anyone who has the same need of using this fade-in on scroll behavior.

My problem with the (shortened) code below is that it does not support Dependency Injection as it always creates a new Instance of the IntersectionObserver.

import { Component, OnInit, AfterViewInit, OnDestroy } from '@angular/core';

@Constructor({
  selector: 'app-cv',
  template: `<div class="entry-content"></div>`
})
export class CurriculumVitaeComponent implements OnInit, AfterViewInit, OnDestroy {
  public iIntersectionObserver :IntersectionObserver;

  constructor() {}

  ngOnInit() :void {
    this.iIntersectionObserver = new IntersectionObserver(entries => {
      console.log(entries); // your code here e.g. toggling classes with Renderer2
    }, { root: null, rootMargin: '0px', threshold: [0, .25, .5, .75, 1]});
  }

  ngAfterViewInit() :void {
    const tEntry :Element = document.querySelector('.entry-content');
    this.iIntersectionObserver.observe(tEntry);
  }

  ngOnDestroy() :void {
    this.iIntersectionObserver.disconnect(); // I'm lazy you could also save the ref and unobserve the Element
  }
}

As you can see this perfectly works, but it is too much setup for multiple components and it does not use dependency injection at all. Is there a way to configure this, maybe with a Service or a Factory Provider?

These are some links I stumbled upon my research, but I did not know how to implement such a specific case:

Provide new instances of model class for dependency injection in Angular 2

Create new instance of class that has dependencies, not understanding factory provider

BigPenguin
  • 264
  • 2
  • 17
  • Read the official documentation for Angular 2 Dependency Injection. Angular has its own dependency injection framework. [doc1](https://angular.io/guide/dependency-injection-in-action) , [doc2](https://angular.io/guide/dependency-injection) – Krzysztof Lach Aug 10 '17 at 20:01
  • I already visited those sites, but I still don't know how to approach this. Do you think some provider in the modules would be a solution or maybe a Service which gets injected with some kind of default parameter which gets overwritten inside the components ? – BigPenguin Aug 10 '17 at 20:06
  • 1
    Sorry I didn't understand you on the first glance. Think about [Singleton Services](https://stackoverflow.com/questions/36198785/how-do-i-create-a-singleton-service-in-angular-2) . – Krzysztof Lach Aug 10 '17 at 20:27
  • Your link to singleton services is a good showcase of how to implement this, thank you! Hmm I think even though I understand the principle of it, maybe it is not suited very well in this case. Think about multiple subcomponents in a parent component, which all need different configuration (different classes added and so on...). With a Singleton Service I would overwrite one child component config with another config. Maybe I was overthinking this... – BigPenguin Aug 11 '17 at 16:23
  • Your welcome! Sometimes overthinking is not a good idea and simple solutions are the best. Can you please mark comment as useful? Thanks and good luck! – Krzysztof Lach Aug 11 '17 at 20:49
  • what about defining `CurriculumVitaeComponent` as base class and extending whenever this setup is required ? – SALEH Sep 17 '17 at 21:15

0 Answers0