Integrate AOS library with Angular4 application

Question

I am working on Angular 4.4.6 application and I want to implement some animations on scroll using the awesome plugin AOS

my code:

app.component.ts

import * as AOS from 'aos';

@Component({
 selector: 'app-root',
 templateUrl: './app.component.html',
 styleUrls: ['./app.component.scss'],
 encapsulation:ViewEncapsulation.None
})
export class AppComponent implements OnInit {
 ngOnInit(){
  AOS.init();
 }
}

app.component.html

<div class="box" data-aos="slide-left">
      <img src="assets/imgs/seo.png" alt="">
</div>

angulr.cli.json

"styles": [
    "../node_modules/aos/dist/aos.css",
    "../node_modules/animate.css/animate.min.css",
    "styles.scss"
  ],
  "scripts": [
    "../node_modules/jquery/dist/jquery.js",
    "../node_modules/aos/dist/aos.js"
  ],

I've tried the answer here with no hope https://stackoverflow.com/a/44808496/4183947

Note: I've no errors in my console.

MarcDula · Answer 1 · 2017-11-14T17:01:37.980

I'm trying to get the same thing working for a site I'm migrating to Angular 4.2.4. Since you included the path to the AOS stylesheet in your angular.cli.json you probably already installed AOS via:

npm install aos --save

I got it running with the following:

// angular.cli.json
...
"styles": [
  "../node_modules/aos/dist/aos.css",
  "styles.scss"
],
"scripts": [],
...

and:

// app.component.ts
import { Component, OnInit } from '@angular/core';

import * as AOS from 'aos';

@Component({
  selector: 'app-root',
  templateUrl: './app.component.html',
  styleUrls: ['./app.component.scss']
})
export class AppComponent implements OnInit {
  title = 'app';

  ngOnInit() {
    AOS.init();
  }
}

and in my case I have markup in a HomeComponent:

// home.component.html
...
<div data-aos="fade-up" data-aos-once="true">
  the content
</div>
...

I might explore using AOS via the Angular Dependency Injection system in the future, as described in animate into view when scrolled to angular2 but simply importing AOS in app.component.ts is working so far.

We are not using `ng-cli`, so have to import the css from our entry scss file. `@import "~aos/dist/aos.css"`. Works like a charm. Thanks Bro! — LeOn - Han Li, Jun 09 '18 at 14:02
How is this different from the question itself? I still don't find the error and why it does not work. — J Agustin Barrachina, May 16 '20 at 14:19

score 14 · Answer 2 · answered Jul 18 '18 at 07:40

npm install aos --save

Edit angular.cli.json

// angular.cli.json
...
"styles": [
"../node_modules/aos/dist/aos.css",
"styles.scss"
],
"scripts": [
"../node_modules/aos/dist/aos.js"
],
...

App Component

// app.component.ts
import { Component, OnInit } from '@angular/core';

import * as AOS from 'aos';

@Component({
  selector: 'app-root',
  templateUrl: './app.component.html',
  styleUrls: ['./app.component.scss']
})
export class AppComponent implements OnInit {
  title = 'app';

  ngOnInit() {
    AOS.init();
  }
}

In component html or where you want to add animation

...
<div data-aos="fade-up" data-aos-once="true">
  the content
</div>
...

This worked for me with Angular9. Looks like the js import is required as well as the css import. — Doug, Jun 04 '20 at 14:43

score 8 · Answer 3 · answered Oct 01 '21 at 08:47

I do this in Angular 12+

First, install AOS with your Terminal

npm install --save aos

Then install AOS types for typescript support.

npm install --save @types/aos

add AOS styles and script to project from : angular.json > architect > build > options >

"styles": [
   "./node_modules/aos/dist/aos.css"
 ],

"scripts": [
   "./node_modules/aos/dist/aos.js"
 ]

Init AOS to the AppComponent or any component you want to use it.

import * as AOS from 'aos';

ngOnInit() {
   AOS.init();
}

Use AOS attributes on the elements

<div data-aos="fade-up"> Your Content </div>

score 1 · Answer 4 · answered Jul 06 '20 at 08:44

Terminal

# if you use npm
npm install aos -s

# if you use yarn
yarn add aos

styles.scss

@import 'aos/dist/aos.css'; //<------ Add this line to the top

app.component.ts

import { Component } from '@angular/core';
import * as AOS from 'aos'; //<------ Add this line

@Component({
    selector: 'app-root',
    templateUrl: './app.component.html',
    styleUrls: ['./app.component.scss']
})
export class AppComponent {
    constructor() {
        AOS.init(); //<------ Add this line
    }
}

score 1 · Answer 5 · answered Oct 02 '20 at 19:11

For angular9+

do

npm install aos --save

add js and css file in angular.json

            "styles": [
              "./node_modules/aos/dist/aos.css"
            ],
            "scripts": [
              "./node_modules/aos/dist/aos.js"
            ]

In the app component (your root component), call AOS.init()

export class AppComponent {
  title = 'my-app';

  ngAfterViewInit() {
    AOS.init();
  }
}

Stop your if you are already running and then start again because you have changes in angular.json file

score 0 · Answer 6 · answered Oct 05 '20 at 11:28

0

Make sure you have install all 3 Dependencies.

npm i classlist-polyfill
npm i lodash.debounce
npm i lodash.throttle

you can check here: https://www.npmjs.com/package/aos#init-aos

answered Oct 05 '20 at 11:28

Mohit Patni

1
1

Integrate AOS library with Angular4 application

6 Answers6

Linked