diff --git a/npm/ng-packs/packages/core/src/lib/core.module.ts b/npm/ng-packs/packages/core/src/lib/core.module.ts
index 9e822a4823..4b657fe8bb 100644
--- a/npm/ng-packs/packages/core/src/lib/core.module.ts
+++ b/npm/ng-packs/packages/core/src/lib/core.module.ts
@@ -20,6 +20,8 @@ import { SessionState } from './states/session.state';
 import { getInitialData } from './utils/initial-utils';
 import { EllipsisDirective } from './directives/ellipsis.directive';
 import { AutofocusDirective } from './directives/autofocus.directive';
+import { InputEventDebounceDirective } from './directives/debounce.directive';
+import { ClickEventStopPropagationDirective } from './directives/stop-propagation.directive';
 
 @NgModule({
   imports: [
@@ -40,6 +42,8 @@ import { AutofocusDirective } from './directives/autofocus.directive';
     LocalizationPipe,
     PermissionDirective,
     VisibilityDirective,
+    InputEventDebounceDirective,
+    ClickEventStopPropagationDirective,
   ],
   exports: [
     CommonModule,
@@ -54,7 +58,9 @@ import { AutofocusDirective } from './directives/autofocus.directive';
     LocalizationPipe,
     PermissionDirective,
     VisibilityDirective,
+    InputEventDebounceDirective,
     LocalizationPipe,
+    ClickEventStopPropagationDirective,
   ],
   providers: [LocalizationPipe],
   entryComponents: [RouterOutletComponent, DynamicLayoutComponent],
diff --git a/npm/ng-packs/packages/core/src/lib/directives/debounce.directive.ts b/npm/ng-packs/packages/core/src/lib/directives/debounce.directive.ts
new file mode 100644
index 0000000000..144c43d4e2
--- /dev/null
+++ b/npm/ng-packs/packages/core/src/lib/directives/debounce.directive.ts
@@ -0,0 +1,26 @@
+import { Directive, Output, Renderer2, ElementRef, OnInit, EventEmitter, Input } from '@angular/core';
+import { fromEvent } from 'rxjs';
+import { debounceTime } from 'rxjs/operators';
+import { takeUntilDestroy } from '@ngx-validate/core';
+
+@Directive({
+  selector: '[input.debounce]',
+})
+export class InputEventDebounceDirective implements OnInit {
+  @Input() debounce: number = 300;
+
+  @Output('input.debounce') debounceEvent = new EventEmitter<Event>();
+
+  constructor(private renderer: Renderer2, private el: ElementRef) {}
+
+  ngOnInit(): void {
+    fromEvent(this.el.nativeElement, 'input')
+      .pipe(
+        debounceTime(this.debounce),
+        takeUntilDestroy(this),
+      )
+      .subscribe((event: Event) => {
+        this.debounceEvent.emit(event);
+      });
+  }
+}
diff --git a/npm/ng-packs/packages/core/src/lib/directives/stop-propagation.directive.ts b/npm/ng-packs/packages/core/src/lib/directives/stop-propagation.directive.ts
new file mode 100644
index 0000000000..ffa2e9e10b
--- /dev/null
+++ b/npm/ng-packs/packages/core/src/lib/directives/stop-propagation.directive.ts
@@ -0,0 +1,21 @@
+import { Directive, ElementRef, EventEmitter, OnInit, Output, Renderer2 } from '@angular/core';
+import { fromEvent } from 'rxjs';
+import { takeUntilDestroy } from '@ngx-validate/core';
+
+@Directive({
+  selector: '[click.stop]',
+})
+export class ClickEventStopPropagationDirective implements OnInit {
+  @Output('click.stop') stopPropEvent = new EventEmitter<MouseEvent>();
+
+  constructor(private renderer: Renderer2, private el: ElementRef) {}
+
+  ngOnInit(): void {
+    fromEvent(this.el.nativeElement, 'click')
+      .pipe(takeUntilDestroy(this))
+      .subscribe((event: MouseEvent) => {
+        event.stopPropagation();
+        this.stopPropEvent.emit(event);
+      });
+  }
+}
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 af162133da..546a768006 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
@@ -18,7 +18,7 @@
           type="search"
           class="form-control form-control-sm"
           [placeholder]="'AbpUi::PagerSearch' | abpLocalization"
-          (input)="search$.next($event.target.value)"
+          (input.debounce)="onSearch($event.target.value)"
       /></label>
     </div>
     <p-table
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 af52f274bb..06594d8091 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,25 +1,25 @@
-import { Component, TemplateRef, ViewChild, OnInit } from '@angular/core';
-import { Select, Store } from '@ngxs/store';
-import { Observable, Subject } from 'rxjs';
+import { ABP } from '@abp/ng.core';
+import { ConfirmationService, Toaster } from '@abp/ng.theme.shared';
+import { Component, TemplateRef, ViewChild } from '@angular/core';
 import { FormBuilder, FormGroup, Validators } from '@angular/forms';
-import { IdentityState } from '../../states/identity.state';
-import { Identity } from '../../models/identity';
+import { Select, Store } from '@ngxs/store';
+import { Observable } from 'rxjs';
+import { debounceTime, finalize, pluck } from 'rxjs/operators';
 import {
-  IdentityUpdateRole,
   IdentityAddRole,
   IdentityDeleteRole,
   IdentityGetRoleById,
   IdentityGetRoles,
+  IdentityUpdateRole,
 } from '../../actions/identity.actions';
-import { pluck, debounceTime, finalize } from 'rxjs/operators';
-import { ConfirmationService, Toaster } from '@abp/ng.theme.shared';
-import { ABP } from '@abp/ng.core';
+import { Identity } from '../../models/identity';
+import { IdentityState } from '../../states/identity.state';
 
 @Component({
   selector: 'abp-roles',
   templateUrl: './roles.component.html',
 })
-export class RolesComponent implements OnInit {
+export class RolesComponent {
   @Select(IdentityState.getRoles)
   data$: Observable<Identity.RoleItem[]>;
 
@@ -42,18 +42,14 @@ export class RolesComponent implements OnInit {
 
   loading: boolean = false;
 
-  search$ = new Subject<string>();
-
   @ViewChild('modalContent', { static: false })
   modalContent: TemplateRef<any>;
 
   constructor(private confirmationService: ConfirmationService, private fb: FormBuilder, private store: Store) {}
 
-  ngOnInit() {
-    this.search$.pipe(debounceTime(300)).subscribe(value => {
-      this.pageQuery.filter = value;
-      this.get();
-    });
+  onSearch(value) {
+    this.pageQuery.filter = value;
+    this.get();
   }
 
   createForm() {
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 9d5aa0a9f0..03f5dcb605 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
@@ -24,7 +24,7 @@
           type="search"
           class="form-control form-control-sm"
           [placeholder]="'AbpUi::PagerSearch' | abpLocalization"
-          (input)="search$.next($event.target.value)"
+          (input.debounce)="onSearch($event.target.value)"
       /></label>
     </div>
     <p-table
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 830631728e..337bf94abe 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,10 +1,10 @@
 import { ABP } from '@abp/ng.core';
 import { ConfirmationService, Toaster } from '@abp/ng.theme.shared';
-import { Component, OnInit, TemplateRef, TrackByFunction, ViewChild } from '@angular/core';
+import { Component, TemplateRef, TrackByFunction, ViewChild } from '@angular/core';
 import { AbstractControl, FormArray, FormBuilder, FormGroup, Validators } from '@angular/forms';
 import { Select, Store } from '@ngxs/store';
-import { combineLatest, Observable, Subject } from 'rxjs';
-import { debounceTime, filter, map, pluck, take, finalize } from 'rxjs/operators';
+import { combineLatest, Observable } from 'rxjs';
+import { filter, finalize, map, pluck, take } from 'rxjs/operators';
 import snq from 'snq';
 import {
   IdentityAddUser,
@@ -20,7 +20,7 @@ import { IdentityState } from '../../states/identity.state';
   selector: 'abp-users',
   templateUrl: './users.component.html',
 })
-export class UsersComponent implements OnInit {
+export class UsersComponent {
   @Select(IdentityState.getUsers)
   data$: Observable<Identity.UserItem[]>;
 
@@ -50,8 +50,6 @@ export class UsersComponent implements OnInit {
 
   loading: boolean = false;
 
-  search$ = new Subject<string>();
-
   trackByFn: TrackByFunction<AbstractControl> = (index, item) => Object.keys(item)[0] || index;
 
   get roleGroups(): FormGroup[] {
@@ -60,11 +58,9 @@ export class UsersComponent implements OnInit {
 
   constructor(private confirmationService: ConfirmationService, private fb: FormBuilder, private store: Store) {}
 
-  ngOnInit() {
-    this.search$.pipe(debounceTime(300)).subscribe(value => {
-      this.pageQuery.filter = value;
-      this.get();
-    });
+  onSearch(value) {
+    this.pageQuery.filter = value;
+    this.get();
   }
 
   buildForm() {
diff --git a/npm/ng-packs/packages/tenant-management/src/lib/components/tenants/tenants.component.html b/npm/ng-packs/packages/tenant-management/src/lib/components/tenants/tenants.component.html
index ec059131e0..b8c206a74d 100644
--- a/npm/ng-packs/packages/tenant-management/src/lib/components/tenants/tenants.component.html
+++ b/npm/ng-packs/packages/tenant-management/src/lib/components/tenants/tenants.component.html
@@ -27,7 +27,7 @@
           type="search"
           class="form-control form-control-sm"
           [placeholder]="'AbpUi::PagerSearch' | abpLocalization"
-          (input)="search$.next($event.target.value)"
+          (input.debounce)="onSearch($event.target.value)"
       /></label>
     </div>
     <p-table
diff --git a/npm/ng-packs/packages/tenant-management/src/lib/components/tenants/tenants.component.ts b/npm/ng-packs/packages/tenant-management/src/lib/components/tenants/tenants.component.ts
index 450ee81540..64db8a1035 100644
--- a/npm/ng-packs/packages/tenant-management/src/lib/components/tenants/tenants.component.ts
+++ b/npm/ng-packs/packages/tenant-management/src/lib/components/tenants/tenants.component.ts
@@ -1,6 +1,6 @@
 import { ABP } from '@abp/ng.core';
 import { ConfirmationService, Toaster } from '@abp/ng.theme.shared';
-import { Component, OnInit, TemplateRef, ViewChild } from '@angular/core';
+import { Component, TemplateRef, ViewChild } from '@angular/core';
 import { FormBuilder, FormGroup, Validators } from '@angular/forms';
 import { Select, Store } from '@ngxs/store';
 import { Observable, Subject } from 'rxjs';
@@ -25,7 +25,7 @@ type SelectedModalContent = {
   selector: 'abp-tenants',
   templateUrl: './tenants.component.html',
 })
-export class TenantsComponent implements OnInit {
+export class TenantsComponent {
   @Select(TenantManagementState.get)
   data$: Observable<ABP.BasicItem[]>;
 
@@ -52,8 +52,6 @@ export class TenantsComponent implements OnInit {
 
   loading: boolean = false;
 
-  search$ = new Subject<string>();
-
   get useSharedDatabase(): boolean {
     return this.defaultConnectionStringForm.get('useSharedDatabase').value;
   }
@@ -75,11 +73,9 @@ export class TenantsComponent implements OnInit {
     private store: Store,
   ) {}
 
-  ngOnInit() {
-    this.search$.pipe(debounceTime(300)).subscribe(value => {
-      this.pageQuery.filter = value;
-      this.get();
-    });
+  onSearch(value) {
+    this.pageQuery.filter = value;
+    this.get();
   }
 
   private createTenantForm() {