mirror of https://github.com/abpframework/abp.git
2 changed files with 64 additions and 0 deletions
@ -0,0 +1,60 @@ |
|||||
|
# Title Strategy For Angular |
||||
|
|
||||
|
## **ABP has a default title strategy for Angular UI**. |
||||
|
|
||||
|
This strategy is based on the title property. Provide a title property when setting a new route. |
||||
|
**Example:** |
||||
|
|
||||
|
```ts |
||||
|
{ |
||||
|
path: 'customers', |
||||
|
component: CustomersComponent, |
||||
|
title: 'AbpCustomers::Roles' |
||||
|
}, |
||||
|
``` |
||||
|
|
||||
|
**`Note:`** |
||||
|
|
||||
|
- It is better to use localized text in title property. It will be translated by **LocalizationService**. |
||||
|
- **`title`** property is already setted in **ABP internal packages**. |
||||
|
|
||||
|
## How it looks |
||||
|
|
||||
|
You create a new route and provide a **`title`** property, it will look like this **`<title> | <projectName>`** |
||||
|
|
||||
|
### What is `projectName` and How to Customize |
||||
|
|
||||
|
- **`projectName`** is name of your application. By default ABP set's a [**`projectName`**](https://github.com/abpframework/abp/blob/f48f78618a326644843c01424b093f0d79448769/templates/app/aspnet-core/src/MyCompanyName.MyProjectName.Domain.Shared/Localization/MyProjectName/en.json#L4) for your application. This localization text is added for customization, it can be changed for different languages. |
||||
|
|
||||
|
### Disable `projectName` |
||||
|
|
||||
|
- If you dont want to show **`projectName`** in title, you can disable it. |
||||
|
|
||||
|
**app.module.ts** |
||||
|
|
||||
|
```ts |
||||
|
import { DISABLE_PROJECT_NAME } from '@abp/ng.core'; |
||||
|
|
||||
|
providers: [ |
||||
|
..., |
||||
|
{ provide: DISABLE_PROJECT_NAME, useValue: true} |
||||
|
], |
||||
|
``` |
||||
|
|
||||
|
- Now only title will be shown. |
||||
|
|
||||
|
## Override ABP's Default Title Strategy |
||||
|
|
||||
|
**app.module.ts** |
||||
|
|
||||
|
```ts |
||||
|
import { TitleStrategy } from '@angular/router'; |
||||
|
import { YourCustomStrategy } from './title-strategy.service.ts'; |
||||
|
|
||||
|
providers: [ |
||||
|
..., |
||||
|
{ provide: TitleStrategy, useExisting: YourCustomStrategy }, |
||||
|
], |
||||
|
``` |
||||
|
|
||||
|
- You can check [Angular Documentation](https://angular.io/api/router/TitleStrategy) to write custom **`TitleStrategy`**. |
||||
Loading…
Reference in new issue