diff --git a/docs/en/UI/Angular/Config-State.md b/docs/en/UI/Angular/Config-State.md index bda3250b329..0c1070f54dc 100644 --- a/docs/en/UI/Angular/Config-State.md +++ b/docs/en/UI/Angular/Config-State.md @@ -233,4 +233,4 @@ Please refer to `Config.Environment` type for all the properties you can pass to ## What's Next? -- [Modifying the Menu](./Modifying-the-Menu.md) \ No newline at end of file +- [HTTP Requests](./Http-Requests) diff --git a/docs/en/UI/Angular/Content-Projection-Service.md b/docs/en/UI/Angular/Content-Projection-Service.md index db7c52be81e..7e03776835e 100644 --- a/docs/en/UI/Angular/Content-Projection-Service.md +++ b/docs/en/UI/Angular/Content-Projection-Service.md @@ -1,4 +1,4 @@ -# Content Projection +# Projecting Angular Content You can use the `ContentProjectionService` in @abp/ng.core package in order to project content in an easy and explicit way. @@ -75,4 +75,4 @@ projectContent | TemplateRef>( ## What's Next? -- [TrackByService](./Track-By-Service.md) +- [Confirmation Popup](./Confirmation-Service.md) diff --git a/docs/en/UI/Angular/Custom-Setting-Page.md b/docs/en/UI/Angular/Custom-Setting-Page.md index e4ee6d45c2a..9a17f6ad7b2 100644 --- a/docs/en/UI/Angular/Custom-Setting-Page.md +++ b/docs/en/UI/Angular/Custom-Setting-Page.md @@ -35,7 +35,3 @@ export class AppComponent { Navigate to `/setting-management` route to see the changes: ![Custom Settings Tab](./images/custom-settings.png) - -## What's Next? - -- [Lazy Loading Scripts & Styles](./Lazy-Load-Service.md) diff --git a/docs/en/UI/Angular/Dom-Insertion-Service.md b/docs/en/UI/Angular/Dom-Insertion-Service.md index 88f30136b35..d56e4f8b0ea 100644 --- a/docs/en/UI/Angular/Dom-Insertion-Service.md +++ b/docs/en/UI/Angular/Dom-Insertion-Service.md @@ -1,4 +1,4 @@ -# Dom Insertion (of Scripts and Styles) +# Inserting Scripts & Styles to DOM You can use the `DomInsertionService` in @abp/ng.core package in order to insert scripts and styles in an easy and explicit way. @@ -137,4 +137,4 @@ The `has` method returns a boolean value that indicates the given content has al ## What's Next? -- [ContentProjectionService](./Content-Projection-Service.md) +- [Lazy Loading Scripts & Styles](./Lazy-Load-Service.md) diff --git a/docs/en/UI/Angular/Environment.md b/docs/en/UI/Angular/Environment.md index 402e110f942..67fe4eb3151 100644 --- a/docs/en/UI/Angular/Environment.md +++ b/docs/en/UI/Angular/Environment.md @@ -4,7 +4,7 @@ Every application needs some **environment** variables. In Angular world, this i Current `Environment` configuration holds sub config classes as follows: -```typescript +```js export interface Environment { apis: Apis; application: Application; @@ -16,7 +16,7 @@ export interface Environment { ## Apis -```typescript +```js export interface Apis { [key: string]: ApiConfig; default: ApiConfig; @@ -56,7 +56,7 @@ Everything else will be sent to `"https://localhost:8080"` ## Application -```typescript +```js export interface Application { name: string; baseUrl?: string; @@ -80,7 +80,7 @@ Abp Framework supports this out of box. To integrate an existing config json into the `environment`, you need to set `remoteEnv` -```typescript +```js export type customMergeFn = ( localEnv: Partial, remoteEnv: any, @@ -106,4 +106,3 @@ export interface RemoteEnv { ## What's Next? * [Service Proxies](./Service-Proxies.md) - diff --git a/docs/en/UI/Angular/Lazy-Load-Service.md b/docs/en/UI/Angular/Lazy-Load-Service.md index b4eddf7b254..344b446107a 100644 --- a/docs/en/UI/Angular/Lazy-Load-Service.md +++ b/docs/en/UI/Angular/Lazy-Load-Service.md @@ -1,4 +1,4 @@ -# How to Lazy Load Scripts and Styles +# Lazy Loading Scripts & Styles You can use the `LazyLoadService` in @abp/ng.core package in order to lazy load scripts and styles in an easy and explicit way. @@ -210,4 +210,4 @@ load(strategy: LoadingStrategy, retryTimes?: number, retryDelay?: number): Obser ## What's Next? -- [DomInsertionService](./Dom-Insertion-Service.md) +- [Projecting Angular Content](./Content-Projection-Service.md) diff --git a/docs/en/UI/Angular/List-Service.md b/docs/en/UI/Angular/List-Service.md index f65f0db4cd3..f934ec49c21 100644 --- a/docs/en/UI/Angular/List-Service.md +++ b/docs/en/UI/Angular/List-Service.md @@ -177,3 +177,8 @@ As of v3.0, with ngx-datatable, the `page` property has to be set as `0` for ini ``` **Important Note:** The `abp-table` is not removed, but is deprecated and will be removed in the future. Please consider switching to ngx-datatable. + + +## What's Next? + +- [Easy *ngFor trackBy](./Track-By-Service.md) diff --git a/docs/en/UI/Angular/Multi-Tenancy.md b/docs/en/UI/Angular/Multi-Tenancy.md index fb9fb54f76b..c3e54c5f830 100644 --- a/docs/en/UI/Angular/Multi-Tenancy.md +++ b/docs/en/UI/Angular/Multi-Tenancy.md @@ -2,8 +2,8 @@ ABP Angular UI supports the multi-tenancy. The following features related to multi-tenancy are available in the startup templates. - ![Tenants Page](./images/tenants-page.png) +

Tenants page

On the page above, you can; @@ -13,13 +13,12 @@ On the page above, you can; - Edit an existing tenant. - Delete a tenant. - ![Tenant Switching Component](./images/tenant-switching-box.png) +

Tenant Switching Component

You can switch between existing tenants by using the tenant switching component in the child pages of the `AccountLayoutComponent` (like Login page). Angular UI sends the selected tenant id to the backend as `__tenant` header on each request. - ## Domain Tenant Resolver Angular UI can get the tenant name from the app running URL. You can determine the current tenant by subdomain (like mytenant1.mydomain.com) or by the whole domain (like mytenant.com). To do this, you need to set the `application.baseUrl` property in the environment: @@ -32,10 +31,10 @@ Subdomain resolver: export const environment = { //... application: { - baseUrl: 'https://{0}.mydomain.com/' + baseUrl: "https://{0}.mydomain.com/", }, //... -} +}; ``` **{0}** is the placeholder to determine current tenant's unique name. @@ -44,7 +43,6 @@ After the configuration above, if your app runs on the `mytenant1.mydomain.com`, > **Important Note:** If you define the `baseUrl` with the placeholder (**{0}**), the tenant switching component in the child pages of the `AccountLayoutComponent` (like Login page) will be hidden. - Domain resolver: ```js @@ -53,10 +51,10 @@ Domain resolver: export const environment = { //... application: { - baseUrl: 'https://{0}.com/' + baseUrl: "https://{0}.com/", }, //... -} +}; ``` After the configuration above, if your app runs on the `mytenant.com`, the app will get the tenant name as **mytenant**. @@ -71,29 +69,28 @@ The **{0}** placeholder can be put to the API URLs in the environment to determi export const environment = { //... application: { - baseUrl: 'https://{0}.mydomain.com/', + baseUrl: "https://{0}.mydomain.com/", //... }, oAuthConfig: { - issuer: 'https://{0}.ids.mydomain.com', + issuer: "https://{0}.ids.mydomain.com", //... }, apis: { default: { - url: 'https://{0}.api.mydomain.com', + url: "https://{0}.api.mydomain.com", }, AbpIdentity: { - url: 'https://{0}.identity.mydomain.com', + url: "https://{0}.identity.mydomain.com", }, }, -} +}; ``` > **Important Note:** The `application.baseUrl` and the `{0}` placeholder in the value of the `baseUrl` property are required to be able to get tenant from running URL. Other placeholders in API URLs are optional. After the configuration above, if your app runs on the `mytenant1.mydomain.com`, the app will get tenant name as **mytenant1** and replace the environment object in `ConfigState` on app initialization as follows: - ```js // environment object in ConfigState @@ -128,8 +125,8 @@ The app sends the `__tenant` header that contains the current tenant id on each ## See Also -* [Multi Tenancy in ABP](../../Multi-Tenancy.md) +- [Multi Tenancy in ABP](../../Multi-Tenancy.md) ## What's Next? -- [Confirmation Popup](./Confirmation-Service.md) +- [Managing RxJS Subscriptions](./Subscription-Service.md) diff --git a/docs/en/UI/Angular/Quick-Start.md b/docs/en/UI/Angular/Quick-Start.md index e054b522ea2..a58671156cb 100644 --- a/docs/en/UI/Angular/Quick-Start.md +++ b/docs/en/UI/Angular/Quick-Start.md @@ -209,4 +209,4 @@ In addition, you can [deploy your application to certain targets using the Angul ## What's Next? -- [Environment](./Environment.md) +- [Environment Variables](./Environment.md) diff --git a/docs/en/UI/Angular/Service-Proxies.md b/docs/en/UI/Angular/Service-Proxies.md index 7dfb2c052c6..ece959a90d1 100644 --- a/docs/en/UI/Angular/Service-Proxies.md +++ b/docs/en/UI/Angular/Service-Proxies.md @@ -141,4 +141,4 @@ export class BookComponent implements OnInit { ## What's Next? -- [HTTP Requests](./Http-Requests) +- [Config State](./Config-State.md) diff --git a/docs/en/UI/Angular/Subscription-Service.md b/docs/en/UI/Angular/Subscription-Service.md index 5d920df96e5..dee77cbf1ed 100644 --- a/docs/en/UI/Angular/Subscription-Service.md +++ b/docs/en/UI/Angular/Subscription-Service.md @@ -1,4 +1,4 @@ -# Easy Unsubscription for Your Observables +# Managing RxJS Subscriptions `SubscriptionService` is a utility service to provide an easy unsubscription from RxJS observables in Angular components and directives. Please see [why you should unsubscribe from observables on instance destruction](https://angular.io/guide/lifecycle-hooks#cleaning-up-on-instance-destruction). @@ -200,4 +200,4 @@ class DemoComponent implements OnInit { ## What's Next? -- [ListService](./List-Service.md) +- [Working with Lists](./List-Service.md) diff --git a/docs/en/UI/Angular/Toaster-Service.md b/docs/en/UI/Angular/Toaster-Service.md index faa5632ab84..d2c1fc08f3a 100644 --- a/docs/en/UI/Angular/Toaster-Service.md +++ b/docs/en/UI/Angular/Toaster-Service.md @@ -156,4 +156,4 @@ Removes all open toasts. ## What's Next? -- [Config State](./Config-State.md) +- [Modifying the Menu](./Modifying-the-Menu.md) diff --git a/docs/en/UI/Angular/Track-By-Service.md b/docs/en/UI/Angular/Track-By-Service.md index 050706accd6..7883be47540 100644 --- a/docs/en/UI/Angular/Track-By-Service.md +++ b/docs/en/UI/Angular/Track-By-Service.md @@ -1,4 +1,4 @@ -# Easy TrackByFunction Implementation +# Easy *ngFor trackBy `TrackByService` is a utility service to provide an easy implementation for one of the most frequent needs in Angular templates: `TrackByFunction`. Please see [this page in Angular docs](https://angular.io/guide/template-syntax#ngfor-with-trackby) for its purpose. @@ -116,4 +116,4 @@ class DemoComponent { ## What's Next? -- [SubscriptionService](./Subscription-Service.md) +- [Inserting Scripts & Styles to DOM](./Dom-Insertion-Service.md) diff --git a/docs/en/docs-nav.json b/docs/en/docs-nav.json index b395bf67f0e..a70ddea62cc 100644 --- a/docs/en/docs-nav.json +++ b/docs/en/docs-nav.json @@ -436,76 +436,96 @@ "path": "UI/Angular/Quick-Start.md" }, { - "text": "Environment", - "path": "UI/Angular/Environment.md" - }, - { - "text": "Service Proxies", - "path": "UI/Angular/Service-Proxies.md" - }, - { - "text": "HTTP Requests", - "path": "UI/Angular/HTTP-Requests.md" - }, - { - "text": "Localization", - "path": "UI/Angular/Localization.md" - }, - { - "text": "Permission Management", - "path": "UI/Angular/Permission-Management.md" - }, - { - "text": "Multi Tenancy", - "path": "UI/Angular/Multi-Tenancy.md" - }, - { - "text": "Confirmation Popup", - "path": "UI/Angular/Confirmation-Service.md" - }, - { - "text": "Toast Overlay", - "path": "UI/Angular/Toaster-Service.md" - }, - { - "text": "Config State", - "path": "UI/Angular/Config-State.md" - }, - { - "text": "Modifying the Menu", - "path": "UI/Angular/Modifying-the-Menu.md" - }, - { - "text": "Component Replacement", - "path": "UI/Angular/Component-Replacement.md" - }, - { - "text": "Custom Setting Page", - "path": "UI/Angular/Custom-Setting-Page.md" - }, - { - "text": "Lazy Loading Scripts & Styles", - "path": "UI/Angular/Lazy-Load-Service.md" - }, - { - "text": "DomInsertionService", - "path": "UI/Angular/Dom-Insertion-Service.md" - }, - { - "text": "ContentProjectionService", - "path": "UI/Angular/Content-Projection-Service.md" + "text": "Development", + "items": [ + { + "text": "Environment Variables", + "path": "UI/Angular/Environment.md" + }, + { + "text": "Service Proxies", + "path": "UI/Angular/Service-Proxies.md" + } + ] }, { - "text": "TrackByService", - "path": "UI/Angular/Track-By-Service.md" + "text": "Core Functionality", + "items": [ + { + "text": "Config State", + "path": "UI/Angular/Config-State.md" + }, + { + "text": "HTTP Requests", + "path": "UI/Angular/HTTP-Requests.md" + }, + { + "text": "Localization", + "path": "UI/Angular/Localization.md" + }, + { + "text": "Permission Management", + "path": "UI/Angular/Permission-Management.md" + }, + { + "text": "Multi Tenancy", + "path": "UI/Angular/Multi-Tenancy.md" + } + ] }, { - "text": "SubscriptionService", - "path": "UI/Angular/Subscription-Service.md" + "text": "Utilities", + "items": [ + { + "text": "Managing RxJS Subscriptions", + "path": "UI/Angular/Subscription-Service.md" + }, + { + "text": "Working with Lists", + "path": "UI/Angular/List-Service.md" + }, + { + "text": "Easy *ngFor trackBy", + "path": "UI/Angular/Track-By-Service.md" + }, + { + "text": "Inserting Scripts & Styles to DOM", + "path": "UI/Angular/Dom-Insertion-Service.md" + }, + { + "text": "Lazy Loading Scripts & Styles", + "path": "UI/Angular/Lazy-Load-Service.md" + }, + { + "text": "Projecting Angular Content", + "path": "UI/Angular/Content-Projection-Service.md" + }, + { + "text": "Confirmation Popup", + "path": "UI/Angular/Confirmation-Service.md" + }, + { + "text": "Toast Overlay", + "path": "UI/Angular/Toaster-Service.md" + } + ] }, { - "text": "ListService", - "path": "UI/Angular/List-Service.md" + "text": "Customization", + "items": [ + { + "text": "Modifying the Menu", + "path": "UI/Angular/Modifying-the-Menu.md" + }, + { + "text": "Component Replacement", + "path": "UI/Angular/Component-Replacement.md" + }, + { + "text": "Custom Setting Page", + "path": "UI/Angular/Custom-Setting-Page.md" + } + ] } ] },