Skip to content

Commit 9c49871

Browse files
committed
docs(readme): angular 17
1 parent e1ec09f commit 9c49871

File tree

2 files changed

+192
-138
lines changed

2 files changed

+192
-138
lines changed

README.md

Lines changed: 96 additions & 69 deletions
Original file line numberDiff line numberDiff line change
@@ -18,104 +18,146 @@
1818
Just hit the button to smoothly scroll back to the top of the page. [Here's the demo.](http://bartholomej.github.io/ngx-scrolltop/)
1919

2020
- Lightweight _(~2 kB gzipped)_
21-
- No dependencies! _(only smooth scroll-behavior polyfill for iOS 14 and lower)_
21+
- **Angular 17** compatible
22+
- **Standalone Components** compatible
23+
- Signals compatible
24+
- No dependencies! _(only smooth scroll-behavior polyfill for iOS)_
2225
- Material Design inspired
2326
- `@angular/material` compatible ([example](#angular-material-example-directive))
2427
- Component or directive way
2528
- Smoothly animated
2629
- a11y ready
27-
- Highly customizable [options](#options)...
28-
- Angular 17
30+
- Highly customizable [options](#⚙️-options)...
2931
- [Angular 5+ compatible](#compatibility)
3032

3133
![Demo animation](https://github.com/bartholomej/material-scrollTop/blob/master/demo/images/material-scrolltop-animation.gif?raw=true)
3234

33-
## Demo (example)
35+
## 🎯 Demo (example)
3436

3537
Watch this [demo page](http://bartholomej.github.io/ngx-scrolltop/)
3638

3739
Or play with it live on [stackblitz.com/edit/ngx-scrolltop](https://stackblitz.com/edit/ngx-scrolltop?file=src/app/app.component.html)
3840

39-
## Install
40-
41-
### Automatically (recommended) 🚀
41+
## 📦 Install
4242

4343
> You're not using the latest version of Angular?
4444
> [See our Angular compatibility instructions…](#compatibility)
4545
46-
```bash
47-
ng add ngx-scrolltop # for latest Angular only! See our compatibility table
48-
```
49-
50-
**Everything's done!** _(module imported and all settings automatically set in your project.)_
51-
52-
_Now just see some [options and examples](#options)._
53-
54-
### Manually (old-school) 🛠
55-
56-
Via **yarn** or **npm**
46+
Via **npm** or **yarn**
5747

5848
```bash
5949
npm install ngx-scrolltop --save # for lastest Angular only! See our compatibility table
60-
```
6150

62-
### Setup (manually)
63-
64-
```diff
65-
...
66-
+ import { NgxScrollTopModule } from 'ngx-scrolltop';
67-
...
68-
69-
@NgModule({
70-
imports: [
71-
...
72-
+ NgxScrollTopModule
73-
],
74-
...
75-
bootstrap: [AppComponent]
76-
})
77-
export class AppModule { }
51+
# yarn add ngx-scrolltop
7852
```
7953

8054
### Compatibility
8155

8256
| Angular version | ngx-scrolltop | Install |
8357
| --------------- | ------------- | ----------------------------- |
84-
| ng17 | v7.x.x | `ng add ngx-scrolltop@latest` |
58+
| ng17 | v17.x.x | `ng add ngx-scrolltop@latest` |
8559
| ng16 | v6.x.x | `ng add ngx-scrolltop@6` |
8660
| ng15 | v6.x.x | `ng add ngx-scrolltop@6` |
8761
| ng14 | v4.x.x | `ng add ngx-scrolltop@4` |
8862
| ng13 | v4.x.x | `ng add ngx-scrolltop@4` |
8963
| ng12 | v4.x.x | `ng add ngx-scrolltop@4` |
9064
| ng5 – ng11 | v2.x.x | `ng add ngx-scrolltop@2` |
9165

92-
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!)
66+
## 🗜️ Setup and usage (`Standalone` or `Modules`)
67+
68+
> You have some options how to use this library.
69+
> As a component or as a directive.
9370
94-
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`
71+
> You can also use it as a Standalone component (new angular way) or as a module (the original angular way).
9572
96-
## Usage
73+
### Standalone Component
74+
75+
In your root standalone component (e.g. `app.component.ts`) you need to add `NgxScrollTopComponent` into your `imports` array.
76+
77+
```diff
78+
...
79+
+ import { NgxScrollTopComponet } from 'ngx-scrolltop';
80+
...
9781

98-
### Component way (default)
82+
@Component({
83+
selector: 'app',
84+
standalone: true,
85+
templateUrl: './app.component.html',
86+
styleUrls: ['./app.component.scss'],
87+
imports: [
88+
+ NgxScrollTopComponent
89+
],
90+
})
91+
export class AppComponent { }
92+
```
9993

100-
In **app.component.html** you just need to add your new button. Usually at the end of file.
94+
And then in `app.component.html` you just need to add your new button. Usually at the end of your file.
10195

10296
```html
10397
<ngx-scrolltop></ngx-scrolltop>
10498
```
10599

106-
### Directive way
100+
_See [options](#⚙️-options) and [examples](#🎨-examples) for more details..._
101+
102+
### Standalone Directive
103+
104+
In your root standalone component (e.g. `app.component.ts`) you need to add `NgxScrollTopDirective` into your `imports` array.
105+
106+
```diff
107+
...
108+
+ import { NgxScrollTopDirective } from 'ngx-scrolltop';
109+
...
107110

108-
**Your custom element somewhere in you application...**
111+
@Component({
112+
selector: 'app',
113+
standalone: true,
114+
templateUrl: './app.component.html',
115+
styleUrls: ['./app.component.scss'],
116+
imports: [
117+
+ NgxScrollTopDirective
118+
],
119+
})
120+
export class AppComponent { }
121+
```
109122

110-
**Important**: _(no style applied, everything is up to you. Of course I recommend `position: fixed`, ...)_
123+
And then in `app.component.html` you just need to create your new custom element... _(e.g. `<span>`, `<div>`, `<button>`, ...)_
111124

112125
```html
113126
<span ngxScrollTop class="my-custom-element-with-my-style__no-lib-style-applied-here">
114127
↑ My Custom Element. ↑
115128
</span>
116129
```
117130

118-
## Options
131+
**Important note**: _No style applied, everything is up to you. Of course I recommend `position: fixed`, ..._
132+
133+
_See more in [examples](#🎨-examples)_
134+
135+
### Modules (the original Angular way)
136+
137+
> This is the original Angular way how to import libraries (via modules).
138+
> You can use it as a component or as a directive as well.
139+
140+
In your root module (e.g. `app.module.ts`) you need to add `NgxScrollTopModule` into your `imports` array.
141+
142+
```diff
143+
...
144+
+ import { NgxScrollTopModule } from 'ngx-scrolltop';
145+
...
146+
147+
@NgModule({
148+
imports: [
149+
...
150+
+ NgxScrollTopModule
151+
],
152+
...
153+
bootstrap: [AppComponent]
154+
})
155+
export class AppModule { }
156+
```
157+
158+
_Next steps you can see above in [Standalone Component](#standalone-component) or [Standalone Directive](#standalone-directive)_ or in [examples](#🎨-examples).
159+
160+
## ⚙️ Options
119161

120162
### Component
121163

@@ -131,7 +173,7 @@ In **app.component.html** you just need to add your new button. Usually at the e
131173

132174
#### Symbol
133175

134-
Since version v2.0.0 you can use _content projection_ for your own symbol.
176+
You can use _content projection_ for your own symbol.
135177

136178
```html
137179
<ngx-scrolltop> ↑ </ngx-scrolltop>
@@ -151,7 +193,7 @@ Or you can even use your own components or fonts (e.g. fontAwesome)
151193
| ---------------------- | ------------------------ | ----------- | ------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- |
152194
| **[ngxScrollTopMode]** | `'smart'` \| `'classic'` | `'classic'` | **Smart** mode shows button only when you scroll more than two screens down and then you will try to go back to top.**Classic** mode shows button immediately when you scroll at least one screen down. |
153195

154-
## Examples
196+
## 🎨 Examples
155197

156198
### Advanced example (component)
157199

@@ -198,28 +240,11 @@ _[@angular/material](https://material.angular.io/components/button/overview) req
198240
}
199241
```
200242

201-
## Dependencies
243+
## 🔌 Dependencies
202244

203245
Pure Angular! _(with smooth scroll-behaviour polyfill for iOS)_
204246

205-
<!-- ## 🧪 Experiments -->
206-
207-
## Development (notes for contributors)
208-
209-
### Publish Stable
210-
211-
```bash
212-
yarn release:patch
213-
# yarn release:minor
214-
# yarn release:major
215-
```
216-
217-
### Publish next channel
218-
219-
1. Bump version `-beta.0` in `package.json`
220-
2. `yarn publish:next`
221-
222-
## FAQ
247+
## 🙋 FAQ
223248

224249
### Old version of Angular
225250

@@ -257,11 +282,13 @@ Easy! Use compatibility version of this library `npm install ngx-scrolltop@4 --s
257282

258283
[See our Angular compatibility instructions…](#compatibility)
259284

260-
## Donation
285+
## ⭐️ Show your support
286+
287+
Give a ⭐️ if this project helped you!
261288

262-
If this project have helped you save time please consider [making a donation](https://github.com/sponsors/bartholomej) for some 🍺 or 🍵 ;)
289+
Or if you are brave enough consider [making a donation](https://github.com/sponsors/bartholomej) for some 🍺 or 🍵 ;)
263290

264-
## License
291+
## 📝 License
265292

266293
Copyright &copy; 2023 [Lukas Bartak](http://bartweb.cz)
267294

0 commit comments

Comments
 (0)