From 23d5848a7c141f1f25294cf12238f60cfb7c8a22 Mon Sep 17 00:00:00 2001 From: BART! Date: Wed, 13 Dec 2023 23:02:00 +0100 Subject: [PATCH] docs(readme): angular 17 --- README.md | 165 ++++++++++++++++++------------- projects/ngx-scrolltop/README.md | 165 ++++++++++++++++++------------- 2 files changed, 192 insertions(+), 138 deletions(-) diff --git a/README.md b/README.md index 88814ab..36b83ef 100644 --- a/README.md +++ b/README.md @@ -18,70 +18,44 @@ Just hit the button to smoothly scroll back to the top of the page. [Here's the demo.](http://bartholomej.github.io/ngx-scrolltop/) - Lightweight _(~2 kB gzipped)_ -- No dependencies! _(only smooth scroll-behavior polyfill for iOS 14 and lower)_ +- **Angular 17** compatible +- **Standalone Components** compatible +- Signals compatible +- No dependencies! _(only smooth scroll-behavior polyfill for iOS)_ - Material Design inspired - `@angular/material` compatible ([example](#angular-material-example-directive)) - Component or directive way - Smoothly animated - a11y ready -- Highly customizable [options](#options)... -- Angular 17 +- Highly customizable [options](#%EF%B8%8F-options)... - [Angular 5+ compatible](#compatibility) ![Demo animation](https://github.com/bartholomej/material-scrollTop/blob/master/demo/images/material-scrolltop-animation.gif?raw=true) -## Demo (example) +## 🎯 Demo (example) Watch this [demo page](http://bartholomej.github.io/ngx-scrolltop/) Or play with it live on [stackblitz.com/edit/ngx-scrolltop](https://stackblitz.com/edit/ngx-scrolltop?file=src/app/app.component.html) -## Install - -### Automatically (recommended) 🚀 +## 📦 Install > You're not using the latest version of Angular? > [See our Angular compatibility instructions…](#compatibility) -```bash -ng add ngx-scrolltop # for latest Angular only! See our compatibility table -``` - -**Everything's done!** _(module imported and all settings automatically set in your project.)_ - -_Now just see some [options and examples](#options)._ - -### Manually (old-school) 🛠 - -Via **yarn** or **npm** +Via **npm** or **yarn** ```bash npm install ngx-scrolltop --save # for lastest Angular only! See our compatibility table -``` -### Setup (manually) - -```diff -... -+ import { NgxScrollTopModule } from 'ngx-scrolltop'; -... - -@NgModule({ - imports: [ - ... -+ NgxScrollTopModule - ], - ... - bootstrap: [AppComponent] -}) -export class AppModule { } +# yarn add ngx-scrolltop ``` ### Compatibility | Angular version | ngx-scrolltop | Install | | --------------- | ------------- | ----------------------------- | -| ng17 | v7.x.x | `ng add ngx-scrolltop@latest` | +| ng17 | v17.x.x | `ng add ngx-scrolltop@latest` | | ng16 | v6.x.x | `ng add ngx-scrolltop@6` | | ng15 | v6.x.x | `ng add ngx-scrolltop@6` | | ng14 | v4.x.x | `ng add ngx-scrolltop@4` | @@ -89,25 +63,64 @@ export class AppModule { } | ng12 | v4.x.x | `ng add ngx-scrolltop@4` | | ng5 – ng11 | v2.x.x | `ng add ngx-scrolltop@2` | -Note: Since `ngx-scrolltop` `v3`, the library is compiled with IVY and fully supports Angular12+ (you can't use this with older Angular version anymore!) +## 🗜️ Setup and usage (`Standalone` or `Modules`) + +> You have some options how to use this library. +> As a component or as a directive. -If you still need to use it with an older version of Angular, then use version 2, which is still available: `ng add ngx-scrolltop@2` +> You can also use it as a Standalone component (new angular way) or as a module (the original angular way). -## Usage +### Standalone Component + +In your root standalone component (e.g. `app.component.ts`) you need to add `NgxScrollTopComponent` into your `imports` array. + +```diff +... ++ import { NgxScrollTopComponet } from 'ngx-scrolltop'; +... -### Component way (default) +@Component({ + selector: 'app', + standalone: true, + templateUrl: './app.component.html', + styleUrls: ['./app.component.scss'], + imports: [ ++ NgxScrollTopComponent + ], +}) +export class AppComponent { } +``` -In **app.component.html** you just need to add your new button. Usually at the end of file. +And then in `app.component.html` you just need to add your new button. Usually at the end of your file. ```html ``` -### Directive way +_See [options](#%EF%B8%8F-options) and [examples](#-examples) for more details..._ + +### Standalone Directive + +In your root standalone component (e.g. `app.component.ts`) you need to add `NgxScrollTopDirective` into your `imports` array. + +```diff +... ++ import { NgxScrollTopDirective } from 'ngx-scrolltop'; +... -**Your custom element somewhere in you application...** +@Component({ + selector: 'app', + standalone: true, + templateUrl: './app.component.html', + styleUrls: ['./app.component.scss'], + imports: [ ++ NgxScrollTopDirective + ], +}) +export class AppComponent { } +``` -**Important**: _(no style applied, everything is up to you. Of course I recommend `position: fixed`, ...)_ +And then in `app.component.html` you just need to create your new custom element... _(e.g. ``, `
`, `