Desktop view: also using allOptions array, and tidying

src/app/shared/comcol-page-browse-by/comcol-page-browse-by.component.html

@@ -1,23 +1,24 @@
 <h2 class="comcol-browse-label h5">{{'browse.comcol.head' | translate}}</h2>
-<nav class="comcol-browse mb-4" aria-label="Browse Community or Collection" >
+<nav class="comcol-browse mb-4" aria-label="Browse Community or Collection">
   <div class="d-none d-sm-block">
 
     <div class="list-group list-group-horizontal">
-      <a *ngIf="contentType=='collection'" [routerLink]="['/collections/' + id ]" class="list-group-item" routerLinkActive="active">{{'collection.page.browse.recent.head' | translate}}</a>
+      <a *ngFor="let option of allOptions"
-      <a *ngIf="contentType=='community'" [routerLink]="['/communities/' + id ]" class="list-group-item" routerLinkActive="active" >{{'community.all-lists.head' | translate}}</a>
+         class="list-group-item"
-      <a *ngFor="let config of types" class="list-group-item" [routerLink]="['/browse/' + config.id]" [queryParams]="{scope: id}" routerLinkActive="active">{{'browse.comcol.by.' + config.id | translate}}</a>
+         [routerLink]="option.routerLink"
+         [queryParams]="option.params"
+         routerLinkActive="active">{{ option.label | translate }}</a>
     </div>
   </div>
-  <div class="d-block d-sm-none">
 
+  <div class="d-block d-sm-none">
     <select name="browse-type"
             class="form-control"
             aria-label="Browse Community or Collection"
-            (ngModelChange)="onSelectChange($event)"
+            (ngModelChange)="onSelectChange($event)" [ngModel]="currentOptionId$ | async">
-            [ngModel]="currentOptionId$ | async">
       <option *ngFor="let option of allOptions"
-            [ngValue]="option.id"
+              [ngValue]="option.id"
-            [attr.selected]="(currentOptionId$ | async) === option.id ? 'selected' : null">{{ option.label | translate }}</option>
+              [attr.selected]="(currentOptionId$ | async) === option.id ? 'selected' : null">{{ option.label | translate }}</option>
     </select>
   </div>
 </nav>

src/app/shared/comcol-page-browse-by/comcol-page-browse-by.component.ts

@@ -1,4 +1,11 @@
-import { Component, Inject, Input, NgZone, OnDestroy, OnInit } from '@angular/core';
+import {
+  ChangeDetectionStrategy,
+  Component,
+  Inject,
+  Input, NgZone,
+  OnDestroy,
+  OnInit
+} from '@angular/core';
 import { Observable } from 'rxjs/internal/Observable';
 import { Subscription } from 'rxjs/internal/Subscription';
 import { filter, map, startWith, tap } from 'rxjs/operators';
@@ -15,6 +22,7 @@ export interface ComColPageNavOption {
   routerLink: string
   params?: any;
 };
+
 /**
  * A component to display the "Browse By" section of a Community or Collection page
  * It expects the ID of the Community or Collection as input to be passed on as a scope
@@ -22,7 +30,7 @@ export interface ComColPageNavOption {
 @Component({
   selector: 'ds-comcol-page-browse-by',
   styleUrls: ['./comcol-page-browse-by.component.scss'],
-  templateUrl: './comcol-page-browse-by.component.html',
+  templateUrl: './comcol-page-browse-by.component.html'
 })
 export class ComcolPageBrowseByComponent implements OnInit {
   /**
@@ -39,17 +47,20 @@ export class ComcolPageBrowseByComponent implements OnInit {
 
   currentOptionId$: Observable<string>;
 
-  constructor(@Inject(GLOBAL_CONFIG) public config: GlobalConfig,  private route: ActivatedRoute, private router: Router) {
+  constructor(
+    @Inject(GLOBAL_CONFIG) public config: GlobalConfig,
+    private route: ActivatedRoute,
+    private router: Router) {
   }
 
   ngOnInit(): void {
     this.allOptions = this.config.browseBy.types
-    .map((config: BrowseByTypeConfig) => ({
+      .map((config: BrowseByTypeConfig) => ({
-      id: config.id,
+        id: config.id,
-      label: `browse.comcol.by.${config.id}`,
+        label: `browse.comcol.by.${config.id}`,
-      routerLink: `/browse/${config.id}`,
+        routerLink: `/browse/${config.id}`,
-      params: { scope: this.id }
+        params: { scope: this.id }
-    }));
+      }));
 
     if (this.contentType === 'collection') {
       this.allOptions = [ {
@@ -64,14 +75,17 @@ export class ComcolPageBrowseByComponent implements OnInit {
           routerLink: getCommunityPageRoute(this.id)
         }, ...this.allOptions ];
     }
+
     this.currentOptionId$ = this.route.url.pipe(
       filter((urlSegments: UrlSegment[]) => hasValue(urlSegments)),
       map((urlSegments: UrlSegment[]) => urlSegments[urlSegments.length - 1].path)
     );
   }
+
   onSelectChange(newId: string) {
-      const selectedOption = this.allOptions
+    const selectedOption = this.allOptions
-        .find((option: ComColPageNavOption) => option.id === newId);
+      .find((option: ComColPageNavOption) => option.id === newId);
-      this.router.navigate([selectedOption.routerLink], { queryParams: selectedOption.params });
+
+    this.router.navigate([selectedOption.routerLink], { queryParams: selectedOption.params });
   }
 }