import 'zone.js/dist/zone'; import { Component, Directive, ElementRef, EventEmitter, inject, Input, OnDestroy, OnInit, Output, } from '@angular/core'; import { CommonModule } from '@angular/common'; import { bootstrapApplication } from '@angular/platform-browser'; @Directive({ selector: '[scrollIntoView]', standalone: true, }) export class ScrollIntoViewDirective implements OnInit, OnDestroy { @Input() threshold = 0.25; @Output() scrollIntoView = new EventEmitter(); elRef = inject(ElementRef); observer: IntersectionObserver; ngOnInit() { this.observer = new IntersectionObserver( (entries) => { entries.forEach((entry) => { if (entry.isIntersecting) { this.scrollIntoView.emit(); } }); }, { threshold: this.threshold } ); this.observer.observe(this.elRef.nativeElement); } ngOnDestroy() { this.observer.disconnect(); } } @Component({ selector: 'my-app', standalone: true, imports: [CommonModule, ScrollIntoViewDirective], template: `

Hello from {{name}}!

Learn more about Angular

Content Content Content

`, }) export class App { name = 'Angular'; log() { console.log('scrolled!'); } } bootstrapApplication(App);