From c83d80ab512004a8c71c9ef329c78680ff7dcd24 Mon Sep 17 00:00:00 2001
From: Zoe Roux <zoe.roux@sdg.moe>
Date: Mon, 21 Sep 2020 00:50:26 +0200
Subject: [PATCH] Hiding titles of filter categories when no filter exists

---
 .../items-grid/items-grid.component.html      | 42 ++++++++++---------
 1 file changed, 23 insertions(+), 19 deletions(-)

diff --git a/src/app/components/items-grid/items-grid.component.html b/src/app/components/items-grid/items-grid.component.html
index dacd8706..0ff568e7 100644
--- a/src/app/components/items-grid/items-grid.component.html
+++ b/src/app/components/items-grid/items-grid.component.html
@@ -13,26 +13,30 @@
 </div>
 
 <mat-menu #filterMenu="matMenu" class="big-panel">
-	<h4><b>Genres</b></h4>
-	<mat-chip-list>
-		<!--suppress AngularInvalidExpressionResultType ('default' color is valid for mat-chip)-->
-		<mat-chip *ngFor="let genre of this.genres"
-		          [color]="this.filters.genres.includes(genre) ? 'accent' : 'default'" selected
-		          (click)="this.addFilter('genres', genre)">
-			{{genre.name}}
-		</mat-chip>
-	</mat-chip-list>
+	<ng-container *ngIf="this.genres.length > 0">
+		<h4><b>Genres</b></h4>
+		<mat-chip-list>
+			<!--suppress AngularInvalidExpressionResultType ('default' color is valid for mat-chip)-->
+			<mat-chip *ngFor="let genre of this.genres"
+			          [color]="this.filters.genres.includes(genre) ? 'accent' : 'default'" selected
+			          (click)="this.addFilter('genres', genre)">
+				{{genre.name}}
+			</mat-chip>
+		</mat-chip-list>
+	</ng-container>
 
-	<br/>
-	<h4><b>Studios</b></h4>
-	<mat-chip-list>
-		<!--suppress AngularInvalidExpressionResultType ('default' color is valid for mat-chip)-->
-		<mat-chip *ngFor="let studio of this.studios"
-		          [color]="this.filters.studio == studio ? 'accent' : 'default'" selected
-		          (click)="this.addFilter('studio', studio, false)">
-		{{studio.name}}
-		</mat-chip>
-	</mat-chip-list>
+	<ng-container *ngIf="this.studios.length > 0">
+		<br/>
+		<h4><b>Studios</b></h4>
+		<mat-chip-list>
+			<!--suppress AngularInvalidExpressionResultType ('default' color is valid for mat-chip)-->
+			<mat-chip *ngFor="let studio of this.studios"
+			          [color]="this.filters.studio == studio ? 'accent' : 'default'" selected
+			          (click)="this.addFilter('studio', studio, false)">
+			{{studio.name}}
+			</mat-chip>
+		</mat-chip-list>
+	</ng-container>
 </mat-menu>
 
 <mat-menu #sortMenu="matMenu">