Browse Source

Update Theming.md

pull/11214/head
Mehmet Erim 5 years ago
committed by GitHub
parent
commit
3dda81f88d
No known key found for this signature in database GPG Key ID: 4AEE18F83AFDEB23
  1. 38
      docs/en/UI/Angular/Theming.md

38
docs/en/UI/Angular/Theming.md

@ -204,25 +204,49 @@ constructor(private sessionState: SessionStateService) {
} }
```` ````
##### User Menu ##### User Menu
User menu is a component that can be replaceable. See an example to learn how can you replace it: `UserMenuService` is used to get the user menu's items and render on the dropdown. You can add/update/remove an item by using the service.
**Example: Adding/updating/removing an user menu item**
````ts ````ts
import { eThemeBasicComponents } from '@abp/ng.theme.basic'; import { eUserMenuItems } from '@abp/ng.theme.basic';
import { NavItemsService } from '@abp/ng.theme.shared'; import { UserMenuService } from '@abp/ng.theme.shared';
import { Component } from '@angular/core'; import { Component } from '@angular/core';
import { Router } from '@angular/router';
@Component({/* component metadata */}) @Component({/* component metadata */})
export class AppComponent { export class AppComponent {
constructor(private navItems: NavItemsService) { constructor(private userMenu: UserMenuService, private router: Router) {
this.navItems.patchItem(eThemeBasicComponents.CurrentUser, { component: MyUserMenuComponent }); this.userMenu.addItems([
{
id: 'UserMenu.Reports',
order: 1,
html: `<a class="dropdown-item pointer">Reports</a>`,
action: () => {
this.router.navigateByUrl('/account/reports');
},
},
]);
this.userMenu.patchItem(eUserMenuItems.MyAccount, {
html: `<a class="dropdown-item pointer">My profile</a>`,
});
this.userMenu.removeItem(eUserMenuItems.Logout);
} }
} }
```` ````
[`ConfigStateService`](Config-State-Service.md) service can be used to obtain the `application-configuration` API response (e.g. getting current user or tenant). In the example above, added a new user menu item labeled "Reports", updated the "My account" item HTML content, and removed the "Logout" item.
See the result:
![image](https://user-images.githubusercontent.com/34455572/148387770-5b5e25fb-f855-447c-8ead-c04c69b6d6f7.png)
#### Page Alerts #### Page Alerts
`PageAlertService` service is used to get the current page alerts to render on the layout. See the [Page Alerts](Page-Alerts.md) document to learn more. `PageAlertService` service is used to get the current page alerts to render on the layout. See the [Page Alerts](Page-Alerts.md) document to learn more.

Loading…
Cancel
Save