I've created an animation function in my app.component.ts and now I want to use this same function in other components without repeating the code. Is there a more efficient way to do this?
Here is the code in app.component.ts:
import { Component, OnInit, HostListener, ElementRef } from "@angular/core";
import { trigger, state, style, animate, transition } from
"@angular/animations";
@Component({
selector: "app-root",
templateUrl: "./app.component.html",
styleUrls: ["./app.component.css"],
animations: [
trigger("scrollAnimationMain", [
state(
"show",
style({
opacity: 1,
transform: "translateX(0)"
})
),
state(
"hide",
style({
opacity: 0,
transform: "translateX(-100%)"
})
),
transition("show => hide", animate("700ms ease-out")),
transition("hide => show", animate("700ms ease-in"))
]),
trigger("scrollAnimationSecond", [
state(
"show",
style({
opacity: 1,
transform: "translateX(0)"
})
),
state(
"hide",
style({
opacity: 0,
transform: "translateX(100%)"
})
),
transition("show => hide", animate("700ms ease-out")),
transition("hide => show", animate("700ms ease-in"))
])
]
})
export class AppComponent {
state = "hide";
constructor(public el: ElementRef) {}
@HostListener("window:scroll", ["$event"])
checkScroll() {
const componentPosition = this.el.nativeElement.offsetTop;
const scrollPosition = window.pageYOffset;
if (scrollPosition + 700 >= componentPosition) {
this.state = "show";
} else {
this.state = "hide";
}
}
}
Now how can I apply this function in time-line.component.ts?
import { Component, OnInit } from '@angular/core';
import { AppComponent } from '../app.component';
@Component({
selector: 'app-time-line',
templateUrl: './time-line.component.html',
styleUrls: ['./time-line.component.css'],
})
export class TimeLineComponent implements OnInit {
constructor() {
}
ngOnInit() {
}
}