How to use locomotive scroll in Angular

Question

Is there a way to use Locomotive scroll in angular. I didn't find anything about this on google. Has somebody ever use Locomotive scroll in angular?

I tried to import it in my homepage.component.ts :

import {Component, HostListener, OnInit} from '@angular/core';
import {AppComponent} from '../app.component';
import LocomotiveScroll from 'locomotive-scroll';


@Component({
  selector: 'app-homepage',
  templateUrl: './homepage.component.html',
  styleUrls: ['./homepage.component.css']
})
export class HomepageComponent implements OnInit {
  scroll;

  constructor() {

  }

  @HostListener('window:load')
  initLocomotiveScroll() {
    this.scroll = new LocomotiveScroll({
      el: document.querySelector('[data-scroll-container]'),
      smooth: true,
    });
  }

}

homepage.componenet.html :

<div data-scroll-container style="height: 100%; overflow: scroll">
  <div data-scroll-section>
    <h1 data-scroll>Hey</h1>
    <p data-scroll>??</p>
  </div>
  <div data-scroll-section>
    <h2 data-scroll data-scroll-speed="1">What's up?</h2>
    <p data-scroll data-scroll-speed="2">??</p>
  </div>
</div>

Thank's in advance.

Jérémy.

question from:https://stackoverflow.com/questions/65875912/how-to-use-locomotive-scroll-in-angular

Answer 1

Your problem is the strict attribute.

FIX tsconfig.json

Set the strict attribute in the tsconfing.json file to false

 "strict": false

This worked for me!