Replaced @Input/@output with input/output

oguzhanagir · oguzhanagir · commit 96a1df873b41 · 2024-07-25T14:51:42.000+03:00
diff --git a/angular/src/account/register/register.component.ts b/angular/src/account/register/register.component.ts
@@ -1,4 +1,4 @@
-import { Component, Injector } from '@angular/core';
+import { Component, Injector, Input } from '@angular/core';
 import { Router } from '@angular/router';
 import { finalize } from 'rxjs/operators';
 import { AppComponentBase } from '@shared/app-component-base';
diff --git a/angular/src/app/roles/create-role/create-role-dialog.component.ts b/angular/src/app/roles/create-role/create-role-dialog.component.ts
@@ -3,7 +3,8 @@ import {
   Injector,
   OnInit,
   EventEmitter,
-  Output,
+  output,
+  ChangeDetectorRef,
 } from '@angular/core';
 import { BsModalRef } from 'ngx-bootstrap/modal';
 import { AppComponentBase } from '@shared/app-component-base';
@@ -27,12 +28,13 @@ export class CreateRoleDialogComponent extends AppComponentBase
   checkedPermissionsMap: { [key: string]: boolean } = {};
   defaultPermissionCheckedStatus = true;
 
-  @Output() onSave = new EventEmitter<any>();
+  onSave = output<EventEmitter<any>>()
 
   constructor(
     injector: Injector,
     private _roleService: RoleServiceProxy,
-    public bsModalRef: BsModalRef
+    public bsModalRef: BsModalRef,
+    private cd: ChangeDetectorRef
   ) {
     super(injector);
   }
@@ -43,6 +45,7 @@ export class CreateRoleDialogComponent extends AppComponentBase
       .subscribe((result: PermissionDtoListResultDto) => {
         this.permissions = result.items;
         this.setInitialPermissionsStatus();
+        this.cd.detectChanges();
       });
   }
 
@@ -87,10 +90,11 @@ export class CreateRoleDialogComponent extends AppComponentBase
         () => {
           this.notify.info(this.l('SavedSuccessfully'));
           this.bsModalRef.hide();
-          this.onSave.emit();
+          this.onSave.emit(null);
         },
         () => {
           this.saving = false;
+          this.cd.detectChanges();
         }
       );
   }
diff --git a/angular/src/app/roles/edit-role/edit-role-dialog.component.ts b/angular/src/app/roles/edit-role/edit-role-dialog.component.ts
@@ -4,6 +4,7 @@ import {
   OnInit,
   EventEmitter,
   Output,
+  ChangeDetectorRef,
 } from '@angular/core';
 import { BsModalRef } from 'ngx-bootstrap/modal';
 import { forEach as _forEach, includes as _includes, map as _map } from 'lodash-es';
@@ -34,7 +35,8 @@ export class EditRoleDialogComponent extends AppComponentBase
   constructor(
     injector: Injector,
     private _roleService: RoleServiceProxy,
-    public bsModalRef: BsModalRef
+    public bsModalRef: BsModalRef,
+    private cd: ChangeDetectorRef
   ) {
     super(injector);
   }
@@ -47,6 +49,7 @@ export class EditRoleDialogComponent extends AppComponentBase
         this.permissions = result.permissions;
         this.grantedPermissionNames = result.grantedPermissionNames;
         this.setInitialPermissionsStatus();
+        this.cd.detectChanges();
       });
   }
 
diff --git a/angular/src/app/roles/roles.component.html b/angular/src/app/roles/roles.component.html
@@ -63,7 +63,7 @@ <h1>{{ "Roles" | localize }}</h1>
                     totalItems: totalItems
                   }
                   ; track
-                  role) {
+                  role.id) {
                   <tr>
                     <td>{{ role.name }}</td>
                     <td>{{ role.displayName }}</td>
diff --git a/angular/src/app/roles/roles.component.ts b/angular/src/app/roles/roles.component.ts
@@ -1,4 +1,4 @@
-import { Component, Injector } from '@angular/core';
+import { Component, Injector, ChangeDetectorRef } from '@angular/core';
 import { finalize } from 'rxjs/operators';
 import { BsModalRef, BsModalService } from 'ngx-bootstrap/modal';
 import { appModuleAnimation } from '@shared/animations/routerTransition';
@@ -29,9 +29,10 @@ export class RolesComponent extends PagedListingComponentBase<RoleDto> {
   constructor(
     injector: Injector,
     private _rolesService: RoleServiceProxy,
-    private _modalService: BsModalService
+    private _modalService: BsModalService,
+    cd: ChangeDetectorRef
   ) {
-    super(injector);
+    super(injector, cd);
   }
 
   list(
@@ -51,6 +52,7 @@ export class RolesComponent extends PagedListingComponentBase<RoleDto> {
       .subscribe((result: RoleDtoPagedResultDto) => {
         this.roles = result.items;
         this.showPaging(result, pageNumber);
+        this.cd.detectChanges();
       });
   }
 
diff --git a/angular/src/app/tenants/create-tenant/create-tenant-dialog.component.ts b/angular/src/app/tenants/create-tenant/create-tenant-dialog.component.ts
@@ -3,7 +3,8 @@ import {
   Injector,
   OnInit,
   Output,
-  EventEmitter
+  EventEmitter,
+  ChangeDetectorRef
 } from '@angular/core';
 import { BsModalRef } from 'ngx-bootstrap/modal';
 import { AppComponentBase } from '@shared/app-component-base';
@@ -25,13 +26,15 @@ export class CreateTenantDialogComponent extends AppComponentBase
   constructor(
     injector: Injector,
     public _tenantService: TenantServiceProxy,
-    public bsModalRef: BsModalRef
+    public bsModalRef: BsModalRef,
+    private cd: ChangeDetectorRef
   ) {
     super(injector);
   }
 
   ngOnInit(): void {
     this.tenant.isActive = true;
+    this.cd.detectChanges();
   }
 
   save(): void {
diff --git a/angular/src/app/tenants/edit-tenant/edit-tenant-dialog.component.ts b/angular/src/app/tenants/edit-tenant/edit-tenant-dialog.component.ts
@@ -3,7 +3,8 @@ import {
   Injector,
   OnInit,
   Output,
-  EventEmitter
+  EventEmitter,
+  ChangeDetectorRef
 } from '@angular/core';
 import { BsModalRef } from 'ngx-bootstrap/modal';
 import { AppComponentBase } from '@shared/app-component-base';
@@ -26,14 +27,16 @@ export class EditTenantDialogComponent extends AppComponentBase
   constructor(
     injector: Injector,
     public _tenantService: TenantServiceProxy,
-    public bsModalRef: BsModalRef
+    public bsModalRef: BsModalRef,
+    private cd: ChangeDetectorRef
   ) {
     super(injector);
   }
 
   ngOnInit(): void {
     this._tenantService.get(this.id).subscribe((result: TenantDto) => {
       this.tenant = result;
+      this.cd.detectChanges();
     });
   }
 
diff --git a/angular/src/app/tenants/tenants.component.html b/angular/src/app/tenants/tenants.component.html
@@ -159,7 +159,7 @@ <h1>{{ "Tenants" | localize }}</h1>
                           totalItems: totalItems
                         }
                         ; track
-                        tenant) {
+                        tenant.id) {
                         <tr
                           >
                           <td>{{ tenant.tenancyName }}</td>
diff --git a/angular/src/app/tenants/tenants.component.ts b/angular/src/app/tenants/tenants.component.ts
@@ -1,4 +1,4 @@
-import { Component, Injector } from '@angular/core';
+import { ChangeDetectorRef, Component, Injector } from '@angular/core';
 import { finalize } from 'rxjs/operators';
 import { BsModalService, BsModalRef } from 'ngx-bootstrap/modal';
 import { appModuleAnimation } from '@shared/animations/routerTransition';
@@ -32,9 +32,10 @@ export class TenantsComponent extends PagedListingComponentBase<TenantDto> {
   constructor(
     injector: Injector,
     private _tenantService: TenantServiceProxy,
-    private _modalService: BsModalService
+    private _modalService: BsModalService,
+    cd: ChangeDetectorRef
   ) {
-    super(injector);
+    super(injector, cd);
   }
 
   list(
diff --git a/angular/src/app/users/create-user/create-user-dialog.component.ts b/angular/src/app/users/create-user/create-user-dialog.component.ts
@@ -3,7 +3,8 @@ import {
   Injector,
   OnInit,
   EventEmitter,
-  Output
+  Output,
+  ChangeDetectorRef
 } from '@angular/core';
 import { BsModalRef } from 'ngx-bootstrap/modal';
 import { forEach as _forEach, map as _map } from 'lodash-es';
@@ -44,7 +45,8 @@ export class CreateUserDialogComponent extends AppComponentBase
   constructor(
     injector: Injector,
     public _userService: UserServiceProxy,
-    public bsModalRef: BsModalRef
+    public bsModalRef: BsModalRef,
+    private cd: ChangeDetectorRef
   ) {
     super(injector);
   }
@@ -55,6 +57,7 @@ export class CreateUserDialogComponent extends AppComponentBase
     this._userService.getRoles().subscribe((result) => {
       this.roles = result.items;
       this.setInitialRolesStatus();
+      this.cd.detectChanges();
     });
   }
 
diff --git a/angular/src/app/users/edit-user/edit-user-dialog.component.ts b/angular/src/app/users/edit-user/edit-user-dialog.component.ts
@@ -3,7 +3,8 @@ import {
   Injector,
   OnInit,
   EventEmitter,
-  Output
+  Output,
+  ChangeDetectorRef
 } from '@angular/core';
 import { BsModalRef } from 'ngx-bootstrap/modal';
 import { forEach as _forEach, includes as _includes, map as _map } from 'lodash-es';
@@ -30,7 +31,8 @@ export class EditUserDialogComponent extends AppComponentBase
   constructor(
     injector: Injector,
     public _userService: UserServiceProxy,
-    public bsModalRef: BsModalRef
+    public bsModalRef: BsModalRef,
+    private cd: ChangeDetectorRef
   ) {
     super(injector);
   }
@@ -42,6 +44,7 @@ export class EditUserDialogComponent extends AppComponentBase
       this._userService.getRoles().subscribe((result2) => {
         this.roles = result2.items;
         this.setInitialRolesStatus();
+        this.cd.detectChanges();
       });
     });
   }
diff --git a/angular/src/app/users/users.component.html b/angular/src/app/users/users.component.html
@@ -160,7 +160,7 @@ <h1>{{ "Users" | localize }}</h1>
                           totalItems: totalItems
                         }
                         ; track
-                        user) {
+                        user.id) {
                         <tr
                           >
                           <td>{{ user.userName }}</td>
diff --git a/angular/src/app/users/users.component.ts b/angular/src/app/users/users.component.ts
@@ -1,4 +1,4 @@
-import { Component, Injector } from '@angular/core';
+import { ChangeDetectorRef, Component, Injector } from '@angular/core';
 import { finalize } from 'rxjs/operators';
 import { BsModalService, BsModalRef } from 'ngx-bootstrap/modal';
 import { appModuleAnimation } from '@shared/animations/routerTransition';
@@ -33,9 +33,10 @@ export class UsersComponent extends PagedListingComponentBase<UserDto> {
   constructor(
     injector: Injector,
     private _userService: UserServiceProxy,
-    private _modalService: BsModalService
+    private _modalService: BsModalService,
+    cd: ChangeDetectorRef
   ) {
-    super(injector);
+    super(injector, cd);
   }
 
   createUser(): void {
diff --git a/angular/src/shared/components/modal/abp-modal-footer.component.html b/angular/src/shared/components/modal/abp-modal-footer.component.html
@@ -2,12 +2,12 @@
   <button
     type="button"
     class="btn btn-default"
-    [disabled]="cancelDisabled"
-    (click)="onCancelClick.emit()"
+    [disabled]="cancelDisabled()"
+    (click)="onCancelClick.emit($event)"
   >
-    {{ cancelLabel }}
+    {{ cancelLabel() }}
   </button>
-  <button type="submit" class="btn btn-primary" [disabled]="saveDisabled">
-    {{ saveLabel }}
+  <button type="submit" class="btn btn-primary" [disabled]="saveDisabled()">
+    {{ saveLabel() }}
   </button>
 </div>
diff --git a/angular/src/shared/components/modal/abp-modal-footer.component.ts b/angular/src/shared/components/modal/abp-modal-footer.component.ts
@@ -1,7 +1,7 @@
 import {
   Component,
-  Input,
-  Output,
+  input,
+  output,
   EventEmitter,
   ChangeDetectionStrategy,
   Injector
@@ -14,12 +14,12 @@ import { AppComponentBase } from '@shared/app-component-base';
   changeDetection: ChangeDetectionStrategy.OnPush
 })
 export class AbpModalFooterComponent extends AppComponentBase {
-  @Input() cancelLabel = this.l('Cancel');
-  @Input() cancelDisabled: boolean;
-  @Input() saveLabel = this.l('Save');
-  @Input() saveDisabled: boolean;
+  cancelLabel = input(this.l('Cancel'));
+  cancelDisabled= input<boolean>();
+  saveLabel = input(this.l('Save'));
+  saveDisabled = input<boolean>();
 
-  @Output() onCancelClick = new EventEmitter<number>();
+  onCancelClick = output<EventEmitter<number>>();
 
   constructor(injector: Injector) {
     super(injector);
diff --git a/angular/src/shared/components/modal/abp-modal-header.component.html b/angular/src/shared/components/modal/abp-modal-header.component.html
@@ -1,10 +1,10 @@
 <div class="modal-header">
-  <h4 class="modal-title">{{ title }}</h4>
+  <h4 class="modal-title">{{ title() }}</h4>
   <button
     type="button"
     class="close"
     aria-label="Close"
-    (click)="onCloseClick.emit()"
+    (click)="onCloseClick.emit($event)"
   >
     <span aria-hidden="true">&times;</span>
   </button>
diff --git a/angular/src/shared/components/modal/abp-modal-header.component.ts b/angular/src/shared/components/modal/abp-modal-header.component.ts
@@ -1,7 +1,7 @@
 import {
   Component,
-  Input,
-  Output,
+  input,
+  output,
   EventEmitter,
   ChangeDetectionStrategy,
   Injector
@@ -14,9 +14,9 @@ import { AppComponentBase } from '@shared/app-component-base';
   changeDetection: ChangeDetectionStrategy.OnPush
 })
 export class AbpModalHeaderComponent extends AppComponentBase {
-  @Input() title: string;
+  title = input<string>();
 
-  @Output() onCloseClick = new EventEmitter<number>();
+  onCloseClick = output<EventEmitter<number>>();
 
   constructor(injector: Injector) {
     super(injector);
diff --git a/angular/src/shared/components/pagination/abp-pagination-controls.component.html b/angular/src/shared/components/pagination/abp-pagination-controls.component.html
@@ -28,7 +28,7 @@
             }
           </li>
         }
-        @for (page of p.pages; track page) {
+        @for (page of p.pages; track page.label) {
           <li
             class="page-item"
             [class.active]="p.getCurrent() === page.value"
diff --git a/angular/src/shared/components/pagination/abp-pagination-controls.component.ts b/angular/src/shared/components/pagination/abp-pagination-controls.component.ts
@@ -5,15 +5,14 @@ import { Component, Input, Output, EventEmitter } from '@angular/core';
   templateUrl: './abp-pagination-controls.component.html'
 })
 export class AbpPaginationControlsComponent {
-
   @Input() id: string;
   @Input() maxSize = 7;
   @Input() previousLabel = 'Previous';
   @Input() nextLabel = 'Next';
   @Input() screenReaderPaginationLabel = 'Pagination';
   @Input() screenReaderPageLabel = 'page';
   @Input() screenReaderCurrentLabel = `You're on page`;
-  @Output() pageChange: EventEmitter<number> = new EventEmitter<number>();
+  @Output() pageChange = new EventEmitter<number>();
 
   private _directionLinks = true;
   private _autoHide = false;
@@ -25,6 +24,7 @@ export class AbpPaginationControlsComponent {
   set directionLinks(value: boolean) {
     this._directionLinks = !!value && <any>value !== 'false';
   }
+
   @Input()
   get autoHide(): boolean {
     return this._autoHide;
diff --git a/angular/src/shared/paged-listing-component-base.ts b/angular/src/shared/paged-listing-component-base.ts

Original file line number	Diff line number	Diff line change
`@@ -1,4 +1,4 @@`
`1`		`-import { Component, Injector } from '@angular/core';`
	`1`	`+import { Component, Injector, Input } from '@angular/core';`
`2`	`2`	`import { Router } from '@angular/router';`
`3`	`3`	`import { finalize } from 'rxjs/operators';`
`4`	`4`	`import { AppComponentBase } from '@shared/app-component-base';`
Original file line number	Diff line number	Diff line change
`@@ -63,7 +63,7 @@ <h1>{{ "Roles" \| localize }}</h1>`
`63`	`63`	`totalItems: totalItems`
`64`	`64`	`}`
`65`	`65`	`; track`
`66`		`- role) {`
	`66`	`+ role.id) {`
`67`	`67`	`<tr>`
`68`	`68`	`<td>{{ role.name }}</td>`
`69`	`69`	`<td>{{ role.displayName }}</td>`
Original file line number	Diff line number	Diff line change
`@@ -159,7 +159,7 @@ <h1>{{ "Tenants" \| localize }}</h1>`
`159`	`159`	`totalItems: totalItems`
`160`	`160`	`}`
`161`	`161`	`; track`
`162`		`- tenant) {`
	`162`	`+ tenant.id) {`
`163`	`163`	`<tr`
`164`	`164`	`>`
`165`	`165`	`<td>{{ tenant.tenancyName }}</td>`