feat: add no result for selected filters label

Author: ilirbeqirii

Diff for: angular-hub/src/app/pages/communities/index.page.ts

@@ -40,8 +40,7 @@ export const routeMeta: RouteMeta = {
         [style]="{ width: '230px' }"
         [showClear]="true"
         placeholder="Select a country"
-        [ngModel]="selectedCountry()"
-        (ngModelChange)="selectedCountry.set($event)"
+        [(ngModel)]="selectedCountry"
       />
     </form>
 
@@ -50,6 +49,14 @@ export const routeMeta: RouteMeta = {
         <li>
           <app-community-card [community]="community"></app-community-card>
         </li>
+      } @empty {
+        <p class="col-span-2">
+          No event matching the filter
+
+          @if (selectedCountry()) {
+            {{ selectedCountry() }}
+          }
+        </p>
       }
     </ul>
   `,

Diff for: angular-hub/src/app/pages/index.page.ts

@@ -12,6 +12,7 @@ import { DropdownModule } from 'primeng/dropdown';
 import { InputSwitchModule } from 'primeng/inputswitch';
 import { Title } from '@angular/platform-browser';
 import { JsonLdService } from '../services/json-ld.service';
+import { DatePipe } from '@angular/common';
 
 export const routeMeta: RouteMeta = {
   meta: [
@@ -42,8 +43,7 @@ export const routeMeta: RouteMeta = {
         ariaLabel="Select a date"
         name="date"
         [style]="{ width: '230px' }"
-        [ngModel]="date()"
-        (ngModelChange)="date.set($event)"
+        [(ngModel)]="date"
         placeholder="Select a date"
         [showClear]="true"
       />
@@ -53,17 +53,15 @@ export const routeMeta: RouteMeta = {
         [style]="{ width: '230px' }"
         [options]="languages()"
         [showClear]="true"
-        [ngModel]="selectedLanguage()"
-        (ngModelChange)="selectedLanguage.set($event)"
+        [(ngModel)]="selectedLanguage"
         placeholder="Select a language"
       />
       <div class="flex items-center gap-2">
         <p-inputSwitch
           ariaLabel="Display remote events only"
           id="remote"
           name="remote"
-          [ngModel]="isRemote()"
-          (ngModelChange)="isRemote.set($event)"
+          [(ngModel)]="isRemote"
         />
         <label class="mb-2" for="remote">remote only</label>
       </div>
@@ -76,6 +74,17 @@ export const routeMeta: RouteMeta = {
         <li>
           <app-event-card [event]="event"></app-event-card>
         </li>
+      } @empty {
+        <p class="col-span-2">
+          No event matching the filter
+          @if (date()) {
+            {{ date() | date: 'MM/DD/YYYY' }}
+          }
+
+          @if (selectedLanguage()) {
+            {{ selectedLanguage() }}
+          }
+        </p>
       }
     </ul>
   `,
@@ -97,6 +106,7 @@ export const routeMeta: RouteMeta = {
     RouterLinkActive,
     DropdownModule,
     InputSwitchModule,
+    DatePipe,
   ],
 })
 export default class EventsComponent {