reduce async observables with local assignment

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

 <div class="collection-page">
   <div *ngIf="collectionData.hasSucceeded | async" @fadeInOut>
-    <!-- Collection Name -->
-    <ds-comcol-page-header
-      [name]="(collectionData.payload | async)?.name">
-    </ds-comcol-page-header>
-    <!-- Collection logo -->
-    <ds-comcol-page-logo *ngIf="logoData"
-      [logo]="logoData.payload | async"
-      [alternateText]="'Collection Logo'">
-    </ds-comcol-page-logo>
-    <!-- Introductionary text -->
-    <ds-comcol-page-content
-      [content]="(collectionData.payload | async)?.introductoryText"
-      [hasInnerHtml]="true">
-    </ds-comcol-page-content>
-    <!-- News -->
-    <ds-comcol-page-content
-      [content]="(collectionData.payload | async)?.sidebarText"
-      [hasInnerHtml]="true"
-      [title]="'community.page.news'">
-    </ds-comcol-page-content>
-    <!-- Copyright -->
-    <ds-comcol-page-content
-      [content]="(collectionData.payload | async)?.copyrightText"
-      [hasInnerHtml]="true">
-    </ds-comcol-page-content>
-    <!-- Licence -->
-    <ds-comcol-page-content
-      [content]="(collectionData.payload | async)?.license"
-      [title]="'collection.page.license'">
-    </ds-comcol-page-content>
+    <div *ngIf="collectionData.payload | async; let collectionPayload">
+      <!-- Collection Name -->
+      <ds-comcol-page-header
+        [name]="collectionPayload.name">
+      </ds-comcol-page-header>
+      <!-- Collection logo -->
+      <ds-comcol-page-logo *ngIf="logoData"
+        [logo]="logoData.payload | async"
+        [alternateText]="'Collection Logo'">
+      </ds-comcol-page-logo>
+      <!-- Introductionary text -->
+      <ds-comcol-page-content
+        [content]="collectionPayload.introductoryText"
+        [hasInnerHtml]="true">
+      </ds-comcol-page-content>
+      <!-- News -->
+      <ds-comcol-page-content
+        [content]="collectionPayload.sidebarText"
+        [hasInnerHtml]="true"
+        [title]="'community.page.news'">
+      </ds-comcol-page-content>
+      <!-- Copyright -->
+      <ds-comcol-page-content
+        [content]="collectionPayload.copyrightText"
+        [hasInnerHtml]="true">
+      </ds-comcol-page-content>
+      <!-- Licence -->
+      <ds-comcol-page-content
+        [content]="collectionPayload.license"
+        [title]="'collection.page.license'">
+      </ds-comcol-page-content>
+    </div>
   </div>
   <ds-error *ngIf="collectionData.hasFailed | async" message="Error fetching collection"></ds-error>
   <ds-loading *ngIf="collectionData.isLoading | async" message="Loading collection..."></ds-loading>

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

@@ -27,7 +27,7 @@ import { fadeIn, fadeInOut } from '../shared/animations/fade';
   selector: 'ds-collection-page',
   styleUrls: ['./collection-page.component.scss'],
   templateUrl: './collection-page.component.html',
-  animations:[
+  animations: [
     fadeIn,
     fadeInOut
   ]

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

 <div class="community-page" *ngIf="communityData.hasSucceeded | async" @fadeInOut>
-  <!-- Community name -->
-  <ds-comcol-page-header [name]="(communityData.payload | async)?.name"></ds-comcol-page-header>
-  <!-- Community logo -->
-  <ds-comcol-page-logo *ngIf="logoData"
-    [logo]="logoData.payload | async"
-    [alternateText]="'Community Logo'">
-  </ds-comcol-page-logo>
-  <!-- Introductionary text -->
-  <ds-comcol-page-content
-    [content]="(communityData.payload | async)?.introductoryText"
-    [hasInnerHtml]="true">
-  </ds-comcol-page-content>
-  <!-- News -->
-  <ds-comcol-page-content
-    [content]="(communityData.payload | async)?.sidebarText"
-    [hasInnerHtml]="true"
-    [title]="'community.page.news'">
-  </ds-comcol-page-content>
-  <!-- Copyright -->
-  <ds-comcol-page-content
-    [content]="(communityData.payload | async)?.copyrightText"
-    [hasInnerHtml]="true">
-  </ds-comcol-page-content>
-  <ds-community-page-sub-collection-list></ds-community-page-sub-collection-list>
+  <div *ngIf="communityData.payload | async; let communityPayload">
+    <!-- Community name -->
+    <ds-comcol-page-header [name]="communityPayload.name"></ds-comcol-page-header>
+    <!-- Community logo -->
+    <ds-comcol-page-logo *ngIf="logoData"
+      [logo]="logoData.payload | async"
+      [alternateText]="'Community Logo'">
+    </ds-comcol-page-logo>
+    <!-- Introductionary text -->
+    <ds-comcol-page-content
+      [content]="communityPayload.introductoryText"
+      [hasInnerHtml]="true">
+    </ds-comcol-page-content>
+    <!-- News -->
+    <ds-comcol-page-content
+      [content]="communityPayload.sidebarText"
+      [hasInnerHtml]="true"
+      [title]="'community.page.news'">
+    </ds-comcol-page-content>
+    <!-- Copyright -->
+    <ds-comcol-page-content
+      [content]="communityPayload.copyrightText"
+      [hasInnerHtml]="true">
+    </ds-comcol-page-content>
+    <ds-community-page-sub-collection-list></ds-community-page-sub-collection-list>
+  </div>
 </div>
 <ds-error *ngIf="communityData.hasFailed | async" message="Error fetching community"></ds-error>
 <ds-loading *ngIf="communityData.isLoading | async" message="Loading community..."></ds-loading>

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

@@ -15,7 +15,7 @@ import { fadeInOut } from '../shared/animations/fade';
   selector: 'ds-community-page',
   styleUrls: ['./community-page.component.scss'],
   templateUrl: './community-page.component.html',
-  animations:[fadeInOut]
+  animations: [fadeInOut]
 })
 export class CommunityPageComponent implements OnInit, OnDestroy {
   communityData: RemoteData<Community>;

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

@@ -13,7 +13,7 @@ import { fadeInOut } from '../../shared/animations/fade';
   selector: 'ds-top-level-community-list',
   styleUrls: ['./top-level-community-list.component.scss'],
   templateUrl: './top-level-community-list.component.html',
-  animations:[fadeInOut]
+  animations: [fadeInOut]
 })
 export class TopLevelCommunityListComponent {
   topLevelCommunities: RemoteData<Community[]>;

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

 <div class="item-page" *ngIf="item.hasSucceeded | async" @fadeInOut>
-  <ds-item-page-title-field [item]="item.payload | async"></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-metadata-field-wrapper>
-      <ds-item-page-file-section [item]="item.payload | async"></ds-item-page-file-section>
-      <ds-item-page-date-field [item]="item.payload | async"></ds-item-page-date-field>
-      <ds-item-page-author-field [item]="item.payload | async"></ds-item-page-author-field>
-    </div>
-    <div class="col-xs-12 col-md-6">
-      <ds-item-page-abstract-field [item]="item.payload | async"></ds-item-page-abstract-field>
-      <ds-item-page-uri-field [item]="item.payload | async"></ds-item-page-uri-field>
-      <ds-item-page-collections [item]="item.payload | async"></ds-item-page-collections>
-      <div>
-        <a class="btn btn-outline-primary" [routerLink]="['/items/' + (item.payload | async)?.id + '/full']">
-          {{"item.page.link.full" | translate}}
-        </a>
+  <div *ngIf="item.payload | async; let itemPayload">
+    <ds-item-page-title-field [item]="itemPayload"></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-metadata-field-wrapper>
+        <ds-item-page-file-section [item]="itemPayload"></ds-item-page-file-section>
+        <ds-item-page-date-field [item]="itemPayload"></ds-item-page-date-field>
+        <ds-item-page-author-field [item]="itemPayload"></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-uri-field [item]="itemPayload"></ds-item-page-uri-field>
+        <ds-item-page-collections [item]="itemPayload"></ds-item-page-collections>
+        <div>
+          <a class="btn btn-outline-primary" [routerLink]="['/items/' + itemPayload.id + '/full']">
+            {{"item.page.link.full" | translate}}
+          </a>
+        </div>
       </div>
     </div>
   </div>

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

@@ -20,7 +20,7 @@ import { fadeInOut } from '../../shared/animations/fade';
   selector: 'ds-item-page',
   styleUrls: ['./item-page.component.scss'],
   templateUrl: './item-page.component.html',
-  animations:[fadeInOut]
+  animations: [fadeInOut]
 })
 export class ItemPageComponent implements OnInit {
 

src/app/object-list/object-list.component.html

-<ds-pagination [paginationOptions]="config"
-               [pageInfoState]="pageInfo"
-               [collectionSize]="(pageInfo | async)?.totalElements"
-               [sortOptions]="sortConfig"
-               [hideGear]="hideGear"
-               [hidePagerWhenSinglePage]="hidePagerWhenSinglePage"
-               (pageChange)="onPageChange($event)"
-               (pageSizeChange)="onPageSizeChange($event)"
-               (sortDirectionChange)="onSortDirectionChange($event)"
-               (sortFieldChange)="onSortDirectionChange($event)"
-               (paginationChange)="onPaginationChange($event)">
-    <ul *ngIf="objects.hasSucceeded | async" @fadeIn> <!--class="list-unstyled"-->
-        <li *ngFor="let object of (objects.payload | async) | paginate: { itemsPerPage: (pageInfo | async)?.elementsPerPage, currentPage: (pageInfo | async)?.currentPage, totalItems: (pageInfo | async)?.totalElements }">
-            <ds-wrapper-list-element [object]="object"></ds-wrapper-list-element>
-        </li>
-    </ul>
-    <ds-error *ngIf="objects.hasFailed | async" message="Error fetching"></ds-error>
-    <ds-loading *ngIf="objects.isLoading | async" message="Loading..."></ds-loading>
+<ds-pagination
+  [paginationOptions]="config"
+  [pageInfoState]="pageInfo"
+  [collectionSize]="(pageInfo | async)?.totalElements"
+  [sortOptions]="sortConfig"
+  [hideGear]="hideGear"
+  [hidePagerWhenSinglePage]="hidePagerWhenSinglePage"
+  (pageChange)="onPageChange($event)"
+  (pageSizeChange)="onPageSizeChange($event)"
+  (sortDirectionChange)="onSortDirectionChange($event)"
+  (sortFieldChange)="onSortDirectionChange($event)"
+  (paginationChange)="onPaginationChange($event)">
+  <ul *ngIf="objects.hasSucceeded | async" @fadeIn> <!--class="list-unstyled"-->
+      <li *ngFor="let object of (objects.payload | async) | paginate: { itemsPerPage: (pageInfo | async)?.elementsPerPage, currentPage: (pageInfo | async)?.currentPage, totalItems: (pageInfo | async)?.totalElements }">
+          <ds-wrapper-list-element [object]="object"></ds-wrapper-list-element>
+      </li>
+  </ul>
+  <ds-error *ngIf="objects.hasFailed | async" message="Error fetching"></ds-error>
+  <ds-loading *ngIf="objects.isLoading | async" message="Loading..."></ds-loading>
 </ds-pagination>

src/app/shared/object-list/object-list.component.ts → src/app/object-list/object-list.component.ts

@@ -10,23 +10,23 @@ import {
 
 import { Observable } from 'rxjs/Observable';
 
-import { RemoteData } from '../../core/data/remote-data';
-import { PageInfo } from '../../core/shared/page-info.model';
+import { RemoteData } from '../core/data/remote-data';
+import { PageInfo } from '../core/shared/page-info.model';
 
-import { PaginationComponentOptions } from '../pagination/pagination-component-options.model';
+import { PaginationComponentOptions } from '../shared/pagination/pagination-component-options.model';
 
-import { SortOptions, SortDirection } from '../../core/cache/models/sort-options.model';
-import { ListableObject } from '../../object-list/listable-object/listable-object.model';
+import { SortOptions, SortDirection } from '../core/cache/models/sort-options.model';
+import { ListableObject } from '../object-list/listable-object/listable-object.model';
 
-import { fadeIn } from '../../shared/animations/fade';
+import { fadeIn } from '../shared/animations/fade';
 
 @Component({
   changeDetection: ChangeDetectionStrategy.Default,
   encapsulation: ViewEncapsulation.Emulated,
   selector: 'ds-object-list',
-  styleUrls: ['../../object-list/object-list.component.scss'],
-  templateUrl: '../../object-list/object-list.component.html',
-  animations:[fadeIn]
+  styleUrls: ['./object-list.component.scss'],
+  templateUrl: './object-list.component.html',
+  animations: [fadeIn]
 })
 export class ObjectListComponent implements OnChanges, OnInit {
 

src/app/shared/search-form/search-form.component.ts

@@ -13,7 +13,7 @@ import { Observable } from 'rxjs/Observable';
 @Component({
   selector: 'ds-search-form',
   styleUrls: ['./search-form.component.scss'],
-  templateUrl: './search-form.component.html',
+  templateUrl: './search-form.component.html'
 })
 export class SearchFormComponent {
   @Input() query: string;

src/app/shared/shared.module.ts

@@ -22,7 +22,7 @@ import { CommunityListElementComponent } from '../object-list/community-list-ele
 import { ErrorComponent } from './error/error.component';
 import { LoadingComponent } from './loading/loading.component';
 import { ItemListElementComponent } from '../object-list/item-list-element/item-list-element.component';
-import { ObjectListComponent } from './object-list/object-list.component';
+import { ObjectListComponent } from '../object-list/object-list.component';
 import { ObjectListElementComponent } from '../object-list/object-list-element/object-list-element.component';
 import { PaginationComponent } from './pagination/pagination.component';
 import { ThumbnailComponent } from '../thumbnail/thumbnail.component';