https://github.com/changhuixu/uiowa-header-demo
An Angular library for common website header, including a UIOWA branding bar and a website nav bar.
https://github.com/changhuixu/uiowa-header-demo
angular header impersonation uiowa uiowa-branding uiowa-header website-nav
Last synced: about 2 months ago
JSON representation
An Angular library for common website header, including a UIOWA branding bar and a website nav bar.
- Host: GitHub
- URL: https://github.com/changhuixu/uiowa-header-demo
- Owner: changhuixu
- Created: 2018-05-07T16:23:40.000Z (over 7 years ago)
- Default Branch: main
- Last Pushed: 2024-07-15T01:59:12.000Z (over 1 year ago)
- Last Synced: 2024-12-12T14:16:54.709Z (10 months ago)
- Topics: angular, header, impersonation, uiowa, uiowa-branding, uiowa-header, website-nav
- Language: TypeScript
- Homepage: https://changhuixu.github.io/uiowa-header-demo/
- Size: 4.24 MB
- Stars: 6
- Watchers: 3
- Forks: 2
- Open Issues: 0
-
Metadata Files:
- Readme: README.md
Awesome Lists containing this project
README
# UIowa Header
An Angular library for common website header, including a UIowa branding bar and a website nav bar. This library also handles impersonation use case.
You might also want to check out libraries [@uiowa/universal-workflow](https://github.com/changhuixu/uiowa-universal-workflow), [@uiowa/spinner](https://github.com/changhuixu/spinner), [session-expiration-alert](https://github.com/changhuixu/session-expiration-alert), [@uiowa/date-range-picker](https://github.com/changhuixu/date-range-picker), [@uiowa/digit-only](https://github.com/changhuixu/ngx-digit-only) and [@uiowa/uiowa-mfk](https://github.com/changhuixu/uiowa-mfk-project).
[](https://github.com/changhuixu/uiowa-header-demo/actions)
[](https://www.npmjs.com/package/@uiowa/uiowa-header)
## [Demo](https://changhuixu.github.io/uiowa-header-demo/)
**v19** Dependencies: Angular >=19
**v17** Dependencies: Angular >=17
**v13** Dependencies: Angular >=13
**v12.1.1** Dependencies: Angular >=12
**v12** Dependencies: Angular >=12, ng-bootstrap >=10, Bootstrap >=4.5 (css)
**v10** Dependencies: Angular >=10, ng-bootstrap >=7, Bootstrap >=4.5 (css)
**v9** Dependencies: Angular >=9, ng-bootstrap >=6, Bootstrap >=4 (css)
**v6 ~ v8** Dependencies: Angular >=6, ng-bootstrap >=2, Bootstrap >=4 (css)
## Library Details
### Models
- `ExternalLink`: static link listed in navigation menu bar. eg, Employee Self Service site link. (Optional)
- `InternalRoute`: route for pages in your app.
- `HeaderUser`: used to display user name and/or original user name when impersonation.
- `BannerLinks`: static link listed in Uiowa branding bar. eg, Employee Self Service site link. Maximum two links. (Optional)
### Features
- Responsive header layout with Hawkeye color styles
- Support custom "top-right" part of Uiowa branding bar. By default, "top-right" part of Uiowa branding bar shows External Links (if any) and Login link or User dropdown button. If you want to customize the "top-right" part, you can provide your content inside of `uiowa-header` tag. eg,
```html
my content
```
- Support application Nav menus with dropdown sub menus, as well as dividers in dropdown menu.
- Provide `LoginService` with default implementations for `login()` and `logout()` methods which correspond to click event from login and logout buttons. By default, you don't need to do extra work for login/logout. The two methods follow .NET Core convention redirect to routes `account\login` and `account\logout`, respectively. `LoginService` has a public member `returnUri` (string, default empty), which is the return uri after login.
If you want to customize login and/or logout process, you can provide your customized service via dependency injection. eg,
```typescript
@NgModule({
imports: [CommonModule, UiowaHeaderModule],
declarations: [...],
providers: [{ provide: LoginService, useClass: HawkIdLoginService }],
exports: [UiowaHeaderModule, ...]
})
export class CoreModule {
constructor(@Optional() @SkipSelf() core: CoreModule) {
if (core) {
throw new Error('Core Module can only be imported to AppModule.');
}
}
}
```
- When user is impersonating and wants to stop impersonation, user dropdown will show a link which would emit a `stopImpersonation` event. You can handle this event accordingly.
- Follow web content accessibility guidelines.