refactor: change the permission directive usage

#6273

npm/ng-packs/packages/identity/src/lib/components/roles/roles.component.html

@@ -51,14 +51,15 @@
               >
                 {{ 'AbpIdentity::Permissions' | abpLocalization }}
               </button>
-              <button
+              <ng-container *ngIf="!row.isStatic">
-                *ngIf="!row.isStatic"
+                <button
-                [abpPermission]="'AbpIdentity.Roles.Delete'"
+                  *abpPermission="'AbpIdentity.Roles.Delete'"
-                ngbDropdownItem
+                  ngbDropdownItem
-                (click)="delete(row.id, row.name)"
+                  (click)="delete(row.id, row.name)"
-              >
+                >
-                {{ 'AbpIdentity::Delete' | abpLocalization }}
+                  {{ 'AbpIdentity::Delete' | abpLocalization }}
-              </button>
+                </button>
+              </ng-container>
             </div>
           </div>
         </ng-template>

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

@@ -16,20 +16,21 @@
       <div class="row">
         <div class="col-12 col-md-3">
           <ul class="nav flex-column nav-pills" id="nav-tab" role="tablist">
-            <li
+            <ng-container *abpFor="let setting of settings; trackBy: trackByFn">
-              *abpFor="let setting of settings; trackBy: trackByFn"
+              <li
-              (click)="selected = setting"
+                (click)="selected = setting"
-              class="nav-item pointer"
+                class="nav-item pointer"
-              [abpPermission]="setting.requiredPolicy"
+                *abpPermission="setting.requiredPolicy"
-            >
-              <a
-                class="nav-link"
-                [id]="setting.name + '-tab'"
-                role="tab"
-                [class.active]="setting.name === selected.name"
-                >{{ setting.name | abpLocalization }}</a
               >
-            </li>
+                <a
+                  class="nav-link"
+                  [id]="setting.name + '-tab'"
+                  role="tab"
+                  [class.active]="setting.name === selected.name"
+                  >{{ setting.name | abpLocalization }}</a
+                >
+              </li>
+            </ng-container>
           </ul>
         </div>
         <div class="col-12 col-md-9">

npm/ng-packs/packages/theme-basic/src/lib/components/nav-items/nav-items.component.html

@@ -1,18 +1,16 @@
 <ul class="navbar-nav">
   <ng-container *ngFor="let item of navItems.items$ | async; trackBy: trackByFn">
-    <li
+    <ng-container *ngIf="item.visible()">
-      class="nav-item d-flex align-items-center"
+      <li class="nav-item d-flex align-items-center" *abpPermission="item.requiredPolicy">
-      *ngIf="item.visible()"
+        <ng-container
-      [abpPermission]="item.requiredPolicy"
+          *ngIf="item.component; else htmlTemplate"
-    >
+          [ngComponentOutlet]="item.component"
-      <ng-container
+        ></ng-container>
-        *ngIf="item.component; else htmlTemplate"
-        [ngComponentOutlet]="item.component"
-      ></ng-container>
 
-      <ng-template #htmlTemplate>
+        <ng-template #htmlTemplate>
-        <div [innerHTML]="item.html" (click)="item.action ? item.action() : null"></div>
+          <div [innerHTML]="item.html" (click)="item.action ? item.action() : null"></div>
-      </ng-template>
+        </ng-template>
-    </li>
+      </li>
+    </ng-container>
   </ng-container>
 </ul>

npm/ng-packs/packages/theme-basic/src/lib/components/routes/routes.component.html

@@ -16,37 +16,40 @@
   </ng-template>
 
   <ng-template #dropdownLink let-route>
-    <li
+    <ng-container *ngIf="route.children?.length">
-      #navbarRootDropdown
+      <li
-      class="nav-item dropdown"
+        #navbarRootDropdown
-      display="static"
+        class="nav-item dropdown"
-      *ngIf="route.children?.length"
+        display="static"
-      [abpPermission]="route.requiredPolicy"
+        *abpPermission="route.requiredPolicy"
-      (click)="
+        (click)="
-        navbarRootDropdown.expand
+          navbarRootDropdown.expand
-          ? (navbarRootDropdown.expand = false)
+            ? (navbarRootDropdown.expand = false)
-          : (navbarRootDropdown.expand = true)
+            : (navbarRootDropdown.expand = true)
-      "
+        "
-    >
-      <a
-        class="nav-link dropdown-toggle"
-        data-toggle="dropdown"
-        aria-haspopup="true"
-        aria-expanded="false"
-        href="javascript:void(0)"
-      >
-        <i *ngIf="route.iconClass" [ngClass]="route.iconClass"></i>
-        {{ route.name | abpLocalization }}
-      </a>
-      <div
-        #routeContainer
-        class="dropdown-menu border-0 shadow-sm"
-        (click)="$event.preventDefault(); $event.stopPropagation()"
-        [class.d-block]="smallScreen && navbarRootDropdown.expand"
       >
-        <ng-container *ngTemplateOutlet="forTemplate; context: { $implicit: route }"></ng-container>
+        <a
-      </div>
+          class="nav-link dropdown-toggle"
-    </li>
+          data-toggle="dropdown"
+          aria-haspopup="true"
+          aria-expanded="false"
+          href="javascript:void(0)"
+        >
+          <i *ngIf="route.iconClass" [ngClass]="route.iconClass"></i>
+          {{ route.name | abpLocalization }}
+        </a>
+        <div
+          #routeContainer
+          class="dropdown-menu border-0 shadow-sm"
+          (click)="$event.preventDefault(); $event.stopPropagation()"
+          [class.d-block]="smallScreen && navbarRootDropdown.expand"
+        >
+          <ng-container
+            *ngTemplateOutlet="forTemplate; context: { $implicit: route }"
+          ></ng-container>
+        </div>
+      </li>
+    </ng-container>
   </ng-template>
 
   <ng-template #forTemplate let-route>
@@ -74,7 +77,7 @@
       #dropdownSubmenu="ngbDropdown"
       placement="right-top"
       [autoClose]="true"
-      [abpPermission]="child.requiredPolicy"
+      *abpPermission="child.requiredPolicy"
     >
       <div ngbDropdownToggle [class.dropdown-toggle]="false">
         <a

npm/ng-packs/packages/theme-shared/extensions/src/lib/components/extensible-form/extensible-form-prop.component.html

@@ -1,4 +1,4 @@
-<div class="form-group" [abpPermission]="prop.permission" [ngSwitch]="getComponent(prop)">
+<div class="form-group" *abpPermission="prop.permission" [ngSwitch]="getComponent(prop)">
   <ng-template ngSwitchCase="input">
     <label [htmlFor]="prop.id">{{ prop.displayName | abpLocalization }} {{ asterisk }}</label>
     <input

npm/ng-packs/packages/theme-shared/extensions/src/lib/components/extensible-table/extensible-table.component.html

@@ -11,11 +11,7 @@
         *ngTemplateOutlet="actionsTemplate || gridActions; context: { $implicit: row, index: i }"
       ></ng-container>
       <ng-template #gridActions>
-        <abp-grid-actions
+        <abp-grid-actions [index]="i" [record]="row" text="AbpUi::Actions"></abp-grid-actions>
-          [index]="i"
-          [record]="row"
-          text="AbpUi::Actions"
-        ></abp-grid-actions>
       </ng-template>
     </ng-template>
   </ngx-datatable-column>
@@ -28,11 +24,13 @@
       [sortable]="prop.sortable"
     >
       <ng-template let-row="row" let-i="index" ngx-datatable-cell-template>
-        <ng-container [abpPermission]="prop.permission">
+        <ng-container *abpPermission="prop.permission">
           <div
             *ngIf="row['_' + prop.name].visible"
             [innerHTML]="row['_' + prop.name].value | async"
-            (click)="prop.action && prop.action({ getInjected: getInjected, record: row, index: i })"
+            (click)="
+              prop.action && prop.action({ getInjected: getInjected, record: row, index: i })
+            "
             [class.pointer]="prop.action"
           ></div>
         </ng-container>

npm/ng-packs/packages/theme-shared/extensions/src/lib/components/grid-actions/grid-actions.component.html

@@ -24,19 +24,20 @@
 ></ng-container>
 
 <ng-template #btnItem let-action>
-  <button
+  <ng-container *ngIf="action.visible(data)">
-    *ngIf="action.visible(data)"
+    <button
-    ngbDropdownItem
+      ngbDropdownItem
-    [abpPermission]="action.permission"
+      *abpPermission="action.permission"
-    (click)="action.action(data)"
+      (click)="action.action(data)"
-    type="button"
+      type="button"
-    class="{{ actionList.length === 1 ? 'btn btn-primary' : '' }}"
+      class="{{ actionList.length === 1 ? 'btn btn-primary' : '' }}"
-    [class.text-center]="actionList.length === 1"
+      [class.text-center]="actionList.length === 1"
-  >
+    >
-    <i [ngClass]="action.icon" [class.mr-1]="action.icon"></i>
+      <i [ngClass]="action.icon" [class.mr-1]="action.icon"></i>
-    <span *ngIf="action.icon; else ellipsis">{{ action.text | abpLocalization }}</span>
+      <span *ngIf="action.icon; else ellipsis">{{ action.text | abpLocalization }}</span>
-    <ng-template #ellipsis>
+      <ng-template #ellipsis>
-      <div abpEllipsis>{{ action.text | abpLocalization }}</div>
+        <div abpEllipsis>{{ action.text | abpLocalization }}</div>
-    </ng-template>
+      </ng-template>
-  </button>
+    </button>
+  </ng-container>
 </ng-template>

npm/ng-packs/packages/theme-shared/extensions/src/lib/components/page-toolbar/page-toolbar.component.html

@@ -1,18 +1,20 @@
 <div class="row justify-content-end mx-n1" id="AbpContentToolbar">
   <div class="col-auto px-1 pt-2" *ngFor="let action of actionList; trackBy: trackByFn">
-    <ng-container *ngIf="action.visible(data)" [abpPermission]="action.permission">
+    <ng-container *ngIf="action.visible(data)">
-      <ng-container *ngIf="action.component as component; else button">
+      <ng-container *abpPermission="action.permission">
-        <ng-container
+        <ng-container *ngIf="action.component as component; else button">
-          *ngComponentOutlet="component; injector: createInjector(action)"
+          <ng-container
-        ></ng-container>
+            *ngComponentOutlet="component; injector: createInjector(action)"
-      </ng-container>
+          ></ng-container>
+        </ng-container>
 
-      <ng-template #button>
+        <ng-template #button>
-        <button (click)="action.action(data)" type="button" class="btn btn-primary btn-sm">
+          <button (click)="action.action(data)" type="button" class="btn btn-primary btn-sm">
-          <i [ngClass]="action.icon" [class.mr-1]="action.icon"></i>
+            <i [ngClass]="action.icon" [class.mr-1]="action.icon"></i>
-          {{ action.text | abpLocalization }}
+            {{ action.text | abpLocalization }}
-        </button>
+          </button>
-      </ng-template>
+        </ng-template>
+      </ng-container>
     </ng-container>
   </div>
 </div>