title: Get data from an entity
body: <p>I've a lot of problems to show entities data in the page. I've found a solution. I use the ids array created by the entity, however I'm not really satisfied by this solution, do you have a better way to show entity datas?</p>
  
  <p>I used the ids array to extract the data, but I would like to access directly the entities.</p>
  
  <p>Where I'm wrong?</p>
  
  <p>Sorry if I look very naive.</p>
  
  <p>Thanks for your times</p>
  
  <pre class="lang-html prettyprint-override"><code>&lt;div class="container-fluid"&gt;
      &lt;div class="col-md-12"&gt;
          &lt;div class="col-md-2"&gt;
  
          &lt;/div&gt;
              &lt;div class="purple text-center" &gt;&lt;i class="material-icons md-64"&gt;home&lt;/i&gt; &lt;span class="titleForm" *ngIf="!buildings.loading"&gt;Your Properties&lt;/span&gt;&lt;/div&gt;
              &lt;div *ngIf="(buildings | async).error" class="alert alert-danger alert-dismissible text-center" color="primary"&gt;
                  &lt;strong&gt;Error!&lt;/strong&gt; Please Check your Internet connect or Try to reaload the page, if the problem persist please contact Us
              &lt;/div&gt;
              &lt;mat-spinner *ngIf="buildings.loading"&gt;&lt;/mat-spinner&gt;
              &lt;ng-container *ngFor="let i = index, let id of (buildings|async).ids" &gt;
                  &lt;mat-expansion-panel color="accent" *ngIf="!buildings.loading" &gt;
                      &lt;mat-expansion-panel-header&gt;
                        &lt;mat-panel-title color="accent" &gt;
                          &lt;h4 class="textWarn"&gt;&lt;i class="material-icons"&gt;home&lt;/i&gt; {{ (buildings | async).entities[(buildings | async).ids[i]].nameBuilding}}&lt;/h4&gt;
                        &lt;/mat-panel-title&gt;
                      &lt;/mat-expansion-panel-header&gt;
                      &lt;div &gt;
                          &lt;p &gt;{{(buildings | async).entities[(buildings | async).ids[i]].address}}&lt;/p&gt;
                          &lt;p &gt;{{(buildings | async).entities[(buildings | async).ids[i]].info}}&lt;/p&gt;
  
                          &lt;section class="text-right"&gt;
                            &lt;div class="row text-center"&gt;
                              &lt;div class="col-md-2"&gt;&lt;/div&gt;
                                &lt;div class="col-md-4"&gt;
                                    &lt;button mat-raised-button class="text-center" type="submit" color="primary"&gt;View Rooms&lt;/button&gt;
                                &lt;/div&gt;
                                &lt;div class="col-md-2"&gt;
                                    &lt;button mat-raised-button class="text-center" type="submit" color="primary" [routerLink]="['/dashboard/new-room/', (buildings | async).ids[i]]" &gt;New Room&lt;/button&gt;
                                &lt;/div&gt;
                                &lt;div class="col-md-2"&gt;
                                    &lt;button mat-raised-button class="text-center" type="submit" color="accent" [routerLink]="['/dashboard/edit-building/', (buildings | async).ids[i]]"
                                    routerLinkActive="router-link-active" routerLinkActive="router-link-active"&gt;Edit&lt;/button&gt;
                                &lt;/div&gt;
                                &lt;div class="col-md-2"&gt;
                                    &lt;button mat-raised-button class="text-center" color="warn" (click)="onDelete()"&gt;Delete {{ (buildings | async).ids[i] }}&lt;/button&gt;
                                &lt;/div&gt;
  
                            &lt;/div&gt;
                          &lt;/section&gt;
                        &lt;/div&gt;
  
                    &lt;/mat-expansion-panel&gt;
              &lt;/ng-container&gt;
      &lt;/div&gt;
    &lt;/div&gt;
  </code></pre>
  
  <p>I'd like to use something like </p>
  
  <pre class="lang-js prettyprint-override"><code>entities.nameBuilding instead of (buildings | async).entities[(buildings | async).ids[i]].nameBuilding
  </code></pre>
  
  <p>here the ts file, I used a selector to select the part that contain my entities.</p>
  
  <pre class="lang-js prettyprint-override"><code>import { Component, OnInit } from '@angular/core';
  import { Store } from '@ngrx/store';
  import { Observable } from 'rxjs';
  
  import { StorageDataService } from 'src/app/shared/storage-data.service';
  import { Building } from 'src/app/shared/models/building.model';
  
  
  // import * as fromBuildings from '../store/building-list.reducer';
  import * as fromIndexReducer from '../../../../reducers/index';
  import * as fromBuildings from '../store/building-list.reducer';
  import * as buildingsAction from '../store/building-list.actions';
  import {selectAllBuildings} from '../store/building-list.selectors';
  
  @Component({
    selector: 'app-list-building',
    templateUrl: './list-building.component.html',
    styleUrls: ['./list-building.component.css']
  })
  export class ListBuildingComponent implements OnInit {
  
    constructor(
      private storageData: StorageDataService,
      private store: Store&lt;fromBuildings.BuildingsState&gt;
                ) {}
  
    buildings$: Observable&lt;any&gt;;
    buildings: any;
  
  
    ngOnInit() {
      this.buildings$ = this.store.select&lt;fromBuildings.BuildingsState&gt;('buildings');
      // this.store.select&lt;fromBuildings.BuildingsState&gt;
      // this.buildings$ = this.store.select&lt;fromBuildings.AppState[]&gt;('statusList');
      this.buildings = this.buildings$;
  
      this.store.dispatch(new buildingsAction.LoadingBuildings());
      // console.log('buildings', this.buildings.source);
    }
    onDelete(id: string) {
      this.storageData.deleteBuilding(id);
    }
  
  
  }
  </code></pre>