reduce async observables with local assignment

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

@@ -1,8 +1,9 @@
 <div class="collection-page">
   <div *ngIf="collectionData.hasSucceeded | async" @fadeInOut>
+    <div *ngIf="collectionData.payload | async; let collectionPayload">
       <!-- Collection Name -->
       <ds-comcol-page-header
-      [name]="(collectionData.payload | async)?.name">
+        [name]="collectionPayload.name">
       </ds-comcol-page-header>
       <!-- Collection logo -->
       <ds-comcol-page-logo *ngIf="logoData"
@@ -11,26 +12,27 @@
       </ds-comcol-page-logo>
       <!-- Introductionary text -->
       <ds-comcol-page-content
-      [content]="(collectionData.payload | async)?.introductoryText"
+        [content]="collectionPayload.introductoryText"
         [hasInnerHtml]="true">
       </ds-comcol-page-content>
       <!-- News -->
       <ds-comcol-page-content
-      [content]="(collectionData.payload | async)?.sidebarText"
+        [content]="collectionPayload.sidebarText"
         [hasInnerHtml]="true"
         [title]="'community.page.news'">
       </ds-comcol-page-content>
       <!-- Copyright -->
       <ds-comcol-page-content
-      [content]="(collectionData.payload | async)?.copyrightText"
+        [content]="collectionPayload.copyrightText"
         [hasInnerHtml]="true">
       </ds-comcol-page-content>
       <!-- Licence -->
       <ds-comcol-page-content
-      [content]="(collectionData.payload | async)?.license"
+        [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>
   <br>

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

@@ -1,6 +1,7 @@
 <div class="community-page" *ngIf="communityData.hasSucceeded | async" @fadeInOut>
+  <div *ngIf="communityData.payload | async; let communityPayload">
     <!-- Community name -->
-  <ds-comcol-page-header [name]="(communityData.payload | async)?.name"></ds-comcol-page-header>
+    <ds-comcol-page-header [name]="communityPayload.name"></ds-comcol-page-header>
     <!-- Community logo -->
     <ds-comcol-page-logo *ngIf="logoData"
       [logo]="logoData.payload | async"
@@ -8,21 +9,22 @@
     </ds-comcol-page-logo>
     <!-- Introductionary text -->
     <ds-comcol-page-content
-    [content]="(communityData.payload | async)?.introductoryText"
+      [content]="communityPayload.introductoryText"
       [hasInnerHtml]="true">
     </ds-comcol-page-content>
     <!-- News -->
     <ds-comcol-page-content
-    [content]="(communityData.payload | async)?.sidebarText"
+      [content]="communityPayload.sidebarText"
       [hasInnerHtml]="true"
       [title]="'community.page.news'">
     </ds-comcol-page-content>
     <!-- Copyright -->
     <ds-comcol-page-content
-    [content]="(communityData.payload | async)?.copyrightText"
+      [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/+item-page/simple/item-page.component.html

@@ -1,25 +1,27 @@
 <div class="item-page" *ngIf="item.hasSucceeded | async" @fadeInOut>
-  <ds-item-page-title-field [item]="item.payload | async"></ds-item-page-title-field>
+  <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]="item.payload | async"></ds-item-page-file-section>
+        <ds-item-page-file-section [item]="itemPayload"></ds-item-page-file-section>
-      <ds-item-page-date-field [item]="item.payload | async"></ds-item-page-date-field>
+        <ds-item-page-date-field [item]="itemPayload"></ds-item-page-date-field>
-      <ds-item-page-author-field [item]="item.payload | async"></ds-item-page-author-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]="item.payload | async"></ds-item-page-abstract-field>
+        <ds-item-page-abstract-field [item]="itemPayload"></ds-item-page-abstract-field>
-      <ds-item-page-uri-field [item]="item.payload | async"></ds-item-page-uri-field>
+        <ds-item-page-uri-field [item]="itemPayload"></ds-item-page-uri-field>
-      <ds-item-page-collections [item]="item.payload | async"></ds-item-page-collections>
+        <ds-item-page-collections [item]="itemPayload"></ds-item-page-collections>
         <div>
-        <a class="btn btn-outline-primary" [routerLink]="['/items/' + (item.payload | async)?.id + '/full']">
+          <a class="btn btn-outline-primary" [routerLink]="['/items/' + itemPayload.id + '/full']">
             {{"item.page.link.full" | translate}}
           </a>
         </div>
       </div>
     </div>
   </div>
+</div>
 <ds-error *ngIf="item.hasFailed | async" message="Error fetching item"></ds-error>
 <ds-loading *ngIf="item.isLoading | async" message="Loading item..."></ds-loading>

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

@@ -1,4 +1,5 @@
-<ds-pagination [paginationOptions]="config"
+<ds-pagination
+  [paginationOptions]="config"
   [pageInfoState]="pageInfo"
   [collectionSize]="(pageInfo | async)?.totalElements"
   [sortOptions]="sortConfig"

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

@@ -10,22 +10,22 @@ import {
 
 import { Observable } from 'rxjs/Observable';
 
-import { RemoteData } from '../../core/data/remote-data';
+import { RemoteData } from '../core/data/remote-data';
-import { PageInfo } from '../../core/shared/page-info.model';
+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 { SortOptions, SortDirection } from '../core/cache/models/sort-options.model';
-import { ListableObject } from '../../object-list/listable-object/listable-object.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'],
+  styleUrls: ['./object-list.component.scss'],
-  templateUrl: '../../object-list/object-list.component.html',
+  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';