refactored template variables

src/app/+collection-page/collection-page.component.html

@@ -1,51 +1,55 @@
-<div class="collection-page">
+<div class="collection-page"
-  <div *ngIf="(collectionData | async)?.hasSucceeded" @fadeInOut>
+     *ngVar="(collectionRDObs | async) as collectionRD"
-    <div *ngIf="(collectionData | async)?.payload; let collectionPayload">
+  >
+  <div *ngIf="collectionRD?.hasSucceeded" @fadeInOut>
+    <div *ngIf="collectionRD?.payload as collection">
       <!-- Collection Name -->
       <ds-comcol-page-header
-        [name]="collectionPayload.name">
+        [name]="collection.name">
       </ds-comcol-page-header>
       <!-- Collection logo -->
-      <ds-comcol-page-logo *ngIf="logoData"
+      <ds-comcol-page-logo *ngIf="logoRDObs"
-        [logo]="(logoData | async)?.payload"
+        [logo]="(logoRDObs | async)?.payload"
         [alternateText]="'Collection Logo'">
       </ds-comcol-page-logo>
       <!-- Introductionary text -->
       <ds-comcol-page-content
-        [content]="collectionPayload.introductoryText"
+        [content]="collection.introductoryText"
         [hasInnerHtml]="true">
       </ds-comcol-page-content>
       <!-- News -->
       <ds-comcol-page-content
-        [content]="collectionPayload.sidebarText"
+        [content]="collection.sidebarText"
         [hasInnerHtml]="true"
         [title]="'community.page.news'">
       </ds-comcol-page-content>
       <!-- Copyright -->
       <ds-comcol-page-content
-        [content]="collectionPayload.copyrightText"
+        [content]="collection.copyrightText"
         [hasInnerHtml]="true">
       </ds-comcol-page-content>
       <!-- Licence -->
       <ds-comcol-page-content
-        [content]="collectionPayload.license"
+        [content]="collection.license"
         [title]="'collection.page.license'">
       </ds-comcol-page-content>
     </div>
   </div>
-  <ds-error *ngIf="(collectionData | async)?.hasFailed" message="{{'error.collection' | translate}}"></ds-error>
+  <ds-error *ngIf="collectionRD?.hasFailed" message="{{'error.collection' | translate}}"></ds-error>
-  <ds-loading *ngIf="(collectionData | async)?.isLoading" message="{{'loading.collection' | translate}}"></ds-loading>
+  <ds-loading *ngIf="collectionRD?.isLoading" message="{{'loading.collection' | translate}}"></ds-loading>
   <br>
-  <div *ngIf="(itemData | async)?.hasSucceeded" @fadeIn>
+  <ng-container *ngVar="(itemRDObs | async) as itemRD">
+    <div *ngIf="itemRD?.hasSucceeded" @fadeIn>
       <h2>{{'collection.page.browse.recent.head' | translate}}</h2>
       <ds-object-list
         [config]="paginationConfig"
         [sortConfig]="sortConfig"
-      [objects]="(itemData | async)"
+        [objects]="itemRD"
         [hideGear]="false"
         (paginationChange)="onPaginationChange($event)">
       </ds-object-list>
     </div>
-  <ds-error *ngIf="(itemData | async)?.hasFailed" message="{{'error.recent-submissions' | translate}}"></ds-error>
+    <ds-error *ngIf="itemRD?.hasFailed" message="{{'error.recent-submissions' | translate}}"></ds-error>
-  <ds-loading *ngIf="!itemData || (itemData | async).isLoading" message="{{'loading.recent-submissions' | translate}}"></ds-loading>
+    <ds-loading *ngIf="!itemRD || itemRD.isLoading" message="{{'loading.recent-submissions' | translate}}"></ds-loading>
+  </ng-container>
 </div>

src/app/+collection-page/collection-page.component.ts

@@ -29,9 +29,9 @@ import { PaginationComponentOptions } from '../shared/pagination/pagination-comp
   ]
 })
 export class CollectionPageComponent implements OnInit, OnDestroy {
-  collectionData: Observable<RemoteData<Collection>>;
+  collectionRDObs: Observable<RemoteData<Collection>>;
-  itemData: Observable<RemoteData<Item[]>>;
+  itemRDObs: Observable<RemoteData<Item[]>>;
-  logoData: Observable<RemoteData<Bitstream>>;
+  logoRDObs: Observable<RemoteData<Bitstream>>;
   paginationConfig: PaginationComponentOptions;
   sortConfig: SortOptions;
   private subs: Subscription[] = [];
@@ -60,12 +60,12 @@ export class CollectionPageComponent implements OnInit, OnDestroy {
         })
         .subscribe((params) => {
           this.collectionId = params.id;
-          this.collectionData = this.collectionDataService.findById(this.collectionId);
+          this.collectionRDObs = this.collectionDataService.findById(this.collectionId);
-          this.metadata.processRemoteData(this.collectionData);
+          this.metadata.processRemoteData(this.collectionRDObs);
-          this.subs.push(this.collectionData
+          this.subs.push(this.collectionRDObs
             .map((rd: RemoteData<Collection>) => rd.payload)
             .filter((collection: Collection) => hasValue(collection))
-            .subscribe((collection: Collection) => this.logoData = collection.logo));
+            .subscribe((collection: Collection) => this.logoRDObs = collection.logo));
 
           const page = +params.page || this.paginationConfig.currentPage;
           const pageSize = +params.pageSize || this.paginationConfig.pageSize;
@@ -87,7 +87,7 @@ export class CollectionPageComponent implements OnInit, OnDestroy {
   }
 
   updatePage(searchOptions) {
-    this.itemData = this.itemDataService.findAll({
+    this.itemRDObs = this.itemDataService.findAll({
       scopeID: this.collectionId,
       currentPage: searchOptions.pagination.currentPage,
       elementsPerPage: searchOptions.pagination.pageSize,

src/app/+community-page/community-page.component.html

@@ -1,10 +1,11 @@
-<div class="community-page" *ngIf="(communityData | async)?.hasSucceeded" @fadeInOut>
+<ng-container *ngVar="(communityRDObs | async) as communityRD">
-  <div *ngIf="(communityData | async)?.payload; let communityPayload">
+  <div class="community-page" *ngIf="communityRD?.hasSucceeded" @fadeInOut>
+    <div *ngIf="communityRD?.payload; let communityPayload">
       <!-- Community name -->
       <ds-comcol-page-header [name]="communityPayload.name"></ds-comcol-page-header>
       <!-- Community logo -->
-    <ds-comcol-page-logo *ngIf="logoData"
+      <ds-comcol-page-logo *ngIf="logoRDObs"
-      [logo]="(logoData | async)?.payload"
+                           [logo]="(logoRDObs | async)?.payload"
                            [alternateText]="'Community Logo'">
       </ds-comcol-page-logo>
       <!-- Introductionary text -->
@@ -26,5 +27,6 @@
       <ds-community-page-sub-collection-list></ds-community-page-sub-collection-list>
     </div>
   </div>
-<ds-error *ngIf="(communityData | async)?.hasFailed" message="{{'error.community' | translate}}"></ds-error>
+  <ds-error *ngIf="communityRD?.hasFailed" message="{{'error.community' | translate}}"></ds-error>
-<ds-loading *ngIf="(communityData | async)?.isLoading" message="{{'loading.community' | translate}}"></ds-loading>
+  <ds-loading *ngIf="communityRD?.isLoading" message="{{'loading.community' | translate}}"></ds-loading>
+</ng-container>

src/app/+community-page/community-page.component.ts

@@ -22,8 +22,8 @@ import { Observable } from 'rxjs/Observable';
   animations: [fadeInOut]
 })
 export class CommunityPageComponent implements OnInit, OnDestroy {
-  communityData: Observable<RemoteData<Community>>;
+  communityRDObs: Observable<RemoteData<Community>>;
-  logoData: Observable<RemoteData<Bitstream>>;
+  logoRDObs: Observable<RemoteData<Bitstream>>;
   private subs: Subscription[] = [];
 
   constructor(
@@ -36,12 +36,12 @@ export class CommunityPageComponent implements OnInit, OnDestroy {
 
   ngOnInit(): void {
     this.route.params.subscribe((params: Params) => {
-      this.communityData = this.communityDataService.findById(params.id);
+      this.communityRDObs = this.communityDataService.findById(params.id);
-      this.metadata.processRemoteData(this.communityData);
+      this.metadata.processRemoteData(this.communityRDObs);
-      this.subs.push(this.communityData
+      this.subs.push(this.communityRDObs
         .map((rd: RemoteData<Community>) => rd.payload)
         .filter((community: Community) => hasValue(community))
-        .subscribe((community: Community) => this.logoData = community.logo));
+        .subscribe((community: Community) => this.logoRDObs = community.logo));
     });
   }
 

src/app/+community-page/sub-collection-list/community-page-sub-collection-list.component.html

@@ -1,7 +1,8 @@
-<div *ngIf="(subCollections | async)?.hasSucceeded" @fadeIn>
+<ng-container *ngVar="(subCollectionsRDObs | async) as subCollectionsRD">
+  <div *ngIf="subCollectionsRD?.hasSucceeded" @fadeIn>
     <h2>{{'community.sub-collection-list.head' | translate}}</h2>
     <ul>
-    <li *ngFor="let collection of (subCollections | async)?.payload">
+      <li *ngFor="let collection of subCollectionsRD?.payload">
         <p>
           <span class="lead"><a [routerLink]="['/collections', collection.id]">{{collection.name}}</a></span><br>
           <span class="text-muted">{{collection.shortDescription}}</span>
@@ -9,5 +10,6 @@
       </li>
     </ul>
   </div>
-<ds-error *ngIf="(subCollections | async)?.hasFailed" message="{{'error.sub-collections' | translate}}"></ds-error>
+  <ds-error *ngIf="subCollectionsRD?.hasFailed" message="{{'error.sub-collections' | translate}}"></ds-error>
-<ds-loading *ngIf="(subCollections | async)?.isLoading" message="{{'loading.sub-collections' | translate}}"></ds-loading>
+  <ds-loading *ngIf="subCollectionsRD?.isLoading" message="{{'loading.sub-collections' | translate}}"></ds-loading>
+</ng-container>

src/app/+community-page/sub-collection-list/community-page-sub-collection-list.component.ts

@@ -14,13 +14,13 @@ import { Observable } from 'rxjs/Observable';
   animations:[fadeIn]
 })
 export class CommunityPageSubCollectionListComponent implements OnInit {
-  subCollections: Observable<RemoteData<Collection[]>>;
+  subCollectionsRDObs: Observable<RemoteData<Collection[]>>;
 
   constructor(private cds: CollectionDataService) {
 
   }
 
   ngOnInit(): void {
-    this.subCollections = this.cds.findAll();
+    this.subCollectionsRDObs = this.cds.findAll();
   }
 }

src/app/+home-page/top-level-community-list/top-level-community-list.component.html

@@ -1,13 +1,15 @@
-<div *ngIf="(topLevelCommunities | async)?.hasSucceeded" @fadeInOut>
+<ng-container *ngVar="(communitiesRDObs | async) as communitiesRD">
+  <div *ngIf="communitiesRD?.hasSucceeded" @fadeInOut>
     <h2>{{'home.top-level-communities.head' | translate}}</h2>
     <p class="lead">{{'home.top-level-communities.help' | translate}}</p>
     <ds-object-list
       [config]="config"
       [sortConfig]="sortConfig"
-    [objects]="topLevelCommunities | async"
+      [objects]="communitiesRD"
       [hideGear]="true"
       (paginationChange)="updatePage($event)">
     </ds-object-list>
   </div>
-<ds-error *ngIf="(topLevelCommunities | async)?.hasFailed" message="{{'error.top-level-communites' | translate}}"></ds-error>
+  <ds-error *ngIf="communitiesRD?.hasFailed" message="{{'error.top-level-communites' | translate}}"></ds-error>
-<ds-loading *ngIf="(topLevelCommunities | async)?.isLoading" message="{{'loading.top-level-communities' | translate}}"></ds-loading>
+  <ds-loading *ngIf="communitiesRD?.isLoading" message="{{'loading.top-level-communities' | translate}}"></ds-loading>
+</ng-container>

src/app/+home-page/top-level-community-list/top-level-community-list.component.ts

@@ -17,7 +17,7 @@ import { PaginationComponentOptions } from '../../shared/pagination/pagination-c
   animations: [fadeInOut]
 })
 export class TopLevelCommunityListComponent {
-  topLevelCommunities: Observable<RemoteData<Community[]>>;
+  communitiesRDObs: Observable<RemoteData<Community[]>>;
   config: PaginationComponentOptions;
   sortConfig: SortOptions;
 
@@ -37,7 +37,7 @@ export class TopLevelCommunityListComponent {
   }
 
   updatePage(data) {
-    this.topLevelCommunities = this.cds.findAll({
+    this.communitiesRDObs = this.cds.findAll({
       currentPage: data.page,
       elementsPerPage: data.pageSize,
       sort: { field: data.sortField, direction: data.sortDirection }

src/app/+item-page/full/field-components/file-section/full-file-section.component.html

@@ -1,5 +1,5 @@
 <ds-metadata-field-wrapper [label]="label | translate">
-    <div class="file-section row" *ngFor="let file of (files | async); let last=last;">
+    <div class="file-section row" *ngFor="let file of (bitstreamsObs | async); let last=last;">
         <div class="col-3">
             <ds-thumbnail [thumbnail]="thumbnails.get(file.id) | async"></ds-thumbnail>
         </div>
@@ -13,7 +13,7 @@
 
 
                 <dt class="col-md-4">{{"item.page.filesection.format" | translate}}</dt>
-                <dd class="col-md-8">{{(file.mimetype)}}</dd>
+                <dd class="col-md-8">{{(file.format.)}}</dd>
 
 
                 <dt class="col-md-4">{{"item.page.filesection.description" | translate}}</dt>

src/app/+item-page/full/field-components/file-section/full-file-section.component.ts

@@ -22,7 +22,7 @@ export class FullFileSectionComponent extends FileSectionComponent implements On
 
   label: string;
 
-  files: Observable<Bitstream[]>;
+  bitstreamsObs: Observable<Bitstream[]>;
 
   thumbnails: Map<string, Observable<Bitstream>> = new Map();
 
@@ -33,8 +33,8 @@ export class FullFileSectionComponent extends FileSectionComponent implements On
   initialize(): void {
     const originals = this.item.getFiles();
     const licenses = this.item.getBitstreamsByBundleName('LICENSE');
-    this.files = Observable.combineLatest(originals, licenses, (o, l) => [...o, ...l]);
+    this.bitstreamsObs = Observable.combineLatest(originals, licenses, (o, l) => [...o, ...l]);
-    this.files.subscribe(
+    this.bitstreamsObs.subscribe(
       (files) =>
         files.forEach(
           (original) => {

src/app/+item-page/full/full-item-page.component.html

@@ -1,23 +1,25 @@
-<div class="item-page" *ngIf="(item | async)?.hasSucceeded" @fadeInOut>
+<ng-container *ngVar="(itemRDObs | async) as itemRD">
-  <div *ngIf="(item | async)?.payload; let itemPayload">
+  <div class="item-page" *ngIf="itemRD?.hasSucceeded" @fadeInOut>
-    <ds-item-page-title-field [item]="itemPayload"></ds-item-page-title-field>
+    <div *ngIf="itemRD?.payload as item">
+      <ds-item-page-title-field [item]="item"></ds-item-page-title-field>
       <div class="simple-view-link">
-      <a class="btn btn-outline-primary col-4" [routerLink]="['/items/' + itemPayload.id]">
+        <a class="btn btn-outline-primary col-4" [routerLink]="['/items/' + item.id]">
           {{"item.page.link.simple" | translate}}
         </a>
       </div>
       <table class="table table-responsive table-striped">
         <tbody>
-        <tr *ngFor="let metadatum of (metadata | async)">
+        <tr *ngFor="let metadatum of (metadataObs | async)">
           <td>{{metadatum.key}}</td>
           <td>{{metadatum.value}}</td>
           <td>{{metadatum.language}}</td>
         </tr>
         </tbody>
       </table>
-    <ds-item-page-full-file-section [item]="itemPayload"></ds-item-page-full-file-section>
+      <ds-item-page-full-file-section [item]="item"></ds-item-page-full-file-section>
-    <ds-item-page-collections [item]="itemPayload"></ds-item-page-collections>
+      <ds-item-page-collections [item]="item"></ds-item-page-collections>
     </div>
   </div>
-<ds-error *ngIf="(item | async)?.hasFailed" message="{{'error.item' | translate}}"></ds-error>
+  <ds-error *ngIf="itemRD?.hasFailed" message="{{'error.item' | translate}}"></ds-error>
-<ds-loading *ngIf="(item | async)?.isLoading" message="{{'loading.item' | translate}}"></ds-loading>
+  <ds-loading *ngIf="itemRD?.isLoading" message="{{'loading.item' | translate}}"></ds-loading>
+</ng-container>

src/app/+item-page/full/full-item-page.component.ts

@@ -30,9 +30,9 @@ import { hasValue } from '../../shared/empty.util';
 })
 export class FullItemPageComponent extends ItemPageComponent implements OnInit {
 
-  item: Observable<RemoteData<Item>>;
+  itemRDObs: Observable<RemoteData<Item>>;
 
-  metadata: Observable<Metadatum[]>;
+  metadataObs: Observable<Metadatum[]>;
 
   constructor(route: ActivatedRoute, items: ItemDataService, metadataService: MetadataService) {
     super(route, items, metadataService);
@@ -45,7 +45,7 @@ export class FullItemPageComponent extends ItemPageComponent implements OnInit {
 
   initialize(params) {
     super.initialize(params);
-    this.metadata = this.item
+    this.metadataObs = this.itemRDObs
       .map((rd: RemoteData<Item>) => rd.payload)
       .filter((item: Item) => hasValue(item))
       .map((item: Item) => item.metadata);

src/app/+item-page/simple/field-components/file-section/file-section.component.html

@@ -1,9 +1,11 @@
-<ds-metadata-field-wrapper *ngIf="(files | async)?.length > 0" [label]="label | translate">
+<ng-container *ngVar="(bitstreamsObs | async) as bitstreams">
+  <ds-metadata-field-wrapper *ngIf="bitstreams?.length > 0" [label]="label | translate">
     <div class="file-section">
-        <a *ngFor="let file of (files | async); let last=last;" [href]="file?.content" [download]="file?.name">
+      <a *ngFor="let file of bitstreams; let last=last;" [href]="file?.content" [download]="file?.name">
         <span>{{file?.name}}</span>
         <span>({{(file?.sizeBytes) | dsFileSize }})</span>
         <span *ngIf="!last" innerHTML="{{separator}}"></span>
       </a>
     </div>
   </ds-metadata-field-wrapper>
+</ng-container>

src/app/+item-page/simple/field-components/file-section/file-section.component.ts

@@ -20,14 +20,14 @@ export class FileSectionComponent implements OnInit {
 
   separator = '<br/>';
 
-  files: Observable<Bitstream[]>;
+  bitstreamsObs: Observable<Bitstream[]>;
 
   ngOnInit(): void {
     this.initialize();
   }
 
   initialize(): void {
-    this.files = this.item.getFiles();
+    this.bitstreamsObs = this.item.getFiles();
   }
 
 }

src/app/+item-page/simple/item-page.component.html

@@ -1,21 +1,22 @@
-<div class="item-page" *ngIf="(item | async)?.hasSucceeded" @fadeInOut>
+<ng-container *ngVar="(itemRDObs | async) as itemRD">
-  <div *ngIf="(item | async)?.payload; let itemPayload">
+  <div class="item-page" *ngIf="itemRD?.hasSucceeded" @fadeInOut>
-    <ds-item-page-title-field [item]="itemPayload"></ds-item-page-title-field>
+    <div *ngIf="itemRD?.payload as item">
+      <ds-item-page-title-field [item]="item"></ds-item-page-title-field>
       <div class="row">
         <div class="col-xs-12 col-md-4">
           <ds-metadata-field-wrapper>
-          <ds-thumbnail [thumbnail]="thumbnail | async"></ds-thumbnail>
+            <ds-thumbnail [thumbnail]="thumbnailObs | async"></ds-thumbnail>
           </ds-metadata-field-wrapper>
-        <ds-item-page-file-section [item]="itemPayload"></ds-item-page-file-section>
+          <ds-item-page-file-section [item]="item"></ds-item-page-file-section>
-        <ds-item-page-date-field [item]="itemPayload"></ds-item-page-date-field>
+          <ds-item-page-date-field [item]="item"></ds-item-page-date-field>
-        <ds-item-page-author-field [item]="itemPayload"></ds-item-page-author-field>
+          <ds-item-page-author-field [item]="item"></ds-item-page-author-field>
         </div>
         <div class="col-xs-12 col-md-6">
-        <ds-item-page-abstract-field [item]="itemPayload"></ds-item-page-abstract-field>
+          <ds-item-page-abstract-field [item]="item"></ds-item-page-abstract-field>
-        <ds-item-page-uri-field [item]="itemPayload"></ds-item-page-uri-field>
+          <ds-item-page-uri-field [item]="item"></ds-item-page-uri-field>
-        <ds-item-page-collections [item]="itemPayload"></ds-item-page-collections>
+          <ds-item-page-collections [item]="item"></ds-item-page-collections>
           <div>
-          <a class="btn btn-outline-primary" [routerLink]="['/items/' + itemPayload.id + '/full']">
+            <a class="btn btn-outline-primary" [routerLink]="['/items/' + item.id + '/full']">
               {{"item.page.link.full" | translate}}
             </a>
           </div>
@@ -23,5 +24,6 @@
       </div>
     </div>
   </div>
-<ds-error *ngIf="(item | async)?.hasFailed" message="{{'error.item' | translate}}"></ds-error>
+  <ds-error *ngIf="itemRD?.hasFailed" message="{{'error.item' | translate}}"></ds-error>
-<ds-loading *ngIf="(item | async)?.isLoading" message="{{'loading.item' | translate}}"></ds-loading>
+  <ds-loading *ngIf="itemRD?.isLoading" message="{{'loading.item' | translate}}"></ds-loading>
+</ng-container>

src/app/+item-page/simple/item-page.component.ts

@@ -31,9 +31,9 @@ export class ItemPageComponent implements OnInit {
 
   private sub: any;
 
-  item: Observable<RemoteData<Item>>;
+  itemRDObs: Observable<RemoteData<Item>>;
 
-  thumbnail: Observable<Bitstream>;
+  thumbnailObs: Observable<Bitstream>;
 
   constructor(
     private route: ActivatedRoute,
@@ -51,9 +51,9 @@ export class ItemPageComponent implements OnInit {
 
   initialize(params) {
     this.id = +params.id;
-    this.item = this.items.findById(params.id);
+    this.itemRDObs = this.items.findById(params.id);
-    this.metadataService.processRemoteData(this.item);
+    this.metadataService.processRemoteData(this.itemRDObs);
-    this.thumbnail = this.item
+    this.thumbnailObs = this.itemRDObs
       .map((rd: RemoteData<Item>) => rd.payload)
       .filter((item: Item) => hasValue(item))
       .flatMap((item: Item) => item.getThumbnail());

src/app/+search-page/search-page.component.html

@@ -1,10 +1,10 @@
 <div class="search-page">
     <ds-search-form
       [query]="query"
-      [scope]="(scopeObject | async)?.payload"
+      [scope]="(scopeObjectRDObs | async)?.payload"
       [currentParams]="currentParams"
-      [scopes]="(scopeList | async)?.payload">
+      [scopes]="(scopeListRDObs | async)?.payload">
     </ds-search-form>
     <ds-view-mode-switch></ds-view-mode-switch>
-    <ds-search-results [searchResults]="results | async" [searchConfig]="searchOptions"></ds-search-results>
+    <ds-search-results [searchResults]="resultsRDObs | async" [searchConfig]="searchOptions"></ds-search-results>
 </div>

src/app/+search-page/search-page.component.spec.ts

@@ -103,7 +103,7 @@ describe('SearchPageComponent', () => {
 
       (comp as any).updateSearchResults({});
 
-      expect(comp.results as any).toBe(mockResults);
+      expect(comp.resultsRDObs as any).toBe(mockResults);
     });
 
   });

src/app/+search-page/search-page.component.ts

@@ -31,18 +31,18 @@ export class SearchPageComponent implements OnInit, OnDestroy {
   private scope: string;
 
   query: string;
-  scopeObject: Observable<RemoteData<DSpaceObject>>;
+  scopeObjectRDObs: Observable<RemoteData<DSpaceObject>>;
-  results: Observable<RemoteData<Array<SearchResult<DSpaceObject>>>>;
+  resultsRDObs: Observable<RemoteData<Array<SearchResult<DSpaceObject>>>>;
   currentParams = {};
   searchOptions: SearchOptions;
-  scopeList: Observable<RemoteData<Community[]>>;
+  scopeListRDObs: Observable<RemoteData<Community[]>>;
 
   constructor(
     private service: SearchService,
     private route: ActivatedRoute,
     private communityService: CommunityDataService
   ) {
-    this.scopeList = communityService.findAll();
+    this.scopeListRDObs = communityService.findAll();
     // Initial pagination config
     const pagination: PaginationComponentOptions = new PaginationComponentOptions();
     pagination.id = 'search-results-pagination';
@@ -76,9 +76,9 @@ export class SearchPageComponent implements OnInit, OnDestroy {
             sort: sort
           });
           if (isNotEmpty(this.scope)) {
-            this.scopeObject = this.communityService.findById(this.scope);
+            this.scopeObjectRDObs = this.communityService.findById(this.scope);
           } else {
-            this.scopeObject = Observable.of(undefined);
+            this.scopeObjectRDObs = Observable.of(undefined);
           }
         }
       );
@@ -86,7 +86,7 @@ export class SearchPageComponent implements OnInit, OnDestroy {
 
   private updateSearchResults(searchOptions) {
     // Resolve search results
-    this.results = this.service.search(this.query, this.scope, searchOptions);
+    this.resultsRDObs = this.service.search(this.query, this.scope, searchOptions);
   }
 
   ngOnDestroy() {

src/app/shared/shared.module.ts

@@ -30,6 +30,7 @@ import { SearchResultListElementComponent } from '../object-list/search-result-l
 import { SearchFormComponent } from './search-form/search-form.component';
 import { WrapperListElementComponent } from '../object-list/wrapper-list-element/wrapper-list-element.component';
 import { ViewModeSwitchComponent } from './view-mode-switch/view-mode-switch.component';
+import { VarDirective } from './utils/var.directive';
 
 const MODULES = [
   // Do NOT include UniversalModule, HttpModule, or JsonpModule here
@@ -74,6 +75,10 @@ const ENTRY_COMPONENTS = [
   SearchResultListElementComponent
 ];
 
+const DIRECTIVES = [
+  VarDirective
+];
+
 @NgModule({
   imports: [
     ...MODULES
@@ -81,12 +86,14 @@ const ENTRY_COMPONENTS = [
   declarations: [
     ...PIPES,
     ...COMPONENTS,
+    ...DIRECTIVES,
     ...ENTRY_COMPONENTS
   ],
   exports: [
     ...MODULES,
     ...PIPES,
-    ...COMPONENTS
+    ...COMPONENTS,
+    ...DIRECTIVES
   ],
   entryComponents: [
     ...ENTRY_COMPONENTS

src/app/shared/utils/var.directive.ts

@@ -0,0 +1,23 @@
+import { Directive, Input, TemplateRef, ViewContainerRef } from '@angular/core';
+
+/* tslint:disable:directive-selector */
+@Directive({
+  selector: '[ngVar]',
+})
+export class VarDirective {
+  @Input()
+  set ngVar(context: any) {
+    this.context.$implicit = this.context.ngVar = context;
+    this.updateView();
+  }
+
+  context: any = {};
+
+  constructor(private vcRef: ViewContainerRef, private templateRef: TemplateRef<any>) {}
+
+  updateView() {
+    this.vcRef.clear();
+    this.vcRef.createEmbeddedView(this.templateRef, this.context);
+  }
+}
+/* tslint:enable:directive-selector */

src/modules/app/browser-app.module.ts

@@ -40,7 +40,7 @@ export function createTranslateLoader(http: HttpClient) {
     // forRoot ensures the providers are only created once
     IdlePreloadModule.forRoot(),
     RouterModule.forRoot([], {
-      // enableTracing: true,
+      enableTracing: true,
       useHash: false,
       preloadingStrategy:
       IdlePreload