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..5c6a38e12c 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
@@ -1,7 +1,7 @@
 import { ABP } from '@abp/ng.core';
 import { ConfirmationService, Toaster } from '@abp/ng.theme.shared';
-import { Component, TemplateRef, ViewChild, OnInit, ContentChild, ElementRef } from '@angular/core';
-import { FormBuilder, FormGroup, Validators, FormControl } from '@angular/forms';
+import { Component, ElementRef, OnInit, ViewChild } from '@angular/core';
+import { FormBuilder, FormControl, FormGroup, Validators } from '@angular/forms';
 import { Select, Store } from '@ngxs/store';
 import { Observable } from 'rxjs';
 import { finalize, pluck } from 'rxjs/operators';
@@ -59,7 +59,7 @@ export class RolesComponent implements OnInit {
     this.get();
   }
 
-  createForm() {
+  buildForm() {
     this.form = this.fb.group({
       name: new FormControl({ value: this.selected.name || '', disabled: this.selected.isStatic }, [
         Validators.required,
@@ -71,7 +71,7 @@ export class RolesComponent implements OnInit {
   }
 
   openModal() {
-    this.createForm();
+    this.buildForm();
     this.isModalVisible = true;
   }
 
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..eab3339318 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,9 @@
   </ng-template>
 </abp-modal>
 
-<abp-permission-management [(visible)]="visiblePermissions" providerName="U" [providerKey]="providerKey">
+<abp-permission-management
+  [(visible)]="visiblePermissions"
+  providerName="U"
+  [providerKey]="providerKey"
+>
 </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..b0cbacb324 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
@@ -1,14 +1,15 @@
 import { ABP, ConfigState } from '@abp/ng.core';
 import { ConfirmationService, Toaster } from '@abp/ng.theme.shared';
-import { Component, TemplateRef, TrackByFunction, ViewChild, OnInit } from '@angular/core';
+import { Component, OnInit, TemplateRef, TrackByFunction, ViewChild } from '@angular/core';
 import {
   AbstractControl,
   FormArray,
   FormBuilder,
+  FormControl,
   FormGroup,
   Validators,
-  FormControl,
 } from '@angular/forms';
+import { PasswordRules, validatePassword } from '@ngx-validate/core';
 import { Select, Store } from '@ngxs/store';
 import { Observable } from 'rxjs';
 import { finalize, pluck, switchMap, take } from 'rxjs/operators';
@@ -16,15 +17,14 @@ import snq from 'snq';
 import {
   CreateUser,
   DeleteUser,
+  GetRoles,
   GetUserById,
   GetUserRoles,
   GetUsers,
   UpdateUser,
-  GetRoles,
 } from '../../actions/identity.actions';
 import { Identity } from '../../models/identity';
 import { IdentityState } from '../../states/identity.state';
-import { PasswordRules, validatePassword } from '@ngx-validate/core';
 @Component({
   selector: 'abp-users',
   templateUrl: './users.component.html',