vcgit-forge/angular-challenges
1
0
Fork 0
mirror of https://github.com/Raghu-Ch/angular-challenges.git synced 2026-02-11 21:33:02 -05:00
Code Issues Packages Projects Releases Wiki Activity

feat(doc): move scroll-vd

Browse Source
This commit is contained in:
thomas
2023-10-18 09:49:19 +02:00
parent 0fae068682
commit a2d6f2471d
16 changed files with 26 additions and 26 deletions
Download Patch File Download Diff File Expand all files Collapse all files

53
apps/performance/scroll-cd/src/app/app.component.ts Normal file
View File

@@ -0,0 +1,53 @@
import { AsyncPipe, NgIf } from '@angular/common';
import { Component, HostListener } from '@angular/core';
import { BehaviorSubject } from 'rxjs';
@Component({
standalone: true,
imports: [NgIf, AsyncPipe],
selector: 'app-root',
template: `
<div>Top</div>
<div>Middle</div>
<div>Bottom</div>
<button (click)="goToTop()" *ngIf="displayButton$ | async">Top</button>
`,
styles: [
`
:host {
height: 1500px;
display: flex;
flex-direction: column;
justify-content: space-between;
button {
position: fixed;
bottom: 1rem;
left: 1rem;
z-index: 1;
padding: 1rem;
}
}
`,
],
})
export class AppComponent {
title = 'scroll-cd';
private displayButtonSubject = new BehaviorSubject<boolean>(false);
displayButton$ = this.displayButtonSubject.asObservable();
@HostListener('window:scroll', ['$event'])
onScroll() {
const pos = window.pageYOffset;
this.displayButtonSubject.next(pos > 50);
}
goToTop() {
window.scroll({
top: 0,
left: 0,
behavior: 'smooth',
});
}
}

0
apps/performance/scroll-cd/src/assets/.gitkeep Normal file
View File

BIN
apps/performance/scroll-cd/src/favicon.ico Normal file
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 15 KiB

13
apps/performance/scroll-cd/src/index.html Normal file
View File

@@ -0,0 +1,13 @@
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8" />
<title>ScrollCd</title>
<base href="/" />
<meta name="viewport" content="width=device-width, initial-scale=1" />
<link rel="icon" type="image/x-icon" href="favicon.ico" />
</head>
<body>
<app-root></app-root>
</body>
</html>

4
apps/performance/scroll-cd/src/main.ts Normal file
View File

@@ -0,0 +1,4 @@
import { bootstrapApplication } from '@angular/platform-browser';
import { AppComponent } from './app/app.component';
bootstrapApplication(AppComponent).catch((err) => console.error(err));

1
apps/performance/scroll-cd/src/styles.scss Normal file
View File

@@ -0,0 +1 @@
/* You can add global styles to this file, and also import other style files */

1
apps/performance/scroll-cd/src/test-setup.ts Normal file
View File

@@ -0,0 +1 @@
import 'jest-preset-angular/setup-jest';