You signed in with another tab or window. Reload to refresh your session.You signed out in another tab or window. Reload to refresh your session.You switched accounts on another tab or window. Reload to refresh your session.Dismiss alert
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.
93
70
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).
95
72
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
+
...
97
81
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
+
```
99
93
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.
101
95
102
96
```html
103
97
<ngx-scrolltop></ngx-scrolltop>
104
98
```
105
99
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
+
...
107
110
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
+
```
109
122
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>`, ...)_
**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
119
161
120
162
### Component
121
163
@@ -131,7 +173,7 @@ In **app.component.html** you just need to add your new button. Usually at the e
131
173
132
174
#### Symbol
133
175
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.
135
177
136
178
```html
137
179
<ngx-scrolltop> ↑ </ngx-scrolltop>
@@ -151,7 +193,7 @@ Or you can even use your own components or fonts (e.g. fontAwesome)
|**[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. |
0 commit comments