geonetwork-ui 2.8.0-dev.c77b0c7dd → 2.8.0-dev.d7c07c0b9

package/src/libs/feature/search/src/lib/results-table/results-table-container.component.html

@@ -1,16 +1,17 @@
-<gn-ui-results-table
-  *ngIf="searchFacade.results$ | async as records"
-  [records]="records"
-  [hasDraft]="hasDraft"
-  [selectedRecordsIdentifiers]="selectedRecords$ | async"
-  [sortOrder]="sortBy$ | async"
-  [canDelete]="canDelete"
-  [canDuplicate]="canDuplicate"
-  [isDuplicating]="isDuplicating"
-  [canEdit]="canEdit"
-  (recordClick)="handleRecordClick($event)"
-  (duplicateRecord)="handleDuplicateRecord($event)"
-  (deleteRecord)="handleDeleteRecord($event)"
-  (recordsSelectedChange)="handleRecordsSelectedChange($event[0], $event[1])"
-  (sortByChange)="handleSortByChange($event[0], $event[1])"
-></gn-ui-results-table>
+@if (searchFacade.results$ | async; as records) {
+  <gn-ui-results-table
+    [records]="records"
+    [hasDraft]="hasDraft"
+    [selectedRecordsIdentifiers]="selectedRecords$ | async"
+    [sortOrder]="sortBy$ | async"
+    [canDelete]="canDelete"
+    [canDuplicate]="canDuplicate"
+    [isDuplicating]="isDuplicating"
+    [canEdit]="canEdit"
+    (recordClick)="handleRecordClick($event)"
+    (duplicateRecord)="handleDuplicateRecord($event)"
+    (deleteRecord)="handleDeleteRecord($event)"
+    (recordsSelectedChange)="handleRecordsSelectedChange($event[0], $event[1])"
+    (sortByChange)="handleSortByChange($event[0], $event[1])"
+  ></gn-ui-results-table>
+}

package/src/libs/feature/search/src/lib/results-table/results-table-container.component.ts

@@ -4,6 +4,7 @@ import {
   Input,
   OnDestroy,
   Output,
+  inject,
 } from '@angular/core'
 import { CatalogRecord } from '../../../../../../libs/common/domain/src/lib/model/record'
 import { SearchFacade } from '../state/search.facade'
@@ -24,6 +25,13 @@ import { TranslateService } from '@ngx-translate/core'
   imports: [CommonModule, ResultsTableComponent],
 })
 export class ResultsTableContainerComponent implements OnDestroy {
+  protected searchFacade = inject(SearchFacade)
+  private searchService = inject(SearchService)
+  private selectionService = inject(SelectionService)
+  private recordsRepository = inject(RecordsRepositoryInterface)
+  private notificationsService = inject(NotificationsService)
+  private translateService = inject(TranslateService)
+
   @Input() isDuplicating = false
 
   @Output() recordClick = new EventEmitter<CatalogRecord>()
@@ -49,15 +57,6 @@ export class ResultsTableContainerComponent implements OnDestroy {
     return this.recordsRepository.canEditIndexedRecord(record)
   }
 
-  constructor(
-    protected searchFacade: SearchFacade,
-    private searchService: SearchService,
-    private selectionService: SelectionService,
-    private recordsRepository: RecordsRepositoryInterface,
-    private notificationsService: NotificationsService,
-    private translateService: TranslateService
-  ) {}
-
   handleRecordClick(item: unknown) {
     this.recordClick.emit(item as CatalogRecord)
   }

package/src/libs/feature/search/src/lib/search-filters-summary/search-filters-summary.component.html

@@ -1,17 +1,19 @@
-<div
-  class="flex flex-row py-3 px-4 gap-4 overflow-hidden grow border-[1px] border-gray-200"
-  *ngIf="searchFilterActive$ | async"
->
-  <div class="flex flex-row flex-wrap items-center gap-2">
-    <gn-ui-search-filters-summary-item
-      *ngFor="let field of searchFields; let i = index"
-      [fieldName]="field"
-    ></gn-ui-search-filters-summary-item>
-  </div>
-  <button
-    class="bg-white text-black font-bold ml-auto"
-    (click)="clearFilters()"
+@if (searchFilterActive$ | async) {
+  <div
+    class="flex flex-row py-3 px-4 gap-4 overflow-hidden grow border-[1px] border-gray-200"
   >
-    {{ 'search.filters.clear' | translate }}
-  </button>
-</div>
+    <div class="flex flex-row flex-wrap items-center gap-2">
+      @for (field of searchFields; track field; let i = $index) {
+        <gn-ui-search-filters-summary-item
+          [fieldName]="field"
+        ></gn-ui-search-filters-summary-item>
+      }
+    </div>
+    <button
+      class="bg-white text-black font-bold ml-auto"
+      (click)="clearFilters()"
+    >
+      {{ 'search.filters.clear' | translate }}
+    </button>
+  </div>
+}

package/src/libs/feature/search/src/lib/search-filters-summary/search-filters-summary.component.ts

@@ -1,11 +1,4 @@
-import {
-  Component,
-  Inject,
-  InjectionToken,
-  Input,
-  OnInit,
-  Optional,
-} from '@angular/core'
+import { Component, InjectionToken, Input, OnInit, inject } from '@angular/core'
 import { CommonModule } from '@angular/common'
 import { first, map, Observable } from 'rxjs'
 import { SearchFiltersSummaryItemComponent } from '../search-filters-summary-item/search-filters-summary-item.component'
@@ -25,18 +18,19 @@ export const FILTER_SUMMARY_IGNORE_LIST = new InjectionToken<string[]>(
   standalone: true,
 })
 export class SearchFiltersSummaryComponent implements OnInit {
+  private searchFacade = inject(SearchFacade)
+  private searchService = inject(SearchService)
+
   @Input() searchFields: string[] = []
   filterSummaryIgnoreList: string[]
 
   searchFilterActive$: Observable<boolean>
 
-  constructor(
-    private searchFacade: SearchFacade,
-    private searchService: SearchService,
-    @Optional()
-    @Inject(FILTER_SUMMARY_IGNORE_LIST)
-    filterSummaryIgnoreList: string[]
-  ) {
+  constructor() {
+    const filterSummaryIgnoreList = inject(FILTER_SUMMARY_IGNORE_LIST, {
+      optional: true,
+    })
+
     const defaultIgnoreList = ['any']
     this.filterSummaryIgnoreList = [
       ...defaultIgnoreList,

package/src/libs/feature/search/src/lib/search-filters-summary-item/search-filters-summary-item.component.html

@@ -1,20 +1,20 @@
-<div
-  *ngIf="(fieldValues$ | async)?.length > 0"
-  class="flex flex-row items-center gap-2"
->
-  <span class="text-gray-800" data-cy="filterSummaryLabel">{{
-    translatedLabel
-  }}</span>
-  <gn-ui-badge
-    *ngFor="let fieldValue of fieldValues$ | async"
-    class="gn-ui-badge"
-    [style.--gn-ui-badge-rounded]="'8px'"
-    [style.--gn-ui-badge-padding]="'3px 4px'"
-    [style.--gn-ui-badge-text-color]="'black'"
-    [style.--gn-ui-badge-background-color]="'#F2F2F2'"
-    [style.--gn-ui-badge-font-weight]="'700'"
-    [removable]="true"
-    (badgeRemoveClicked)="removeFilterValue(fieldValue.value)"
-    >{{ fieldValue.label }}</gn-ui-badge
-  >
-</div>
+@if ((fieldValues$ | async)?.length > 0) {
+  <div class="flex flex-row items-center gap-2">
+    <span class="text-gray-800" data-cy="filterSummaryLabel">{{
+      translatedLabel
+    }}</span>
+    @for (fieldValue of fieldValues$ | async; track fieldValue) {
+      <gn-ui-badge
+        class="gn-ui-badge"
+        [style.--gn-ui-badge-rounded]="'8px'"
+        [style.--gn-ui-badge-padding]="'3px 4px'"
+        [style.--gn-ui-badge-text-color]="'black'"
+        [style.--gn-ui-badge-background-color]="'#F2F2F2'"
+        [style.--gn-ui-badge-font-weight]="'700'"
+        [removable]="true"
+        (badgeRemoveClicked)="removeFilterValue(fieldValue.value)"
+        >{{ fieldValue.label }}</gn-ui-badge
+      >
+    }
+  </div>
+}

package/src/libs/feature/search/src/lib/search-filters-summary-item/search-filters-summary-item.component.ts

@@ -1,4 +1,4 @@
-import { Component, Input, OnInit } from '@angular/core'
+import { Component, Input, OnInit, inject } from '@angular/core'
 import { CommonModule, DatePipe } from '@angular/common'
 import {
   catchError,
@@ -35,6 +35,12 @@ interface DisplayedValue {
   providers: [DatePipe],
 })
 export class SearchFiltersSummaryItemComponent implements OnInit {
+  private searchFacade = inject(SearchFacade)
+  private searchService = inject(SearchService)
+  private fieldsService = inject(FieldsService)
+  private datePipe = inject(DatePipe)
+  private translate = inject(TranslateService)
+
   @Input() fieldName: string
   fieldType: FieldType
   translatedLabel: string
@@ -54,14 +60,6 @@ export class SearchFiltersSummaryItemComponent implements OnInit {
     catchError(() => of([]))
   ) as Observable<DisplayedValue[]>
 
-  constructor(
-    private searchFacade: SearchFacade,
-    private searchService: SearchService,
-    private fieldsService: FieldsService,
-    private datePipe: DatePipe,
-    private translate: TranslateService
-  ) {}
-
   ngOnInit() {
     this.fieldType = this.fieldsService.getFieldType(this.fieldName)
     this.translateLabel()

package/src/libs/feature/search/src/lib/sort-by/sort-by.component.ts

@@ -1,4 +1,4 @@
-import { Component, Input, OnInit } from '@angular/core'
+import { Component, Input, OnInit, inject } from '@angular/core'
 import { marker } from '@biesbjerg/ngx-translate-extract-marker'
 import {
   SortByEnum,
@@ -13,7 +13,7 @@ import { TranslatePipe } from '@ngx-translate/core'
 
 interface SortChoice {
   label: string
-  value: string
+  value: SortByField
 }
 
 @Component({
@@ -23,45 +23,39 @@ interface SortChoice {
   imports: [CommonModule, DropdownSelectorComponent, TranslatePipe],
 })
 export class SortByComponent implements OnInit {
+  private facade = inject(SearchFacade)
+  private searchService = inject(SearchService)
+
   @Input() isQualitySortable: boolean
   choices: SortChoice[] = [
     {
       label: marker('results.sortBy.relevancy'),
-      value: SortByEnum.RELEVANCY.join(','),
+      value: SortByEnum.RELEVANCY,
     },
     {
       label: marker('results.sortBy.dateStamp'),
-      value: SortByEnum.CREATE_DATE.join(','),
-    },
-    {
-      label: marker('results.sortBy.changeDate'),
-      value: SortByEnum.CHANGE_DATE.join(','),
+      value: SortByEnum.RESOURCE_DATES,
     },
     {
       label: marker('results.sortBy.popularity'),
-      value: SortByEnum.POPULARITY.join(','),
+      value: SortByEnum.POPULARITY,
     },
   ]
   currentSortBy$ = this.facade.sortBy$.pipe(
     filter((sortBy) => !!sortBy),
-    map((sortBy) => sortBy.join(','))
+    map((sortBy) => sortBy)
   )
 
-  constructor(
-    private facade: SearchFacade,
-    private searchService: SearchService
-  ) {}
-
   ngOnInit(): void {
     if (this.isQualitySortable) {
       this.choices.push({
         label: marker('results.sortBy.qualityScore'),
-        value: SortByEnum.QUALITY_SCORE.join(','),
+        value: SortByEnum.QUALITY_SCORE,
       })
     }
   }
 
-  changeSortBy(criteriaAsString: string) {
-    this.searchService.setSortBy(criteriaAsString.split(',') as SortByField)
+  changeSortBy(criteria: SortByField): void {
+    this.searchService.setSortBy(criteria)
   }
 }

package/src/libs/feature/search/src/lib/state/container/search-state.container.directive.ts

@@ -1,4 +1,4 @@
-import { Directive, Host, Input, OnInit } from '@angular/core'
+import { Directive, Input, OnInit, inject } from '@angular/core'
 import { SearchService } from '../../utils/service/search.service'
 import { SearchFacade } from '../search.facade'
 
@@ -8,9 +8,9 @@ import { SearchFacade } from '../search.facade'
   standalone: true,
 })
 export class SearchStateContainerDirective implements OnInit {
-  @Input('gnUiSearchStateContainer') searchId: string
+  private facade = inject(SearchFacade, { host: true })
 
-  constructor(@Host() private facade: SearchFacade) {}
+  @Input('gnUiSearchStateContainer') searchId: string
 
   ngOnInit(): void {
     this.facade.init(this.searchId)

package/src/libs/feature/search/src/lib/state/effects.ts

@@ -1,4 +1,4 @@
-import { Inject, Injectable, Optional } from '@angular/core'
+import { Injectable, inject } from '@angular/core'
 import { Actions, createEffect, ofType } from '@ngrx/effects'
 import { select, Store } from '@ngrx/store'
 import { buffer, combineLatestWith, debounceTime, from, of, tap } from 'rxjs'
@@ -49,21 +49,19 @@ import { valid as validGeoJson } from 'geojson-validation'
 
 @Injectable()
 export class SearchEffects {
+  private actions$ = inject(Actions)
+  private store$ = inject<Store<SearchState>>(Store)
+  private recordsRepository = inject(RecordsRepositoryInterface)
+  private favoritesService = inject(FavoritesService)
+  private platformService = inject(PlatformServiceInterface)
+  private filterGeometry = inject<Promise<Geometry>>(FILTER_GEOMETRY, {
+    optional: true,
+  })
+
   filterGeometry$ = this.filterGeometry
     ? from(this.filterGeometry).pipe(shareReplay())
     : undefined
 
-  constructor(
-    private actions$: Actions,
-    private store$: Store<SearchState>,
-    private recordsRepository: RecordsRepositoryInterface,
-    private favoritesService: FavoritesService,
-    private platformService: PlatformServiceInterface,
-    @Optional()
-    @Inject(FILTER_GEOMETRY)
-    private filterGeometry: Promise<Geometry>
-  ) {}
-
   resetPagination$ = createEffect(() =>
     this.actions$.pipe(
       ofType(

package/src/libs/feature/search/src/lib/state/search.facade.ts

@@ -1,4 +1,4 @@
-import { Inject, Injectable, Optional } from '@angular/core'
+import { Injectable, inject } from '@angular/core'
 import { select, Store } from '@ngrx/store'
 import { from, Observable, of } from 'rxjs'
 import {
@@ -54,6 +54,11 @@ import { CatalogRecord } from '../../../../../../libs/common/domain/src/lib/mode
 
 @Injectable()
 export class SearchFacade {
+  private store = inject<Store<SearchState>>(Store)
+  private filterGeometry = inject<Promise<Geometry>>(FILTER_GEOMETRY, {
+    optional: true,
+  })
+
   results$: Observable<CatalogRecord[]>
   layout$: Observable<string>
   sortBy$: Observable<SortByField>
@@ -76,13 +81,6 @@ export class SearchFacade {
 
   searchId: string
 
-  constructor(
-    private store: Store<SearchState>,
-    @Optional()
-    @Inject(FILTER_GEOMETRY)
-    private filterGeometry: Promise<Geometry>
-  ) {}
-
   init(searchId: string = DEFAULT_SEARCH_KEY): void {
     if (this.searchId)
       throw new Error(

package/src/libs/feature/search/src/lib/utils/service/fields.service.ts

@@ -1,4 +1,4 @@
-import { Injectable, Injector } from '@angular/core'
+import { Injectable, Injector, inject } from '@angular/core'
 import {
   AbstractSearchField,
   AvailableServicesField,
@@ -34,6 +34,7 @@ marker('search.filters.publicationYear')
 marker('search.filters.organization')
 marker('search.filters.representationType')
 marker('search.filters.resourceType')
+marker('search.filters.recordKind')
 marker('search.filters.standard')
 marker('search.filters.topic')
 marker('search.filters.contact')
@@ -46,6 +47,8 @@ marker('search.filters.changeDate')
   providedIn: 'root',
 })
 export class FieldsService {
+  protected injector = inject(Injector)
+
   protected fields = {
     organization: new OrganizationSearchField(this.injector),
     format: new SimpleSearchField('format', this.injector, 'asc'),
@@ -98,8 +101,6 @@ export class FieldsService {
     return Object.keys(this.fields)
   }
 
-  constructor(protected injector: Injector) {}
-
   getAvailableValues(fieldName: string) {
     if (this.supportedFields.indexOf(fieldName) === -1)
       throw new Error(`Unsupported search field: ${fieldName}`)

package/src/libs/feature/search/src/lib/utils/service/fields.ts

@@ -505,11 +505,15 @@ export class ResourceTypeLegacyField extends TranslatedSearchField {
 
 export class RecordKindField extends SimpleSearchField {
   TYPE_MAPPING = {
-    dataset: ['dataset', 'series', 'featureCatalog'],
+    dataset: ['dataset', 'series', 'featureCatalog', 'document'],
     service: ['service'],
-    reuse: Object.entries(PossibleResourceTypes)
-      .filter(([_, v]) => v === 'reuse')
-      .map(([k]) => k), // = ['application', 'map', 'staticMap', 'interactiveMap', ...]
+    reuse: [
+      ...Object.entries(PossibleResourceTypes)
+        .filter(([_, v]) => v === 'reuse')
+        .map(([k]) => k), // = ['application', 'map', 'staticMap', 'interactiveMap', ...]
+      'dataset', // allow datasets and documents to be filtered as 'reuse' by cl_presentationForm
+      'document',
+    ],
   }
 
   constructor(injector: Injector) {
@@ -517,38 +521,25 @@ export class RecordKindField extends SimpleSearchField {
   }
 
   getAvailableValues(): Observable<FieldAvailableValue[]> {
-    return this.repository.aggregate(this.getAggregations()).pipe(
-      map(
-        (response) =>
-          (response[this.esFieldName] as AggregationBuckets).buckets || []
-      ),
-      map((buckets: TermBucket[]) => {
-        const counts = buckets.reduce(
-          (acc, { term, count }) => {
-            const value = term.toString()
-            const key = this.TYPE_MAPPING.reuse.includes(value)
-              ? 'reuse'
-              : this.TYPE_MAPPING.dataset.includes(value)
-                ? 'dataset'
-                : value
-
-            acc[key] = (acc[key] || 0) + count
-            return acc
-          },
-          {} as Record<string, number>
-        )
-
-        return Object.keys(this.TYPE_MAPPING).map((type) => ({
-          label: type,
-          value: type,
-          count: counts[type] ?? 0,
-        }))
-      })
-    )
+    // simplified as available values now depend on 'resourceType' and 'cl_presentationForm' fields
+    return of([
+      {
+        label: 'dataset',
+        value: 'dataset',
+      },
+      {
+        label: 'service',
+        value: 'service',
+      },
+      {
+        label: 'reuse',
+        value: 'reuse',
+      },
+    ])
   }
 
   getFiltersForValues(values: FieldValue[]): Observable<FieldFilters> {
-    const filters = {
+    const filters: FieldFilters = {
       [this.esFieldName]: values.reduce((acc, value) => {
         if (value === '') return { ...acc, [value]: true }
 
@@ -559,6 +550,19 @@ export class RecordKindField extends SimpleSearchField {
       }, {}),
     }
 
+    const presentationFormFilter = {}
+    if (values.includes('reuse') && !values.includes('dataset')) {
+      presentationFormFilter['mapDigital'] = true
+      presentationFormFilter['mapHardcopy'] = true
+    } else if (values.includes('dataset') && !values.includes('reuse')) {
+      presentationFormFilter['mapDigital'] = false
+      presentationFormFilter['mapHardcopy'] = false
+    }
+
+    if (Object.keys(presentationFormFilter).length > 0) {
+      filters['cl_presentationForm.key'] = presentationFormFilter
+    }
+
     return of(filters)
   }
 

package/src/libs/feature/search/src/lib/utils/service/search.service.ts

@@ -1,4 +1,4 @@
-import { Injectable } from '@angular/core'
+import { Injectable, inject } from '@angular/core'
 import { SearchFacade } from '../../state/search.facade'
 import {
   FieldFilters,
@@ -16,7 +16,7 @@ export interface SearchServiceI {
 
 @Injectable()
 export class SearchService implements SearchServiceI {
-  constructor(private facade: SearchFacade) {}
+  private facade = inject(SearchFacade)
 
   setSortAndFilters(filters: FieldFilters, sort: SortByField) {
     this.setFilters(filters)

package/src/libs/ui/catalog/src/lib/catalog-title/catalog-title.component.html

@@ -1,21 +1,21 @@
 <div class="lg:flex lg:items-center lg:justify-between">
   <div class="flex-1 min-w-0">
-    <h2
-      *ngIf="name"
-      [title]="tooltip"
-      class="text-2xl font-bold leading-7 text-gray-900 sm:text-3xl sm:leading-9 sm:truncate"
-    >
-      {{ name }}
-    </h2>
-    <div
-      *ngIf="description"
-      class="mt-1 flex flex-col sm:mt-0 sm:flex-row sm:flex-wrap"
-    >
-      <div
-        class="mt-2 flex items-center text-sm leading-5 text-gray-500 sm:mr-6"
+    @if (name) {
+      <h2
+        [title]="tooltip"
+        class="text-2xl font-bold leading-7 text-gray-900 sm:text-3xl sm:leading-9 sm:truncate"
       >
-        {{ description }}
+        {{ name }}
+      </h2>
+    }
+    @if (description) {
+      <div class="mt-1 flex flex-col sm:mt-0 sm:flex-row sm:flex-wrap">
+        <div
+          class="mt-2 flex items-center text-sm leading-5 text-gray-500 sm:mr-6"
+        >
+          {{ description }}
+        </div>
       </div>
-    </div>
+    }
   </div>
 </div>

package/src/libs/ui/catalog/src/lib/catalog-title/catalog-title.component.ts

@@ -1,12 +1,11 @@
 import { Component, Input } from '@angular/core'
-import { CommonModule } from '@angular/common'
 
 @Component({
   selector: 'gn-ui-catalog-title',
   templateUrl: './catalog-title.component.html',
   styleUrls: ['./catalog-title.component.css'],
   standalone: true,
-  imports: [CommonModule],
+  imports: [],
 })
 export class CatalogTitleComponent {
   @Input() name: string

package/src/libs/ui/catalog/src/lib/language-switcher/language-switcher.component.ts

@@ -1,4 +1,4 @@
-import { Component, Inject, InjectionToken, Optional } from '@angular/core'
+import { Component, InjectionToken, inject } from '@angular/core'
 import { LANGUAGE_STORAGE_KEY } from '../../../../../../libs/util/i18n/src'
 import { TranslateService } from '@ngx-translate/core'
 import { DropdownSelectorComponent } from '../../../../../../libs/ui/inputs/src'
@@ -15,6 +15,9 @@ const DEFAULT_LANGUAGES = ['en', 'fr']
   standalone: true,
 })
 export class LanguageSwitcherComponent {
+  private languagesList = inject(LANGUAGES_LIST, { optional: true })
+  private translate = inject(TranslateService)
+
   languageChoices = (this.languagesList || DEFAULT_LANGUAGES).map(
     (language) => ({
       label: `${language}`.toUpperCase(),
@@ -22,13 +25,6 @@ export class LanguageSwitcherComponent {
     })
   )
 
-  constructor(
-    @Optional()
-    @Inject(LANGUAGES_LIST)
-    private languagesList: string[],
-    private translate: TranslateService
-  ) {}
-
   get currentLang() {
     return this.translate.currentLang
   }

package/src/libs/ui/dataviz/src/lib/chart/chart.component.ts

@@ -200,11 +200,11 @@ export class ChartComponent implements OnChanges, AfterViewInit {
         ) {
           if (secondaryProperty) {
             return {
-              y: target[index][property],
-              x: target[index][secondaryProperty],
+              y: target[index][property] || '',
+              x: target[index][secondaryProperty] || '',
             }
           } else {
-            return target[index][property]
+            return target[index][property] || ''
           }
         }
         return target[index]

package/src/libs/ui/dataviz/src/lib/data-table/custom.mat.paginator.intl.ts

@@ -1,13 +1,15 @@
-import { Injectable } from '@angular/core'
+import { Injectable, inject } from '@angular/core'
 import { MatPaginatorIntl } from '@angular/material/paginator'
 import { TranslateService } from '@ngx-translate/core'
 import { Subject } from 'rxjs'
 
 @Injectable()
 export class CustomMatPaginatorIntl extends MatPaginatorIntl {
+  private translate = inject(TranslateService)
+
   override changes = new Subject<void>()
 
-  constructor(private translate: TranslateService) {
+  constructor() {
     super()
     this.setLabels()
     this.translate.onLangChange.subscribe(() => {