Skip to content

Commit

Permalink
add documentation for Title Strategy
Browse files Browse the repository at this point in the history
  • Loading branch information
Sinan997 committed May 16, 2024
1 parent f48f786 commit f073e4f
Show file tree
Hide file tree
Showing 2 changed files with 64 additions and 0 deletions.
60 changes: 60 additions & 0 deletions docs/en/UI/Angular/Title-Strategy-Service.md
Original file line number Diff line number Diff line change
@@ -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`**.
4 changes: 4 additions & 0 deletions docs/en/docs-nav.json
Original file line number Diff line number Diff line change
Expand Up @@ -1188,6 +1188,10 @@
{
"text": "Abp Window Service",
"path": "UI/Angular/Abp-Window-Service.md"
},
{
"text": "Title Strategy",
"path": "UI/Angular/Title-Strategy-Service.md"
}
]
},
Expand Down

0 comments on commit f073e4f

Please sign in to comment.