diff --git a/docs/en/UI/Angular/Component-Replacement.md b/docs/en/UI/Angular/Component-Replacement.md index 0010a30a2f..1b757c7c23 100644 --- a/docs/en/UI/Angular/Component-Replacement.md +++ b/docs/en/UI/Angular/Component-Replacement.md @@ -84,11 +84,10 @@ export class AppComponent { Run the following command in `angular` folder to create a new component called `LogoComponent`. ```bash -yarn ng generate component logo --inlineTemplate --inlineStyle --entryComponent - -# You don't need the --entryComponent option in Angular 9 +yarn ng generate component logo --inlineTemplate --inlineStyle ``` + Open the generated `logo.component.ts` in `src/app/logo` folder and replace its content with the following: ```js @@ -115,7 +114,7 @@ Open `app.component.ts` in `src/app` folder and modify it as shown below: ```js import { ..., ReplaceableComponentsService } from '@abp/ng.core'; // imported ReplaceableComponentsService -import { LogoComponent } from './logo/logo.component'; // imported NavItemsComponent +import { LogoComponent } from './logo/logo.component'; // imported LogoComponent import { eThemeBasicComponents } from '@abp/ng.theme.basic'; // imported eThemeBasicComponents //... @@ -151,36 +150,18 @@ yarn ng generate component routes Open the generated `routes.component.ts` in `src/app/routes` folder and replace its content with the following: ```js -import { ABP } from '@abp/ng.core'; -import { - Component, - HostBinding, - Inject, - Renderer2, - TrackByFunction, - AfterViewInit, -} from '@angular/core'; -import { fromEvent } from 'rxjs'; -import { debounceTime } from 'rxjs/operators'; +import { Component, HostBinding } from '@angular/core'; @Component({ selector: 'app-routes', templateUrl: 'routes.component.html', }) -export class RoutesComponent implements AfterViewInit { +export class RoutesComponent { @HostBinding('class.mx-auto') marginAuto = true; - smallScreen = window.innerWidth < 992; - - constructor(private renderer: Renderer2) {} - - ngAfterViewInit() { - fromEvent(window, 'resize') - .pipe(debounceTime(150)) - .subscribe(() => { - this.smallScreen = window.innerWidth < 992; - }); + get smallScreen() { + return window.innerWidth < 992; } } ``` @@ -310,7 +291,7 @@ Open `app.component.ts` in `src/app` folder and modify it as shown below: ```js import { ..., ReplaceableComponentsService } from '@abp/ng.core'; // imported ReplaceableComponentsService -import { RoutesComponent } from './routes/routes.component'; // imported NavItemsComponent +import { RoutesComponent } from './routes/routes.component'; // imported RoutesComponent import { eThemeBasicComponents } from '@abp/ng.theme.basic'; // imported eThemeBasicComponents //... @@ -347,51 +328,51 @@ Open the generated `nav-items.component.ts` in `src/app/nav-items` folder and re ```js import { - ApplicationConfiguration, AuthService, - ConfigState, + ConfigStateService, + CurrentUserDto, + LanguageInfo, + NAVIGATE_TO_MANAGE_PROFILE, SessionStateService, - SetLanguage, } from '@abp/ng.core'; -import { Component, AfterViewInit } from '@angular/core'; -import { Navigate, RouterState } from '@ngxs/router-plugin'; -import { Select, Store } from '@ngxs/store'; -import { Observable, fromEvent } from 'rxjs'; -import { map, debounceTime } from 'rxjs/operators'; +import { Component, Inject } from '@angular/core'; +import { Observable } from 'rxjs'; +import { map } from 'rxjs/operators'; import snq from 'snq'; @Component({ selector: 'app-nav-items', templateUrl: 'nav-items.component.html', }) -export class NavItemsComponent implements AfterViewInit { - @Select(ConfigState.getOne('currentUser')) - currentUser$: Observable; +export class NavItemsComponent { + currentUser$: Observable = this.configState.getOne$('currentUser'); + selectedTenant$ = this.sessionState.getTenant$(); - @Select(ConfigState.getDeep('localization.languages')) - languages$: Observable; + languages$: Observable = this.configState.getDeep$('localization.languages'); - smallScreen = window.innerWidth < 992; + get smallScreen(): boolean { + return window.innerWidth < 992; + } get defaultLanguage$(): Observable { return this.languages$.pipe( map( languages => snq( - () => languages.find(lang => lang.cultureName === this.selectedLangCulture).displayName, + () => languages.find(lang => lang.cultureName === this.selectedLangCulture).displayName ), - '', - ), + '' + ) ); } - get dropdownLanguages$(): Observable { + get dropdownLanguages$(): Observable { return this.languages$.pipe( map( languages => snq(() => languages.filter(lang => lang.cultureName !== this.selectedLangCulture)), - [], - ), + [] + ) ); } @@ -399,28 +380,23 @@ export class NavItemsComponent implements AfterViewInit { return this.sessionState.getLanguage(); } - constructor(private store: Store, private authService: AuthService, private sessionState: SessionStateService) {} + constructor( + @Inject(NAVIGATE_TO_MANAGE_PROFILE) public navigateToManageProfile, + private configState: ConfigStateService, + private authService: AuthService, + private sessionState: SessionStateService + ) {} - ngAfterViewInit() { - fromEvent(window, 'resize') - .pipe(debounceTime(150)) - .subscribe(() => { - this.smallScreen = window.innerWidth < 992; - }); + onChangeLang(cultureName: string) { + this.sessionState.setLanguage(cultureName); } - onChangeLang(cultureName: string) { - this.store.dispatch(new SetLanguage(cultureName)); + navigateToLogin() { + this.authService.navigateToLogin(); } logout() { - this.authService.logout().subscribe(() => { - this.store.dispatch( - new Navigate(['/'], null, { - state: { redirectUrl: this.store.selectSnapshot(RouterState).state.url }, - }), - ); - }); + this.authService.logout().subscribe(); } } ``` @@ -445,8 +421,14 @@ Open the generated `nav-items.component.html` in `src/app/nav-items` folder and ```html