from @art-lowel: create array and map all options to it

I created a list in the component that contains all the possible values a button or an option in the select can have, that way we can get rid of those *ngIfs in the template, and render everything with an *ngFor
Instead of putting all the data needed to select an option and to redirect to the correct option in the template, I created an interface to represent all the info we need: ComColPageNavOption
During ngOnInit, I first take the browseBy types in the config, and perform a map operation on them, that basically means, turn every element of this array in to something else using the function inside the map operator.
So inside the map function I each BrowseByTypeConfig object in to a ComColPageNavOption object
Afterwards I check whether we're dealing with a collection or a community, and in each case I create a ComColPageNavOption object, and add it to the front of the allOptions array
...this.allOptions means enumerate everything that's currently in the allOptions array, so I put my new object first, then enumerate everything that was already there, and assign the result again to this.allOptions

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

@@ -12,34 +12,7 @@
 
     <select name="browse-type" class="form-control" aria-label="Browse Community or Collection" (change)="onSelectChange(($event.target))">
 
-      <option *ngIf="contentType=='collection'"
+      <option *ngFor="let option of allOptions" >{{ option.label | translate }}</option>
-        [value]="['/collections/' + id ]"
-        [routerLink]="['/collections/' + id ]"
-        routerLinkActive="active"
-        #rla="routerLinkActive"
-        [attr.selected]="rla.isActive === true ? 'selected' : null "  >
-        {{'collection.page.browse.recent.head' | translate}}
-      </option>
-
-      <option *ngIf="contentType=='community'"
-        [value]="['/communities/' + id ]"
-        [routerLink]="['/communities/' + id ]"
-        routerLinkActive="active"
-        #rla="routerLinkActive"
-        [attr.selected]="rla.isActive === true ? 'selected' : null "  >
-        {{'community.all-lists.head' | translate}}
-      </option>
-
-      <option *ngFor="let config of types"
-        [value]="['/browse/' + config.id]"
-        [routerLink]="['/browse/' + config.id]"
-        [queryParams]="{scope: id}"
-        [attr.data-params]="[id]"
-        routerLinkActive="active"
-        #rla="routerLinkActive"
-        [attr.selected]="rla.isActive === true ? 'selected' : null ">
-        {{'browse.comcol.by.' + config.id | translate}}
-      </option>
     </select>
   </div>
 </nav>

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

@@ -1,8 +1,17 @@
 import { Component, Inject, Input, OnInit } from '@angular/core';
+import { filter, map, startWith, tap } from 'rxjs/operators';
+import { getCollectionPageRoute } from '../../+collection-page/collection-page-routing.module';
+import { getCommunityPageRoute } from '../../+community-page/community-page-routing.module';
 import { GLOBAL_CONFIG, GlobalConfig } from '../../../config';
 import { Router, ActivatedRoute, RouterModule } from '@angular/router';
 import { BrowseByTypeConfig } from '../../../config/browse-by-type-config.interface';
 
+export interface ComColPageNavOption {
+  id: string;
+  label: string,
+  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
@@ -23,11 +32,34 @@ export class ComcolPageBrowseByComponent implements OnInit {
    */
   types: BrowseByTypeConfig[];
 
+  allOptions: ComColPageNavOption[];
+
   constructor(@Inject(GLOBAL_CONFIG) public config: GlobalConfig, private router: Router) {
   }
 
   ngOnInit(): void {
-    this.types = this.config.browseBy.types;
+    this.allOptions = this.config.browseBy.types
+    .map((config: BrowseByTypeConfig) => ({
+      id: config.id,
+      label: `browse.comcol.by.${config.id}`,
+      routerLink: `/browse/${config.id}`,
+      params: { scope: this.id }
+    }));
+
+    if (this.contentType === 'collection') {
+      this.allOptions = [ {
+        id: this.id,
+        label: 'collection.page.browse.recent.head',
+        routerLink: getCollectionPageRoute(this.id)
+      }, ...this.allOptions ];
+    } else if (this.contentType === 'community') {
+      this.allOptions = [{
+          id: this.id,
+          label: 'community.all-lists.head',
+          routerLink: getCommunityPageRoute(this.id)
+        }, ...this.allOptions ];
+    }
+
   }
   onSelectChange(target) {
     const optionIndex = target.selectedIndex;