Merge pull request #8227 from abpframework/feat/8184

feat: improve page component api for ease of use

npm/ng-packs/packages/components/page/src/page.component.html

@@ -1,41 +1,41 @@
 <div class="row entry-row">
-  <ng-container *ngIf="titleVisible">
-    <ng-container *ngIf="customTitle; else defaultTitleTemplate">
-      <ng-content select="abp-page-title-container"></ng-content>
-    </ng-container>
+  <ng-container *ngIf="customTitle; else defaultTitleTemplate">
+    <ng-content select="abp-page-title-container"></ng-content>
   </ng-container>
 
-  <ng-container *ngIf="breadcrumbVisible">
-    <ng-container *ngIf="customBreadcrumb; else defaultBreadcrumbTemplate">
-      <ng-content select="abp-page-breadcrumb-container"></ng-content>
-    </ng-container>
+  <ng-container *ngIf="customBreadcrumb; else defaultBreadcrumbTemplate">
+    <ng-content select="abp-page-breadcrumb-container"></ng-content>
   </ng-container>
 
-  <ng-container *ngIf="toolbarVisible">
-    <ng-container *ngIf="customToolbar; else defaultPageToolbarTemplate">
-      <ng-content select="abp-page-toolbar-container"></ng-content>
-    </ng-container>
+  <ng-container *ngIf="customToolbar; else defaultPageToolbarTemplate">
+    <ng-content select="abp-page-toolbar-container"></ng-content>
   </ng-container>
 </div>
 
 <ng-content></ng-content>
 
 <ng-template #defaultTitleTemplate>
-  <div class="col-auto" *abpPagePart="pageParts.title">
-    <h1 class="content-header-title">
-      {{ title }}
-    </h1>
-  </div>
+  <ng-container *ngIf="title">
+    <div class="col-auto" *abpPagePart="pageParts.title">
+      <h1 class="content-header-title">
+        {{ title }}
+      </h1>
+    </div>
+  </ng-container>
 </ng-template>
 
 <ng-template #defaultBreadcrumbTemplate>
-  <div class="col-lg-auto pl-lg-0" *abpPagePart="pageParts.breadcrumb">
-    <abp-breadcrumb></abp-breadcrumb>
-  </div>
+  <ng-container *ngIf="breadcrumbVisible">
+    <div class="col-lg-auto pl-lg-0" *abpPagePart="pageParts.breadcrumb">
+      <abp-breadcrumb></abp-breadcrumb>
+    </div>
+  </ng-container>
 </ng-template>
 
 <ng-template #defaultPageToolbarTemplate>
-  <div class="col" *abpPagePart="pageParts.toolbar; context: record">
-    <abp-page-toolbar [record]="record"></abp-page-toolbar>
-  </div>
+  <ng-container *ngIf="toolbarVisible">
+    <div class="col" *abpPagePart="pageParts.toolbar; context: toolbarData">
+      <abp-page-toolbar [record]="toolbarData"></abp-page-toolbar>
+    </div>
+  </ng-container>
 </ng-template>

npm/ng-packs/packages/components/page/src/page.component.ts

@@ -13,11 +13,19 @@ import {
 })
 export class PageComponent {
   @Input() title: string;
-  @Input() record: any;
 
-  @Input() titleVisible = true;
-  @Input() breadcrumbVisible = true;
-  @Input() toolbarVisible = true;
+  toolbarVisible = false;
+  _toolbarData: any;
+  @Input('toolbar') set toolbarData(val: any) {
+    this._toolbarData = val;
+    this.toolbarVisible = true;
+  }
+
+  get toolbarData() {
+    return this._toolbarData;
+  }
+
+  @Input('breadcrumb') breadcrumbVisible = true;
 
   pageParts = {
     title: PageParts.title,

npm/ng-packs/packages/setting-management/src/lib/components/setting-management.component.html

@@ -1,4 +1,4 @@
-<abp-page [title]="'AbpSettingManagement::Settings' | abpLocalization" [toolbarVisible]="false">
+<abp-page [title]="'AbpSettingManagement::Settings' | abpLocalization">
   <div id="SettingManagementWrapper">
     <div class="card">
       <div class="card-body">