Open NrujalSharma opened 2 months ago
@Napster2210 Any update on this?
version 17 works just fine with Angular 18
@NrujalSharma Have you checked with ngx-spinner v17 ?
if you are using angular 18 + standalone component, remember to add the provideAnimations
into [project].config.ts
.
ps: just implement this to my angular 18 project
@phken91 I'd appreciate if you could share how you did it. I couldn't make it work for a brand new angular app. I'm on Angular 18.1.0, ngx-spinner 17.0.0
app.config.ts
export const appConfig: ApplicationConfig = {
providers: [
provideZoneChangeDetection({ eventCoalescing: true }),
provideRouter(routes),
provideAnimationsAsync(),
importProvidersFrom(NgxSpinnerModule.forRoot({ type: 'ball-scale-multiple' }))
]
};
angular.json
"styles": [
"src/styles.scss",
"node_modules/ngx-spinner/animations/ball-scale-multiple.css"
],
app.component.ts
@Component({
selector: 'app-root',
standalone: true,
imports: [RouterOutlet],
template: `
<ngx-spinner type="ball-scale-multiple"></ngx-spinner>
<router-outlet />
`,
schemas: [CUSTOM_ELEMENTS_SCHEMA]
})
export class AppComponent implements OnInit {
spinner = inject(NgxSpinnerService);
ngOnInit() {
this.spinner.show();
setTimeout(() => {
this.spinner.hide();
}, 5000);
}
}
What am I missing?
@phken91 I'd appreciate if you could share how you did it. I couldn't make it work for a brand new angular app. I'm on Angular 18.1.0, ngx-spinner 17.0.0
app.config.ts
export const appConfig: ApplicationConfig = { providers: [ provideZoneChangeDetection({ eventCoalescing: true }), provideRouter(routes), provideAnimationsAsync(), importProvidersFrom(NgxSpinnerModule.forRoot({ type: 'ball-scale-multiple' })) ] };
angular.json
"styles": [ "src/styles.scss", "node_modules/ngx-spinner/animations/ball-scale-multiple.css" ],
app.component.ts
@Component({ selector: 'app-root', standalone: true, imports: [RouterOutlet], template: ` <ngx-spinner type="ball-scale-multiple"></ngx-spinner> <router-outlet /> `, schemas: [CUSTOM_ELEMENTS_SCHEMA] }) export class AppComponent implements OnInit { spinner = inject(NgxSpinnerService); ngOnInit() { this.spinner.show(); setTimeout(() => { this.spinner.hide(); }, 5000); } }
What am I missing?
I know what I am missing. It's working now:
in my app component, I just needed to import NgxSpinnerComponent here is the correct version:
import { Component, inject, OnInit } from '@angular/core';
import { RouterOutlet } from '@angular/router';
import { NgxSpinnerService, NgxSpinnerComponent } from 'ngx-spinner';
@Component({
selector: 'app-root',
standalone: true,
imports: [RouterOutlet, NgxSpinnerComponent],
template: `
<ngx-spinner type="ball-scale-multiple"></ngx-spinner>
<router-outlet />
`,
})
export class AppComponent implements OnInit {
spinner = inject(NgxSpinnerService);
ngOnInit() {
this.spinner.show();
setTimeout(() => {
this.spinner.hide();
}, 5000);
}
}
Is your feature request related to a problem? Please describe. For us relying on ngx-spinner and want to upgrade our Angular apps to Angular 18 it's not possible at the moment.
Describe the solution you'd like ngx-spinner support for Angular 18