Update README.md

Author: EliasVal

README.md

@@ -18,42 +18,33 @@ DEMO: https://ngx-toastr.vercel.app
 ## Features
 
 - Toast Component Injection without being passed `ViewContainerRef`
-- No use of `*ngFor`. Fewer dirty checks and higher performance.
+- No use of `@for`. Fewer dirty checks and higher performance
+- No use of `@angular/animations`
 - AoT compilation and lazy loading compatible
 - Component inheritance for custom toasts
 - SystemJS/UMD rollup bundle
-- Animations using Angular's
-  [Web Animations API](https://angular.io/docs/ts/latest/guide/animations.html)
 - Output toasts to an optional target directive
 
 ## Dependencies
 
 Latest version available for each version of Angular
 
-| ngx-toastr | Angular     |
-| ---------- | ----------- |
-| 13.2.1     | 10.x 11.x   |
-| 14.3.0     | 12.x 13.x   |
-| 15.2.2     | 14.x.       |
-| 16.2.0     | 15.x        |
-| 17.0.2     | 16.x        |
-| current    | >= 17.x     |
+| ngx-toastr      | Angular         |
+| --------------- | --------------- |
+| 13.2.1          | 10.x 11.x       |
+| 14.3.0          | 12.x 13.x       |
+| 15.2.2          | 14.x.           |
+| 16.2.0          | 15.x            |
+| 17.0.2          | 16.x            |
+| 18.x 19x        | >= 17.x < 23.x  |
+| current         | >= 20.x         |
 
 ## Install
 
 ```bash
 npm install ngx-toastr --save
 ```
 
-`@angular/animations` package is a required dependency for the default toast
-
-```bash
-npm install @angular/animations --save
-```
-
-Don't want to use `@angular/animations`? See
-[Setup Without Animations](#setup-without-animations).
-
 ## Setup
 
 **step 1:** add css
@@ -91,20 +82,15 @@ Don't want to use `@angular/animations`? See
 ]
 ```
 
-**step 2:** add `ToastrModule` to app `NgModule`, or `provideToastr` to providers, make sure you have `BrowserAnimationsModule` (or `provideAnimations`) as well.
+**step 2:** add `ToastrModule` to app `NgModule`, or `provideToastr` to providers.
 
 - Module based
 
 ```typescript
-import { CommonModule } from '@angular/common';
-import { BrowserAnimationsModule } from '@angular/platform-browser/animations';
-
 import { ToastrModule } from 'ngx-toastr';
 
 @NgModule({
   imports: [
-    CommonModule,
-    BrowserAnimationsModule, // required animations module
     ToastrModule.forRoot(), // ToastrModule added
   ],
   bootstrap: [App],
@@ -117,13 +103,10 @@ class MainModule {}
 
 ```typescript
 import { AppComponent } from './src/app.component';
-import { provideAnimations } from '@angular/platform-browser/animations';
-
 import { provideToastr } from 'ngx-toastr';
 
 bootstrapApplication(AppComponent, {
   providers: [
-    provideAnimations(), // required animations providers
     provideToastr(), // Toastr providers
   ]
 });
@@ -133,10 +116,11 @@ bootstrapApplication(AppComponent, {
 
 ```typescript
 import { ToastrService } from 'ngx-toastr';
+import { inject } from '@angular/core';
 
 @Component({...})
 export class YourComponent {
-  constructor(private toastr: ToastrService) {}
+  toastr = inject(ToastrService);
 
   showSuccess() {
     this.toastr.success('Hello world!', 'Toastr fun!');
@@ -231,8 +215,6 @@ imports: [
 
 ```typescript
 import { AppComponent } from './src/app.component';
-import { provideAnimations } from '@angular/platform-browser/animations';
-
 import { provideToastr } from 'ngx-toastr';
 
 bootstrapApplication(AppComponent, {
@@ -281,20 +263,13 @@ an `aria-live="polite"` attribute, so that any time a toast is injected into
 the container it is announced by screen readers.
 
 ```typescript
-import { BrowserModule } from '@angular/platform-browser';
 import { NgModule } from '@angular/core';
-import { BrowserAnimationsModule } from '@angular/platform-browser/animations';
-
 import { ToastrModule, ToastContainerDirective } from 'ngx-toastr';
-
 import { AppComponent } from './app.component';
 
 @NgModule({
   declarations: [AppComponent],
   imports: [
-    BrowserModule,
-    BrowserAnimationsModule,
-
     ToastrModule.forRoot({ positionClass: 'inline' }),
     ToastContainerDirective,
   ],
@@ -307,8 +282,7 @@ export class AppModule {}
 Add a div with `toastContainer` directive on it.
 
 ```typescript
-import { Component, OnInit, ViewChild } from '@angular/core';
-
+import { Component, OnInit, viewChild, inject } from '@angular/core';
 import { ToastContainerDirective, ToastrService } from 'ngx-toastr';
 
 @Component({
@@ -319,10 +293,9 @@ import { ToastContainerDirective, ToastrService } from 'ngx-toastr';
   `,
 })
 export class AppComponent implements OnInit {
-  @ViewChild(ToastContainerDirective, { static: true })
-  toastContainer: ToastContainerDirective;
+  toastContainer = viewChild(ToastContainerDirective, { static: true });
+  toastrService = inject(ToastrService);
 
-  constructor(private toastrService: ToastrService) {}
   ngOnInit() {
     this.toastrService.overlayContainer = this.toastContainer;
   }
@@ -366,8 +339,8 @@ map: {
 
 ## Setup Without Animations
 
-If you do not want to include `@angular/animations` in your project you can
-override the default toast component in the global config to use
+If you do not want animations you can override the default 
+toast component in the global config to use
 `ToastNoAnimation` instead of the default one.
 
 In your main module (ex: `app.module.ts`)
@@ -378,16 +351,14 @@ import { ToastrModule, ToastNoAnimation, ToastNoAnimationModule } from 'ngx-toas
 @NgModule({
   imports: [
     // ...
-
-    // BrowserAnimationsModule no longer required
     ToastNoAnimationModule.forRoot(),
   ],
   // ...
 })
 class AppModule {}
 ```
 
-That's it! Animations are no longer required.
+That's it! No animations.
 
 ## Using A Custom Toast