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.

Answer 1

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>
...

Answer 2

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.

Answer 3

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>