diff --git a/npm/ng-packs/packages/identity/src/lib/components/roles/roles.component.html b/npm/ng-packs/packages/identity/src/lib/components/roles/roles.component.html
index 99569afefc..53041b6284 100644
--- a/npm/ng-packs/packages/identity/src/lib/components/roles/roles.component.html
+++ b/npm/ng-packs/packages/identity/src/lib/components/roles/roles.component.html
@@ -163,9 +163,39 @@
 </abp-modal>
 
 <abp-permission-management
+  #abpPermissionManagement="abpPermissionManagement"
+  *abpReplaceableTemplate="
+    {
+      inputs: {
+        providerName: { value: 'R' },
+        providerKey: { value: providerKey },
+        visible: { value: visiblePermissions, twoWay: true },
+        hideBadges: { value: true }
+      },
+      outputs: { visibleChange: onVisiblePermissionChange },
+      componentKey: 'PermissionManagement.PermissionManagementComponent'
+    };
+    let init = initTemplate
+  "
+  (abpInit)="init(abpPermissionManagement)"
+>
+</abp-permission-management>
+
+<!-- <abp-permission-management
+  #abpPermissionManagement="abpPermissionManagement"
+  *abpReplaceableTemplate="{
+    inputs: {
+      providerName: { value: 'R' },
+      providerKey: { value: providerKey },
+      visible: { value: visiblePermissions, twoWay: true },
+      hideBadges: { value: true }
+    },
+    outputs: { visibleChange: onVisiblePermissionChange },
+    componentKey: 'PermissionManagement.PermissionManagementComponent'
+  }"
   [(visible)]="visiblePermissions"
-  providerName="R"
   [providerKey]="providerKey"
   [hideBadges]="true"
+  providerName="R"
 >
-</abp-permission-management>
+</abp-permission-management> -->
diff --git a/npm/ng-packs/packages/identity/src/lib/components/roles/roles.component.ts b/npm/ng-packs/packages/identity/src/lib/components/roles/roles.component.ts
index 48bbe5964f..eda7835f45 100644
--- a/npm/ng-packs/packages/identity/src/lib/components/roles/roles.component.ts
+++ b/npm/ng-packs/packages/identity/src/lib/components/roles/roles.component.ts
@@ -49,6 +49,10 @@ export class RolesComponent implements OnInit {
   @ViewChild('formRef', { static: false, read: ElementRef })
   formRef: ElementRef<HTMLFormElement>;
 
+  onVisiblePermissionChange = event => {
+    this.visiblePermissions = event;
+  };
+
   constructor(
     private confirmationService: ConfirmationService,
     private fb: FormBuilder,
diff --git a/npm/ng-packs/packages/identity/src/lib/components/users/users.component.html b/npm/ng-packs/packages/identity/src/lib/components/users/users.component.html
index 41d8244697..fbe24e1442 100644
--- a/npm/ng-packs/packages/identity/src/lib/components/users/users.component.html
+++ b/npm/ng-packs/packages/identity/src/lib/components/users/users.component.html
@@ -12,7 +12,8 @@
           type="button"
           (click)="add()"
         >
-          <i class="fa fa-plus mr-1"></i> <span>{{ 'AbpIdentity::NewUser' | abpLocalization }}</span>
+          <i class="fa fa-plus mr-1"></i>
+          <span>{{ 'AbpIdentity::NewUser' | abpLocalization }}</span>
         </button>
       </div>
     </div>
@@ -59,12 +60,21 @@
           <th>{{ 'AbpIdentity::Actions' | abpLocalization }}</th>
           <th pResizableColumn (click)="sortOrderIcon.sort('userName')">
             {{ 'AbpIdentity::UserName' | abpLocalization }}
-            <abp-sort-order-icon #sortOrderIcon key="userName" [(selectedKey)]="sortKey" [(order)]="sortOrder">
+            <abp-sort-order-icon
+              #sortOrderIcon
+              key="userName"
+              [(selectedKey)]="sortKey"
+              [(order)]="sortOrder"
+            >
             </abp-sort-order-icon>
           </th>
           <th pResizableColumn (click)="sortOrderIcon.sort('email')">
             {{ 'AbpIdentity::EmailAddress' | abpLocalization }}
-            <abp-sort-order-icon key="email" [(selectedKey)]="sortKey" [(order)]="sortOrder"></abp-sort-order-icon>
+            <abp-sort-order-icon
+              key="email"
+              [(selectedKey)]="sortKey"
+              [(order)]="sortOrder"
+            ></abp-sort-order-icon>
           </th>
           <th pResizableColumn (click)="sortOrderIcon.sort('phoneNumber')">
             {{ 'AbpIdentity::PhoneNumber' | abpLocalization }}
@@ -86,7 +96,11 @@
                 <i class="fa fa-cog mr-1"></i>{{ 'AbpIdentity::Actions' | abpLocalization }}
               </button>
               <div ngbDropdownMenu>
-                <button *abpPermission="'AbpIdentity.Users.Update'" ngbDropdownItem (click)="edit(data.id)">
+                <button
+                  *abpPermission="'AbpIdentity.Users.Update'"
+                  ngbDropdownItem
+                  (click)="edit(data.id)"
+                >
                   {{ 'AbpIdentity::Edit' | abpLocalization }}
                 </button>
                 <button
@@ -133,7 +147,13 @@
               <div class="form-group">
                 <label for="user-name">{{ 'AbpIdentity::UserName' | abpLocalization }}</label
                 ><span> * </span>
-                <input type="text" id="user-name" class="form-control" formControlName="userName" autofocus />
+                <input
+                  type="text"
+                  id="user-name"
+                  class="form-control"
+                  formControlName="userName"
+                  autofocus
+                />
               </div>
 
               <div class="form-group">
@@ -142,7 +162,9 @@
               </div>
 
               <div class="form-group">
-                <label for="surname">{{ 'AbpIdentity::DisplayName:Surname' | abpLocalization }}</label>
+                <label for="surname">{{
+                  'AbpIdentity::DisplayName:Surname' | abpLocalization
+                }}</label>
                 <input type="text" id="surname" class="form-control" formControlName="surname" />
               </div>
 
@@ -166,7 +188,12 @@
 
               <div class="form-group">
                 <label for="phone-number">{{ 'AbpIdentity::PhoneNumber' | abpLocalization }}</label>
-                <input type="text" id="phone-number" class="form-control" formControlName="phoneNumber" />
+                <input
+                  type="text"
+                  id="phone-number"
+                  class="form-control"
+                  formControlName="phoneNumber"
+                />
               </div>
 
               <div class="custom-checkbox custom-control mb-2">
@@ -210,7 +237,9 @@
                   [attr.id]="'roles-' + i"
                   [formControl]="roleGroup.controls[roles[i].name]"
                 />
-                <label class="custom-control-label" [attr.for]="'roles-' + i">{{ roles[i].name }}</label>
+                <label class="custom-control-label" [attr.for]="'roles-' + i">{{
+                  roles[i].name
+                }}</label>
               </div>
             </div>
           </ng-template>
@@ -229,5 +258,20 @@
   </ng-template>
 </abp-modal>
 
-<abp-permission-management [(visible)]="visiblePermissions" providerName="U" [providerKey]="providerKey">
+<abp-permission-management
+  #abpPermissionManagement="abpPermissionManagement"
+  *abpReplaceableTemplate="
+    {
+      inputs: {
+        providerName: { value: 'U' },
+        providerKey: { value: providerKey },
+        visible: { value: visiblePermissions, twoWay: true }
+      },
+      outputs: { visibleChange: onVisiblePermissionChange },
+      componentKey: 'PermissionManagement.PermissionManagementComponent'
+    };
+    let init = initTemplate
+  "
+  (abpInit)="init(abpPermissionManagement)"
+>
 </abp-permission-management>
diff --git a/npm/ng-packs/packages/identity/src/lib/components/users/users.component.ts b/npm/ng-packs/packages/identity/src/lib/components/users/users.component.ts
index f258c5147b..a6dccf86b7 100644
--- a/npm/ng-packs/packages/identity/src/lib/components/users/users.component.ts
+++ b/npm/ng-packs/packages/identity/src/lib/components/users/users.component.ts
@@ -69,6 +69,10 @@ export class UsersComponent implements OnInit {
 
   trackByFn: TrackByFunction<AbstractControl> = (index, item) => Object.keys(item)[0] || index;
 
+  onVisiblePermissionChange = event => {
+    this.visiblePermissions = event;
+  };
+
   get roleGroups(): FormGroup[] {
     return snq(() => (this.form.get('roleNames') as FormArray).controls as FormGroup[], []);
   }