diff --git a/docs/en/UI/Angular/Page-Component.md b/docs/en/UI/Angular/Page-Component.md index a019990be1..3c9e557176 100644 --- a/docs/en/UI/Angular/Page-Component.md +++ b/docs/en/UI/Angular/Page-Component.md @@ -1,8 +1,8 @@ # Page Component -ABP provides a component that wraps your content with some built-in components to recude the amount of code you need to write. +ABP provides a component that wraps your content with some built-in components to reduce the amount of code you need to write. -If the template of a component looks like as follows, you can utilize the `abp-page` components. +If the template of a component looks as follows, you can utilize the `abp-page` component. E.g. @@ -22,13 +22,21 @@ E.g.
- +
``` ## Page Parts -PageComponent divides the template shown above into three parts, `title`, `breadcrumb`, `toolbar`. Each can be configured separately. +PageComponent divides the template shown above into three parts, `title`, `breadcrumb`, `toolbar`. Each can be configured separately. There, also, is an enum exported from the package that describes each part. + +```javascript +export enum PageParts { + title = 'PageTitleContainerComponent', + breadcrumb = 'PageBreadcrumbContainerComponent', + toolbar = 'PageToolbarContainerComponent', +} +``` ## Usage @@ -65,7 +73,7 @@ And change the template of `app.component.ts` to the following: ## Overriding template -If you need to replace the template of any part, you can use following sub components. +If you need to replace the template of any part, you can use the following sub-components. ```html @@ -111,15 +119,7 @@ It also can take a context input as follows: ``` -```javascript -enum PageParts { - title = 'PageTitleContainerComponent', - breadcrumb = 'PageBreadcrumbContainerComponent', - toolbar = 'PageToolbarContainerComponent', -} -``` - -It's render strategy can be provided through Angular's Depedency Injection system. +Its render strategy can be provided through Angular's Dependency Injection system. It expects a service through the `PAGE_RENDER_STRATEGY` injection token that implements the following interface. @@ -132,11 +132,11 @@ interface PageRenderStrategy { } ``` -* `shouldRender` (required): It takes a string input named `type` and expects a `boolean` or `Observable`. +* `shouldRender` (required): It takes a string input named `type` and expects a `boolean` or `Observable` in return. * `onInit` (optional): Will be called when the directive is initiated. Three inputs will be passed into this method. * `type`: type of the page part * `injector`: injector of the directive which could be used to retrieve anything from directive's DI tree. - * `context`: whatever context is available at initialization phase. + * `context`: whatever context is available at the initialization phase. * `onDestroy` (optional): Will be called when the directive is destroyed. The parameters are the same with `onInit` * `onContextUpdate` (optional): Will be called when the context is updated. * `change`: changes of the `context` will be passed through this method. @@ -153,7 +153,7 @@ import {  @Injectable() export class MyPageRenderStrategy implements PageRenderStrategy { shouldRender(type: string) { - // meaning everything but breadcrumb will be rendered + // meaning everything but breadcrumb and custom-part will be rendered return type !== PageParts.breadcrumb && type !== 'custom-part'; } @@ -209,3 +209,7 @@ export class AppComponent {} }) export class AppModule {} ``` + +## See Also + +- [Page Toolbar Extensions for Angular UI](./Page-Page-Toolbar-Extensions.md)