diff --git a/src/ui_ng/src/app/project/list-project/list-project.component.ts b/src/ui_ng/src/app/project/list-project/list-project.component.ts
index 5e4c858eb..89f862ba6 100644
--- a/src/ui_ng/src/app/project/list-project/list-project.component.ts
+++ b/src/ui_ng/src/app/project/list-project/list-project.component.ts
@@ -28,12 +28,20 @@ import { State } from 'clarity-angular';
   changeDetection: ChangeDetectionStrategy.OnPush
 })
 export class ListProjectComponent {
+  _filterType: string = ProjectTypes[0];
 
   @Input() projects: Project[];
-  @Input() filteredType: string;
+  @Input()
+  get filteredType(): string {
+    return this._filterType;
+  }
+  set filteredType(value: string) {
+    if (value && value.trim() !== "") {
+      this._filterType = value;
+    }
+  }
 
   @Output() paginate = new EventEmitter<State>();
-
   @Output() toggle = new EventEmitter<Project>();
   @Output() delete = new EventEmitter<Project>();
 
@@ -44,12 +52,12 @@ export class ListProjectComponent {
     private router: Router,
     private searchTrigger: SearchTriggerService,
     private ref: ChangeDetectorRef) {
-    let hnd = setInterval(()=>ref.markForCheck(), 100);
-    setTimeout(()=>clearInterval(hnd), 1000);
-  }  
+    let hnd = setInterval(() => ref.markForCheck(), 100);
+    setTimeout(() => clearInterval(hnd), 1000);
+  }
 
   get showRoleInfo(): boolean {
-    return this.filteredType === ProjectTypes[0];
+    return this.filteredType !== ProjectTypes[2];
   }
 
   public get isSystemAdmin(): boolean {
@@ -69,7 +77,7 @@ export class ListProjectComponent {
   }
 
   newReplicationRule(p: Project) {
-    if(p) {
+    if (p) {
       this.router.navigateByUrl(`/harbor/projects/${p.project_id}/replication?is_create=true`);
     }
   }
diff --git a/src/ui_ng/src/app/project/project.component.html b/src/ui_ng/src/app/project/project.component.html
index 18760312c..6f4048988 100644
--- a/src/ui_ng/src/app/project/project.component.html
+++ b/src/ui_ng/src/app/project/project.component.html
@@ -14,9 +14,9 @@
             <div class="option-right">
                 <div class="select" style="float: left;">
                     <select (change)="doFilterProjects($event)">
-                    <option value="-1" [selected]="currentFilteredType === -1">{{projectTypes[0] | translate}}</option>
-                    <option value="0">{{projectTypes[1] | translate}}</option>
-                    <option value="1">{{projectTypes[2] | translate}}</option>
+                    <option value="0" [selected]="currentFilteredType === 0">{{projectTypes[0] | translate}}</option>
+                    <option value="1">{{projectTypes[1] | translate}}</option>
+                    <option value="2">{{projectTypes[2] | translate}}</option>
                   </select>
                 </div>
                 <grid-filter filterPlaceholder='{{"PROJECT.FILTER_PLACEHOLDER" | translate}}' (filter)="doSearchProjects($event)" [currentValue]="projectName"></grid-filter>
diff --git a/src/ui_ng/src/app/project/project.component.ts b/src/ui_ng/src/app/project/project.component.ts
index 048781ed0..14fa0e999 100644
--- a/src/ui_ng/src/app/project/project.component.ts
+++ b/src/ui_ng/src/app/project/project.component.ts
@@ -56,7 +56,7 @@ export class ProjectComponent implements OnInit, OnDestroy {
   @ViewChild(ListProjectComponent)
   listProject: ListProjectComponent;
 
-  currentFilteredType: number = -1;//all projects
+  currentFilteredType: number = 0;//all projects
   projectName: string = "";
 
   subscription: Subscription;
@@ -146,10 +146,10 @@ export class ProjectComponent implements OnInit, OnDestroy {
   doSearchProjects(projectName: string): void {
     this.projectName = projectName;
     if (projectName === "") {
-      if (this.currentFilteredType === -1) {
+      if (this.currentFilteredType === 0) {
         this.getProjects();
       } else {
-        this.getProjects(projectName, this.currentFilteredType);
+        this.getProjects(projectName, this.currentFilteredType - 1);
       }
     } else {
       this.getProjects(projectName);
@@ -160,10 +160,10 @@ export class ProjectComponent implements OnInit, OnDestroy {
     if ($event && $event.target && $event.target["value"]) {
       this.projectName = "";
       this.currentFilteredType = +$event.target["value"];
-      if (this.currentFilteredType === -1) {
+      if (this.currentFilteredType === 0) {
         this.getProjects();
       } else {
-        this.getProjects("", this.currentFilteredType);
+        this.getProjects("", this.currentFilteredType - 1);
       }
     }
   }
@@ -177,7 +177,7 @@ export class ProjectComponent implements OnInit, OnDestroy {
         response => {
           this.messageHandlerService.showSuccess('PROJECT.TOGGLED_SUCCESS');
           this.statisticHandler.refresh();
-          this.getProjects("", this.currentFilteredType);
+          this.getProjects("", this.currentFilteredType - 1);
         },
         error => this.messageHandlerService.handleError(error)
         );
@@ -197,7 +197,7 @@ export class ProjectComponent implements OnInit, OnDestroy {
   }
 
   refresh(): void {
-    this.currentFilteredType = -1;
+    this.currentFilteredType = 0;
     this.retrieve();
     this.statisticHandler.refresh();
   }