Please refer to `ApplicationConfiguration.Response` type for all the properties you can get with `getOne` and `getDeep`. It can be found in the [application-configuration.ts file](https://github.com/abpframework/abp/blob/dev/npm/ng-packs/packages/core/src/lib/models/application-configuration.ts#L4).
Please refer to `ApplicationConfigurationDto` type for all the properties you can get with `getOne` and `getDeep`. It can be found in the [models.ts file](https://github.com/abpframework/abp/blob/dev/npm/ng-packs/packages/core/src/lib/proxy/volo/abp/asp-net-core/mvc/application-configurations/models.ts#L11).
You can use the `ConfirmationService` in @abp/ng.theme.shared package to display a confirmation popup by placing at the root level in your project.
## Getting Started
You do not have to provide the `ConfirmationService` at module or component level, because it is already **provided in root**. You can inject and start using it immediately in your components, directives, or services.
```js
import { ConfirmationService } from '@abp/ng.theme.shared';
@ -26,7 +24,7 @@ You can use the `success`, `warn`, `error`, and `info` methods of `ConfirmationS
- The `ConfirmationService` methods accept three parameters that are `message`, `title`, and `options`.
@ -48,18 +46,16 @@ this.confirmation
});
```
- The `message` and `title` parameters accept a string, localization key or localization object. See the [localization document](./Localization.md)
- `Confirmation.Status` is an enum and has three properties;
- `Confirmation.Status.confirm` is a closing event value that will be emitted when the popup is closed by the confirm button.
- `Confirmation.Status.reject` is a closing event value that will be emitted when the popup is closed by the cancel button.
- `Confirmation.Status.dismiss` is a closing event value that will be emitted when the popup is closed by pressing the escape or clicking the backdrop.
- `Confirmation.Status.confirm` is a closing event value that will be emitted when the popup is closed by the confirm button.
- `Confirmation.Status.reject` is a closing event value that will be emitted when the popup is closed by the cancel button.
- `Confirmation.Status.dismiss` is a closing event value that will be emitted when the popup is closed by pressing the escape or clicking the backdrop.
If you are not interested in the confirmation status, you do not have to subscribe to the returned observable:
```js
this.confirmation.error('You are not authorized.', 'Error');
this.confirmation.error("You are not authorized.", "Error");
```
### How to Display a Confirmation Popup With Given Options
'<spanclass="my-custom-title">Are you sure?</span>',
options,
options
);
```
@ -138,8 +134,7 @@ success(
): Observable<Confirmation.Status>
```
> See the [`Config.LocalizationParam` type](https://github.com/abpframework/abp/blob/master/npm/ng-packs/packages/core/src/lib/models/config.ts#L46) and [`Confirmation` namespace](https://github.com/abpframework/abp/blob/master/npm/ng-packs/packages/theme-shared/src/lib/models/confirmation.ts)
> See the [`LocalizationParam` type](https://github.com/abpframework/abp/blob/master/npm/ng-packs/packages/core/src/lib/models/localization.ts#L6) and [`Confirmation` namespace](https://github.com/abpframework/abp/blob/master/npm/ng-packs/packages/theme-shared/src/lib/models/confirmation.ts)
Every application needs some **environment** variables. In Angular world, this is usually managed by `environment.ts`, `environment.prod.ts` and so on. It is the same for ABP as well.
Every application needs some **environment** variables. In Angular world, this is usually managed by `environment.ts`, `environment.prod.ts` and so on. It is the same for ABP as well.
Current `Environment` configuration holds sub config classes as follows:
@ -30,7 +30,7 @@ export interface ApiConfig {
```
Api config has to have a default config and it may have some additional ones for different modules.
I.e. you may want to connect to different Apis for different modules.
I.e. you may want to connect to different Apis for different modules.
Take a look at following example
@ -39,35 +39,34 @@ Take a look at following example
// ...
"apis": {
"default": {
"url": "https://localhost:8080",
"url": "https://localhost:8080"
},
"AbpIdentity": {
"url": "https://localhost:9090",
"url": "https://localhost:9090"
}
},
}
// ...
}
```
When an api from `AbpIdentity` is called, the request will be sent to `"https://localhost:9090"`.
When an api from `AbpIdentity` is called, the request will be sent to `"https://localhost:9090"`.
Everything else will be sent to `"https://localhost:8080"`
*`rootNamespace`**(new)** : Root namespace of the related API. e.g. Acme.BookStore
-`rootNamespace`**(new)** : Root namespace of the related API. e.g. Acme.BookStore
## Application
```js
export interface Application {
export interface Application {
name: string;
baseUrl?: string;
logoUrl?: string;
}
```
* `name`: Name of the backend Application. It is also used by `logo.component` if `logoUrl` is not provided.
* `logoUrl`: Url of the application logo. It is used by `logo.component`
* `url`*: Required. The url to be used to retrieve environment config
* `mergeStrategy`*: Required. Defines how the local and the remote `environment` json will be merged
*`deepmerge`: Both local and remote `environment` json will be merged recursively. If both configs have same nested path, the remote `environment` will be prioritized.
*`overwrite`: Remote `environment` will be used and local environment will be ignored.
*`customMergeFn`: You can also provide your own merge function as shown in the example. It will take two parameters, `localEnv: Partial<Config.Environment>` and `remoteEnv` and it needs to return a `Config.Environment` object.
*`method`: HTTP method to be used when retrieving environment config. Default: `GET`
*`headers`: If extra headers are needed for the request, it can be set through this field.
- `url` \*: Required. The url to be used to retrieve environment config
- `mergeStrategy` \*: Required. Defines how the local and the remote `environment` json will be merged
-`deepmerge`: Both local and remote `environment` json will be merged recursively. If both configs have same nested path, the remote `environment` will be prioritized.
-`overwrite`: Remote `environment` will be used and local environment will be ignored.
-`customMergeFn`: You can also provide your own merge function as shown in the example. It will take two parameters, `localEnv: Partial<Config.Environment>` and `remoteEnv` and it needs to return a `Config.Environment` object.
-`method`: HTTP method to be used when retrieving environment config. Default: `GET`
-`headers`: If extra headers are needed for the request, it can be set through this field.
## EnvironmentService
` EnvironmentService` is a singleton service, i.e. provided in root level of your application, and keeps the environment in the internal store.
` EnvironmentService` is a singleton service, i.e. provided in root level of your application, and keeps the environment in the internal store.
### Before Use
@ -124,7 +122,6 @@ class DemoComponent {
You do not have to provide the `EnvironmentService` at module or component/directive level, because it is already **provided in root**.
### Get Methods
`EnvironmentService` has numerous get methods which allow you to get a specific value or all environment object.
@ -141,9 +138,9 @@ You can use the `getEnvironment` or `getEnvironment$` method of `EnvironmentServ
This method returns the `url` of a specific API based on the key given as its only parameter. If there is no key, `'default'` is used.
#### How to Set the Environment
`EnvironmentService` has a method named `setState` which allows you to set the state value.
@ -178,4 +174,4 @@ Note that **you do not have to call this method at application initiation**, bec
#### Environment Properties
Please refer to `Environment` type for all the properties. It can be found in the [config.ts file](https://github.com/abpframework/abp/blob/dev/npm/ng-packs/packages/core/src/lib/models/config.ts#L13).
Please refer to `Environment` type for all the properties. It can be found in the [environment.ts file](https://github.com/abpframework/abp/blob/dev/npm/ng-packs/packages/core/src/lib/models/environment.ts#L4).
You can use the `ToasterService` in @abp/ng.theme.shared package to display messages in an overlay by placing at the root level in your project.
## Getting Started
You do not have to provide the `ToasterService` at module or component level, because it is already **provided in root**. You can inject and start using it immediately in your components, directives, or services.
```js
import { ToasterService } from '@abp/ng.theme.shared';
@ -26,7 +24,7 @@ You can use the `success`, `warn`, `error`, and `info` methods of `ToasterServic
### How to Display a Toast Overlay
```js
this.toaster.success('Message', 'Title');
this.toaster.success("Message", "Title");
```
- The `ToasterService` methods accept three parameters that are `message`, `title`, and `options`.
@ -72,12 +70,11 @@ With the options above, the toast overlay looks like this:
The open toast overlay can be removed manually via the `remove` method by passing the `id` of toast:
The all open toasts can be removed manually via the `clear` method:
@ -85,11 +82,13 @@ The all open toasts can be removed manually via the `clear` method:
```js
this.toaster.clear();
```
## Replacing ToasterService with 3rd party toaster libraries
If you want the ABP Framework to utilize 3rd party libraries for the toasters instead of the built-in one, you can provide a service that implements `Toaster.Service` interface, and provide it as follows (ngx-toastr library used in example):
> You can use *LocalizationService* for toaster messages translations.
> You can use _LocalizationService_ for toaster messages translations.
```js
// your-custom-toaster.service.ts
import { Injectable } from '@angular/core';
@ -167,6 +166,7 @@ export class CustomToasterService implements Toaster.Service {
}
}
```
```js
// app.module.ts
@ -178,10 +178,11 @@ import { ToasterService } from '@abp/ng.theme.shared';
{
provide: ToasterService,
useClass: CustomToasterService,
},
},
]
})
```
## API
### success
@ -197,8 +198,7 @@ success(
- `Config` namespace can be imported from `@abp/ng.core`.
- `Toaster` namespace can be imported from `@abp/ng.theme.shared`.
> See the [`Config.LocalizationParam` type](https://github.com/abpframework/abp/blob/master/npm/ng-packs/packages/core/src/lib/models/config.ts#L46) and [`Toaster` namespace](https://github.com/abpframework/abp/blob/master/npm/ng-packs/packages/theme-shared/src/lib/models/toaster.ts)
> See the [`LocalizationParam` type](https://github.com/abpframework/abp/blob/master/npm/ng-packs/packages/core/src/lib/models/localization.ts#L6) and [`Toaster` namespace](https://github.com/abpframework/abp/blob/master/npm/ng-packs/packages/theme-shared/src/lib/models/toaster.ts)
muhammedaltug
4 years ago