(MAT_DIALOG_DATA); + private readonly fb = inject(FormBuilder); + public form: FormGroup; - constructor( - public dialogRef: MatDialogRef, - @Inject(MAT_DIALOG_DATA) public data: Article, - private readonly fb: FormBuilder, - ) { + constructor() { + const data = this.data; + this.form = this.fb.group({ uid: this.fb.control(data.uid, [Validators.required]), title: this.fb.control(data.title, [Validators.required]), diff --git a/apps/ngxs-demo/src/count/count-sub.state.ts b/apps/ngxs-demo/src/count/count-sub.state.ts index 577790b5b..be7dfd70a 100644 --- a/apps/ngxs-demo/src/count/count-sub.state.ts +++ b/apps/ngxs-demo/src/count/count-sub.state.ts @@ -25,7 +25,9 @@ import {CountModel} from './count-model'; export class CountSubState extends NgxsImmutableDataRepository { @Debounce() @DataAction() - public setDebounceSubValue(@Payload('value') @Named('val') value: number): void { - this.ctx.setState({val: value}); + public setDebounceSubValue( + @Payload('value') @Named('val') value: number | string, + ): void { + this.ctx.setState({val: parseFloat(value as string) || 0}); } } diff --git a/apps/ngxs-demo/src/count/count.component.html b/apps/ngxs-demo/src/count/count.component.html index a60d1a357..deaf4ee24 100644 --- a/apps/ngxs-demo/src/count/count.component.html +++ b/apps/ngxs-demo/src/count/count.component.html @@ -11,7 +11,7 @@ CountState -PS: CountSubState will be persistence in sessionStorage +PS: CountSubState will be persisted in sessionStorage @@ -29,10 +29,30 @@ CountState Actions: -increment -countSubIncrement -decrement -reset + + increment + + + countSubIncrement + + + decrement + + + reset + diff --git a/apps/ngxs-demo/src/count/count.component.ts b/apps/ngxs-demo/src/count/count.component.ts index 42a322390..3611b8da6 100644 --- a/apps/ngxs-demo/src/count/count.component.ts +++ b/apps/ngxs-demo/src/count/count.component.ts @@ -1,16 +1,17 @@ -import {ChangeDetectionStrategy, Component} from '@angular/core'; +import {AsyncPipe, JsonPipe} from '@angular/common'; +import {ChangeDetectionStrategy, Component, inject} from '@angular/core'; +import {FormsModule} from '@angular/forms'; import {CountState} from './count.state'; import {CountSubState} from './count-sub.state'; @Component({ selector: 'count', + imports: [AsyncPipe, FormsModule, JsonPipe], templateUrl: './count.component.html', changeDetection: ChangeDetectionStrategy.OnPush, }) export class CountComponent { - constructor( - public counter: CountState, - public subCount: CountSubState, - ) {} + public counter = inject(CountState); + public subCount = inject(CountSubState); } diff --git a/apps/ngxs-demo/src/count/count.module.ts b/apps/ngxs-demo/src/count/count.module.ts deleted file mode 100644 index 6fef8880a..000000000 --- a/apps/ngxs-demo/src/count/count.module.ts +++ /dev/null @@ -1,20 +0,0 @@ -import {CommonModule} from '@angular/common'; -import {NgModule} from '@angular/core'; -import {FormsModule} from '@angular/forms'; -import {RouterModule} from '@angular/router'; -import {NgxsModule} from '@ngxs/store'; - -import {CountComponent} from './count.component'; -import {CountState} from './count.state'; -import {CountSubState} from './count-sub.state'; - -@NgModule({ - imports: [ - CommonModule, - FormsModule, - NgxsModule.forFeature([CountState, CountSubState]), - RouterModule.forChild([{path: '', component: CountComponent}]), - ], - declarations: [CountComponent], -}) -export class CountModule {} diff --git a/apps/ngxs-demo/src/count/count.routes.ts b/apps/ngxs-demo/src/count/count.routes.ts new file mode 100644 index 000000000..3ee0d4f5d --- /dev/null +++ b/apps/ngxs-demo/src/count/count.routes.ts @@ -0,0 +1,16 @@ +import type {Routes} from '@angular/router'; +import {provideStates} from '@ngxs/store'; + +import {CountComponent} from './count.component'; +import {CountState} from './count.state'; +import {CountSubState} from './count-sub.state'; + +const routes: Routes = [ + { + path: '', + component: CountComponent, + providers: [provideStates([CountState, CountSubState])], + }, +]; + +export default routes; diff --git a/apps/ngxs-demo/src/person/person.component.html b/apps/ngxs-demo/src/person/person.component.html index 1d2d82dec..c570fda42 100644 --- a/apps/ngxs-demo/src/person/person.component.html +++ b/apps/ngxs-demo/src/person/person.component.html @@ -1,5 +1,5 @@ Person state - - {{ person.title }} - {{ person.description }} - +@if (person.state$ | async; as person) { + + {{ person.title }} + {{ person.description }} + +} diff --git a/apps/ngxs-demo/src/person/person.component.ts b/apps/ngxs-demo/src/person/person.component.ts index 55ea91bbf..7e2db376d 100644 --- a/apps/ngxs-demo/src/person/person.component.ts +++ b/apps/ngxs-demo/src/person/person.component.ts @@ -1,12 +1,14 @@ -import {ChangeDetectionStrategy, Component} from '@angular/core'; +import {AsyncPipe} from '@angular/common'; +import {ChangeDetectionStrategy, Component, inject} from '@angular/core'; import {PersonState} from './person.state'; @Component({ selector: 'person', + imports: [AsyncPipe], templateUrl: './person.component.html', changeDetection: ChangeDetectionStrategy.OnPush, }) export class PersonComponent { - constructor(public person: PersonState) {} + public person = inject(PersonState); } diff --git a/apps/ngxs-demo/src/person/person.module.ts b/apps/ngxs-demo/src/person/person.module.ts deleted file mode 100644 index 6d5c7653e..000000000 --- a/apps/ngxs-demo/src/person/person.module.ts +++ /dev/null @@ -1,30 +0,0 @@ -import {CommonModule} from '@angular/common'; -import {HttpClientModule} from '@angular/common/http'; -import {NgModule} from '@angular/core'; -import {RouterModule} from '@angular/router'; -import {NgxsModule} from '@ngxs/store'; - -import {PersonComponent} from './person.component'; -import {PersonResolver} from './person.resolver'; -import {PersonService} from './person.service'; -import {PersonState} from './person.state'; - -@NgModule({ - imports: [ - CommonModule, - HttpClientModule, - NgxsModule.forFeature([PersonState]), - RouterModule.forChild([ - { - path: '', - component: PersonComponent, - resolve: { - content: PersonResolver, - }, - }, - ]), - ], - declarations: [PersonComponent], - providers: [PersonResolver, PersonService], -}) -export class PersonModule {} diff --git a/apps/ngxs-demo/src/person/person.resolver.ts b/apps/ngxs-demo/src/person/person.resolver.ts index cfa1533df..f72cf14ab 100644 --- a/apps/ngxs-demo/src/person/person.resolver.ts +++ b/apps/ngxs-demo/src/person/person.resolver.ts @@ -1,15 +1,8 @@ -import {Injectable} from '@angular/core'; -import {Resolve} from '@angular/router'; -import {Observable} from 'rxjs'; +import {inject} from '@angular/core'; +import type {ResolveFn} from '@angular/router'; import {PersonState} from './person.state'; -import {PersonModel} from './person-model'; +import type {PersonModel} from './person-model'; -@Injectable() -export class PersonResolver implements Resolve { - constructor(private readonly personState: PersonState) {} - - public resolve(): Observable { - return this.personState.getContent(); - } -} +export const personResolver: ResolveFn = () => + inject(PersonState).getContent(); diff --git a/apps/ngxs-demo/src/person/person.routes.ts b/apps/ngxs-demo/src/person/person.routes.ts new file mode 100644 index 000000000..b9877a684 --- /dev/null +++ b/apps/ngxs-demo/src/person/person.routes.ts @@ -0,0 +1,17 @@ +import type {Routes} from '@angular/router'; +import {provideStates} from '@ngxs/store'; + +import {PersonComponent} from './person.component'; +import {personResolver} from './person.resolver'; +import {PersonState} from './person.state'; + +const routes: Routes = [ + { + path: '', + component: PersonComponent, + providers: [provideStates([PersonState])], + resolve: {content: personResolver}, + }, +]; + +export default routes; diff --git a/apps/ngxs-demo/src/person/person.service.ts b/apps/ngxs-demo/src/person/person.service.ts index 09af96841..e907ba563 100644 --- a/apps/ngxs-demo/src/person/person.service.ts +++ b/apps/ngxs-demo/src/person/person.service.ts @@ -1,13 +1,15 @@ import {HttpClient} from '@angular/common/http'; -import {Injectable} from '@angular/core'; +import {inject, Injectable} from '@angular/core'; import {Observable} from 'rxjs'; import {map} from 'rxjs/operators'; import {PersonModel} from './person-model'; -@Injectable() +@Injectable({ + providedIn: 'root', +}) export class PersonService { - constructor(private readonly httpService: HttpClient) {} + private readonly httpService = inject(HttpClient); public fetchAll(): Observable { return this.httpService diff --git a/apps/ngxs-demo/src/person/person.state.ts b/apps/ngxs-demo/src/person/person.state.ts index 6b3b3128c..e8af3f491 100644 --- a/apps/ngxs-demo/src/person/person.state.ts +++ b/apps/ngxs-demo/src/person/person.state.ts @@ -1,4 +1,4 @@ -import {Injectable} from '@angular/core'; +import {inject, Injectable} from '@angular/core'; import {StateRepository} from '@angular-ru/ngxs/decorators'; import {NgxsImmutableDataRepository} from '@angular-ru/ngxs/repositories'; import {State} from '@ngxs/store'; @@ -15,9 +15,7 @@ import {PersonModel} from './person-model'; }) @Injectable() export class PersonState extends NgxsImmutableDataRepository { - constructor(private readonly personService: PersonService) { - super(); - } + private readonly personService = inject(PersonService); public getContent(): Observable { return this.personService diff --git a/apps/ngxs-demo/src/todo/todo.component.html b/apps/ngxs-demo/src/todo/todo.component.html index 0bcf98248..058bec411 100644 --- a/apps/ngxs-demo/src/todo/todo.component.html +++ b/apps/ngxs-demo/src/todo/todo.component.html @@ -1,5 +1,5 @@ TodoState -PS: TodoState will be persistence in localStorage (ttl: 30sec) +PS: TodoState will be persisted in localStorage (ttl: 30sec) - Add - Reset + + Add + + + Reset + - - {{ todoItem }} - 🗑 - + @for (todoItem of todo.state$ | async; track todoItem; let i = $index) { + + {{ todoItem }} + + 🗑 + + + } diff --git a/apps/ngxs-demo/src/todo/todo.component.ts b/apps/ngxs-demo/src/todo/todo.component.ts index 9a29c60d6..3d892145a 100644 --- a/apps/ngxs-demo/src/todo/todo.component.ts +++ b/apps/ngxs-demo/src/todo/todo.component.ts @@ -1,12 +1,14 @@ -import {ChangeDetectionStrategy, Component} from '@angular/core'; +import {AsyncPipe} from '@angular/common'; +import {ChangeDetectionStrategy, Component, inject} from '@angular/core'; import {TodoState} from './todo.state'; @Component({ selector: 'todo', + imports: [AsyncPipe], templateUrl: './todo.component.html', changeDetection: ChangeDetectionStrategy.OnPush, }) export class TodoComponent { - constructor(public todo: TodoState) {} + public todo = inject(TodoState); } diff --git a/apps/ngxs-demo/src/todo/todo.module.ts b/apps/ngxs-demo/src/todo/todo.module.ts deleted file mode 100644 index 959890a21..000000000 --- a/apps/ngxs-demo/src/todo/todo.module.ts +++ /dev/null @@ -1,19 +0,0 @@ -import {CommonModule} from '@angular/common'; -import {NgModule} from '@angular/core'; -import {MatSnackBarModule} from '@angular/material/snack-bar'; -import {RouterModule} from '@angular/router'; -import {NgxsModule} from '@ngxs/store'; - -import {TodoComponent} from './todo.component'; -import {TodoState} from './todo.state'; - -@NgModule({ - imports: [ - CommonModule, - MatSnackBarModule, - NgxsModule.forFeature([TodoState]), - RouterModule.forChild([{path: '', component: TodoComponent}]), - ], - declarations: [TodoComponent], -}) -export class TodoModule {} diff --git a/apps/ngxs-demo/src/todo/todo.routes.ts b/apps/ngxs-demo/src/todo/todo.routes.ts new file mode 100644 index 000000000..de7b82948 --- /dev/null +++ b/apps/ngxs-demo/src/todo/todo.routes.ts @@ -0,0 +1,15 @@ +import type {Routes} from '@angular/router'; +import {provideStates} from '@ngxs/store'; + +import {TodoComponent} from './todo.component'; +import {TodoState} from './todo.state'; + +const routes: Routes = [ + { + path: '', + component: TodoComponent, + providers: [provideStates([TodoState])], + }, +]; + +export default routes; diff --git a/apps/ngxs-demo/src/todo/todo.state.ts b/apps/ngxs-demo/src/todo/todo.state.ts index 9a8ff5d5e..4dee234fa 100644 --- a/apps/ngxs-demo/src/todo/todo.state.ts +++ b/apps/ngxs-demo/src/todo/todo.state.ts @@ -1,4 +1,4 @@ -import {Injectable} from '@angular/core'; +import {inject, Injectable} from '@angular/core'; import {MatSnackBar} from '@angular/material/snack-bar'; import {Immutable} from '@angular-ru/cdk/typings'; import { @@ -34,11 +34,9 @@ export class TodoState extends NgxsImmutableDataRepository implements NgxsDataAfterExpired, NgxsDataAfterStorageEvent { - public expired$ = new Subject(); + private readonly snackBar = inject(MatSnackBar); - constructor(private readonly snackBar: MatSnackBar) { - super(); - } + public expired$ = new Subject(); @DataAction() public addTodo(@Payload('todo') todo: string): void { diff --git a/apps/ngxs-demo/src/user/user.component.html b/apps/ngxs-demo/src/user/user.component.html index c6cd5ccc5..704edb5ad 100644 --- a/apps/ngxs-demo/src/user/user.component.html +++ b/apps/ngxs-demo/src/user/user.component.html @@ -1,8 +1,12 @@ User state - - {{ user.name }} - {{ user.email }} - +@if (user$ | async; as user) { + + {{ user.name }} + {{ user.email }} + +} -LOADING... +@if ((isLoading$ | async) === true) { + LOADING... +} diff --git a/apps/ngxs-demo/src/user/user.component.ts b/apps/ngxs-demo/src/user/user.component.ts index 5a91f2869..648a63aea 100644 --- a/apps/ngxs-demo/src/user/user.component.ts +++ b/apps/ngxs-demo/src/user/user.component.ts @@ -1,23 +1,24 @@ -import {ChangeDetectionStrategy, Component} from '@angular/core'; -import {Select} from '@ngxs/store'; -import {Observable} from 'rxjs'; +import {AsyncPipe} from '@angular/common'; +import {ChangeDetectionStrategy, Component, inject} from '@angular/core'; +import {Store} from '@ngxs/store'; import {UserState} from './user.state'; -import {UserModel} from './user-model'; @Component({ selector: 'user', + imports: [AsyncPipe], templateUrl: './user.component.html', changeDetection: ChangeDetectionStrategy.OnPush, }) export class UserComponent { - @Select(UserState.getEntity) - public user$!: Observable; + public userState = inject(UserState); - @Select(UserState.isLoading) - public isLoading$!: Observable; + private readonly store = inject(Store); - constructor(public userState: UserState) { + protected user$ = this.store.select(UserState.getEntity); + protected isLoading$ = this.store.select(UserState.isLoading); + + constructor() { // eslint-disable-next-line rxjs/no-ignored-observable this.userState.loadUser(); } diff --git a/apps/ngxs-demo/src/user/user.module.ts b/apps/ngxs-demo/src/user/user.module.ts deleted file mode 100644 index 0cc0a6fd5..000000000 --- a/apps/ngxs-demo/src/user/user.module.ts +++ /dev/null @@ -1,26 +0,0 @@ -import {CommonModule} from '@angular/common'; -import {HttpClientModule} from '@angular/common/http'; -import {NgModule} from '@angular/core'; -import {RouterModule} from '@angular/router'; -import {NgxsModule} from '@ngxs/store'; - -import {UserComponent} from './user.component'; -import {UserService} from './user.service'; -import {UserState} from './user.state'; - -@NgModule({ - imports: [ - CommonModule, - HttpClientModule, - NgxsModule.forFeature([UserState]), - RouterModule.forChild([ - { - path: '', - component: UserComponent, - }, - ]), - ], - declarations: [UserComponent], - providers: [UserService], -}) -export class UserModule {} diff --git a/apps/ngxs-demo/src/user/user.routes.ts b/apps/ngxs-demo/src/user/user.routes.ts new file mode 100644 index 000000000..ae8fa8f64 --- /dev/null +++ b/apps/ngxs-demo/src/user/user.routes.ts @@ -0,0 +1,15 @@ +import type {Routes} from '@angular/router'; +import {provideStates} from '@ngxs/store'; + +import {UserComponent} from './user.component'; +import {UserState} from './user.state'; + +const routes: Routes = [ + { + path: '', + component: UserComponent, + providers: [provideStates([UserState])], + }, +]; + +export default routes; diff --git a/apps/ngxs-demo/src/user/user.service.ts b/apps/ngxs-demo/src/user/user.service.ts index c7ad835a7..06c8e3c2d 100644 --- a/apps/ngxs-demo/src/user/user.service.ts +++ b/apps/ngxs-demo/src/user/user.service.ts @@ -1,14 +1,17 @@ import {HttpClient} from '@angular/common/http'; -import {Injectable} from '@angular/core'; +import {inject, Injectable} from '@angular/core'; import {Observable} from 'rxjs'; import {delay, map} from 'rxjs/operators'; import {UserModel} from './user-model'; -@Injectable() +@Injectable({ + providedIn: 'root', +}) export class UserService { + private readonly httpService = inject(HttpClient); + private readonly SIMULATE_REQUEST_DELAY: number = 2000; - constructor(private readonly httpService: HttpClient) {} public loadUser(): Observable { return this.httpService.get<{data: UserModel}>('/assets/user.json').pipe( diff --git a/apps/ngxs-demo/src/user/user.state.ts b/apps/ngxs-demo/src/user/user.state.ts index b74c85e4e..72baeea5e 100644 --- a/apps/ngxs-demo/src/user/user.state.ts +++ b/apps/ngxs-demo/src/user/user.state.ts @@ -1,4 +1,4 @@ -import {Injectable} from '@angular/core'; +import {inject, Injectable} from '@angular/core'; import {DataAction, StateRepository} from '@angular-ru/ngxs/decorators'; import {NgxsImmutableDataRepository} from '@angular-ru/ngxs/repositories'; import {Selector, State} from '@ngxs/store'; @@ -26,9 +26,7 @@ interface UserStateModel { }) @Injectable() export class UserState extends NgxsImmutableDataRepository { - constructor(private readonly userService: UserService) { - super(); - } + private readonly userService = inject(UserService); @Selector() public static getEntity(state: UserStateModel): UserModel { @@ -40,7 +38,7 @@ export class UserState extends NgxsImmutableDataRepository { return state.loading; } - // Note: Also can be configured globally by providing custom NGXS_DATA_CONFIG + // Note: Also can be configured globally using provideNgxsDataPlugin({subscribeRequired: false}) @DataAction({subscribeRequired: false}) public loadUser(): Observable { this.ctx.patchState({loading: true}); diff --git a/apps/ngxs-demo/styles.scss b/apps/ngxs-demo/styles.scss index 519966e63..e3b9688db 100644 --- a/apps/ngxs-demo/styles.scss +++ b/apps/ngxs-demo/styles.scss @@ -62,7 +62,7 @@ button { position: relative; display: flex; background: #fff; - font-size: 20px; + font-size: 16px; margin: auto; min-height: 40vh; border: 1px solid rgba(0, 0, 0, 0.2); diff --git a/apps/ngxs-demo/tsconfig.app.json b/apps/ngxs-demo/tsconfig.app.json index 5ede5f85d..64c8041c9 100644 --- a/apps/ngxs-demo/tsconfig.app.json +++ b/apps/ngxs-demo/tsconfig.app.json @@ -1,4 +1,10 @@ { "extends": "../../tsconfig.json", - "include": ["main.ts", "polyfills.ts"] + "compilerOptions": { + "types": [] + }, + "include": ["main.ts"], + "angularCompilerOptions": { + "compilationMode": "full" + } } diff --git a/apps/tooltip-demo/main.ts b/apps/tooltip-demo/main.ts index 7f04f8cab..bd35bd4f6 100644 --- a/apps/tooltip-demo/main.ts +++ b/apps/tooltip-demo/main.ts @@ -1,13 +1,8 @@ -import {enableProdMode} from '@angular/core'; -import {platformBrowserDynamic} from '@angular/platform-browser-dynamic'; +import {bootstrapApplication} from '@angular/platform-browser'; -import {environment} from './environments/environment'; -import {AppModule} from './src/app.module'; +import {AppComponent} from './src/app.component'; +import {appConfig} from './src/app.config'; -if (environment.production) { - enableProdMode(); -} - -platformBrowserDynamic() - .bootstrapModule(AppModule, {ngZoneEventCoalescing: true}) - .catch((error: Error): void => console.error(error)); +bootstrapApplication(AppComponent, appConfig).catch((error: unknown) => + console.error(error), +); diff --git a/apps/tooltip-demo/polyfills.ts b/apps/tooltip-demo/polyfills.ts deleted file mode 100644 index 59e6a6b7f..000000000 --- a/apps/tooltip-demo/polyfills.ts +++ /dev/null @@ -1,2 +0,0 @@ -import '@angular-ru/cdk/zone.js/unpatch-zone'; -import 'zone.js'; diff --git a/apps/tooltip-demo/project.json b/apps/tooltip-demo/project.json index bd69b26f1..35ff4bf03 100644 --- a/apps/tooltip-demo/project.json +++ b/apps/tooltip-demo/project.json @@ -6,63 +6,64 @@ "tags": ["apps"], "targets": { "build": { - "executor": "@angular-devkit/build-angular:browser", + "executor": "@angular/build:application", "options": { - "outputPath": "dist/tooltip-demo", - "tsConfig": "apps/tooltip-demo/tsconfig.app.json", - "main": "apps/tooltip-demo/main.ts", + "outputPath": { + "base": "dist/tooltip-demo", + "browser": "" + }, "index": "apps/tooltip-demo/index.html", + "browser": "apps/tooltip-demo/main.ts", + "tsConfig": "apps/tooltip-demo/tsconfig.app.json", + "inlineStyleLanguage": "scss", "assets": ["apps/tooltip-demo/assets"], - "polyfills": "apps/tooltip-demo/polyfills.ts", "styles": [".global/integration-app.style.scss", "apps/tooltip-demo/styles.scss"], - "aot": false, - "vendorChunk": true, - "extractLicenses": false, - "buildOptimizer": false, - "sourceMap": true, - "optimization": false, - "namedChunks": true + "scripts": [], + "stylePreprocessorOptions": { + "includePaths": ["./src"], + "sass": { + "silenceDeprecations": ["import"] + } + } }, "configurations": { "production": { - "fileReplacements": [ + "budgets": [ { - "replace": "apps/tooltip-demo/environments/environment.ts", - "with": "apps/tooltip-demo/environments/environment.prod.ts" + "type": "initial", + "maximumWarning": "1mb", + "maximumError": "2mb" + }, + { + "type": "anyComponentStyle", + "maximumWarning": "6kb" } ], - "optimization": true, "outputHashing": "all", - "sourceMap": false, - "namedChunks": false, - "aot": true, - "extractLicenses": true, - "buildOptimizer": true - }, - "development": { "fileReplacements": [ { - "replace": "apps/flex-layout-demo/environments/environment.ts", - "with": "apps/flex-layout-demo/environments/environment.prod.ts" + "replace": "apps/tooltip-demo/environments/environment.ts", + "with": "apps/tooltip-demo/environments/environment.prod.ts" } - ], - "optimization": false + ] + }, + "development": { + "optimization": false, + "extractLicenses": false, + "sourceMap": true } }, "defaultConfiguration": "production", - "outputs": ["{projectRoot}/dist/tooltip-demo"] + "outputs": ["{options.outputPath}"] }, "serve": { - "executor": "@angular-devkit/build-angular:dev-server", - "options": { - "buildTarget": "tooltip-demo:build" - }, + "executor": "@angular/build:dev-server", "configurations": { "production": { "buildTarget": "tooltip-demo:build:production" }, "development": { - "buildTarget": "development-demo:build:production" + "buildTarget": "tooltip-demo:build:development" } }, "defaultConfiguration": "development" diff --git a/apps/tooltip-demo/src/app-routing.module.ts b/apps/tooltip-demo/src/app-routing.module.ts deleted file mode 100644 index cb7b97ae0..000000000 --- a/apps/tooltip-demo/src/app-routing.module.ts +++ /dev/null @@ -1,37 +0,0 @@ -/* eslint-disable */ -import {NgModule} from '@angular/core'; -import {RouterModule} from '@angular/router'; - -@NgModule({ - imports: [ - RouterModule.forRoot( - [ - { - path: '', - pathMatch: 'full', - redirectTo: 'samples', - }, - { - path: 'samples', - children: [ - { - path: '', - pathMatch: 'full', - redirectTo: 'guide', - }, - { - path: 'guide', - loadChildren: () => - import('./samples/guide/guide.module').then( - (m) => m.GuideModule, - ), - }, - ], - }, - ], - {useHash: true, scrollPositionRestoration: 'enabled'}, - ), - ], - exports: [RouterModule], -}) -export class AppRoutingModule {} diff --git a/apps/tooltip-demo/src/app.component.ts b/apps/tooltip-demo/src/app.component.ts index cf11b2953..0ab16fb6a 100644 --- a/apps/tooltip-demo/src/app.component.ts +++ b/apps/tooltip-demo/src/app.component.ts @@ -1,7 +1,22 @@ import {ChangeDetectionStrategy, Component} from '@angular/core'; +import {MatDivider, MatList, MatListItem} from '@angular/material/list'; +import {MatDrawer, MatDrawerContainer, MatDrawerContent} from '@angular/material/sidenav'; +import {MatToolbar} from '@angular/material/toolbar'; +import {RouterLink, RouterOutlet} from '@angular/router'; @Component({ selector: 'app-root', + imports: [ + MatDivider, + MatDrawer, + MatDrawerContainer, + MatDrawerContent, + MatList, + MatListItem, + MatToolbar, + RouterLink, + RouterOutlet, + ], templateUrl: './app.component.html', changeDetection: ChangeDetectionStrategy.OnPush, }) diff --git a/apps/tooltip-demo/src/app.config.ts b/apps/tooltip-demo/src/app.config.ts new file mode 100644 index 000000000..690d8578b --- /dev/null +++ b/apps/tooltip-demo/src/app.config.ts @@ -0,0 +1,41 @@ +import {provideHttpClient} from '@angular/common/http'; +import type {ApplicationConfig} from '@angular/core'; +import { + provideBrowserGlobalErrorListeners, + provideZonelessChangeDetection, +} from '@angular/core'; +import {provideAnimationsAsync} from '@angular/platform-browser/animations/async'; +import { + PreloadAllModules, + provideRouter, + withComponentInputBinding, + withHashLocation, + withInMemoryScrolling, + withPreloading, + withRouterConfig, +} from '@angular/router'; +import {provideTooltip} from '@angular-ru/cdk/tooltip'; + +import {routes} from './app.routes'; + +export const appConfig: ApplicationConfig = { + providers: [ + provideZonelessChangeDetection(), + provideBrowserGlobalErrorListeners(), + provideRouter( + routes, + withPreloading(PreloadAllModules), + withRouterConfig({ + paramsInheritanceStrategy: 'always', + }), + withComponentInputBinding(), + withInMemoryScrolling({ + scrollPositionRestoration: 'enabled', + }), + withHashLocation(), + ), + provideHttpClient(), + provideAnimationsAsync(), + provideTooltip(), + ], +}; diff --git a/apps/tooltip-demo/src/app.module.ts b/apps/tooltip-demo/src/app.module.ts deleted file mode 100644 index bf8ce82b5..000000000 --- a/apps/tooltip-demo/src/app.module.ts +++ /dev/null @@ -1,27 +0,0 @@ -import {HttpClientModule} from '@angular/common/http'; -import {NgModule} from '@angular/core'; -import {MatListModule} from '@angular/material/list'; -import {MatSidenavModule} from '@angular/material/sidenav'; -import {MatToolbarModule} from '@angular/material/toolbar'; -import {BrowserModule} from '@angular/platform-browser'; -import {BrowserAnimationsModule} from '@angular/platform-browser/animations'; -import {TooltipModule} from '@angular-ru/cdk/tooltip'; - -import {AppComponent} from './app.component'; -import {AppRoutingModule} from './app-routing.module'; - -@NgModule({ - imports: [ - AppRoutingModule, - BrowserAnimationsModule, - BrowserModule, - HttpClientModule, - MatListModule, - MatSidenavModule, - MatToolbarModule, - TooltipModule.forRoot(), - ], - declarations: [AppComponent], - bootstrap: [AppComponent], -}) -export class AppModule {} diff --git a/apps/tooltip-demo/src/app.routes.ts b/apps/tooltip-demo/src/app.routes.ts new file mode 100644 index 000000000..ea3cdb355 --- /dev/null +++ b/apps/tooltip-demo/src/app.routes.ts @@ -0,0 +1,23 @@ +import type {Routes} from '@angular/router'; + +export const routes: Routes = [ + { + path: '', + pathMatch: 'full', + redirectTo: 'samples', + }, + { + path: 'samples', + children: [ + { + path: '', + pathMatch: 'full', + redirectTo: 'guide', + }, + { + path: 'guide', + loadComponent: async () => import('./samples/guide/guide.component'), + }, + ], + }, +]; diff --git a/apps/tooltip-demo/src/samples/guide/guide.component.html b/apps/tooltip-demo/src/samples/guide/guide.component.html index 21f25c794..a6be1250d 100644 --- a/apps/tooltip-demo/src/samples/guide/guide.component.html +++ b/apps/tooltip-demo/src/samples/guide/guide.component.html @@ -76,7 +76,7 @@ With ng-template > Left with HTML - ... + Left html content ➡️