title: How to make a selector of extended state from a entity feature inside ngrx?
body: <p><strong>Problem:</strong>
  This selector <code>entity.selectAll</code> will not include the extended state.</p>
  
  <h2><strong>Question:</strong></h2>
  
  <p><strong>How do I include my extend state inside selectAll OR how can I create a custom selector for my selected state?</strong></p>
  
  <p>My UxeGallery Model is: </p>
  
  <pre><code>export interface UxeGallery {
    id: string;
    imgSrc: string;
    name: string;
    details?: string;
  }
  </code></pre>
  
  <p>Here I have my EntityState and I have added some state to it:</p>
  
  <pre><code>export interface State extends EntityState&lt;UxeGallery&gt; {
    selectedItem: string | null;
    hiddenItem: string | null;
    bottombarTemplate: boolean;
    topbarTemplate: boolean;
    topbarTemplateType: string;
    modalTemplate: boolean;
    canvasTemplate: boolean;
    canvasImg: string | null;
  }
  </code></pre>
  
  <p>I create the adapter:</p>
  
  <pre><code>export const adapter: EntityAdapter&lt;UxeGallery&gt; = createEntityAdapter&lt;UxeGallery&gt;();
  </code></pre>
  
  <p>Set the init state:</p>
  
  <pre><code>export const initialState: State = adapter.getInitialState({
    ids: ['0'],
    entities: {
      '0': {
        imgSrc: 'url',
        name: 'dog',
        details: 'some dog',
      }
    },
    selectedItem: null,
    hiddenItem: null,
    topbarTemplateType: TopbarType.WHITE,
    topbarTemplate: false,
    bottombarTemplate: false,
    modalTemplate: false,
    canvasTemplate: false,
    canvasImg: null,
  });
  </code></pre>
  
  <p>Create my featureSelector:</p>
  
  <pre><code>export const getState = createFeatureSelector&lt;any&gt;('uxeGallery');
  </code></pre>
  
  <p>Export adapter selectors:</p>
  
  <pre><code>export const {
    selectIds,
    selectEntities,
    selectAll,
    selectTotal,
  } = adapter.getSelectors(getState);
  </code></pre>
  
  <p>From my app component I selectAll from my entity:</p>
  
  <pre><code>import * as fromUxeGallery from '../../reducers/uxe-gallery.reducer';
  import { UxeGallery } from '../../uxe-gallery.model';
  
  
  export class UxeGalleryMasterComponent implements OnInit {
    private obs: Observable&lt;UxeGallery[]&gt;;
    private obsExtended: Observable&lt;any&gt;;
  
    constructor(private store: Store&lt;fromUxeGallery.State&gt;) { }
  
    ngOnInit() {
      this.obs = this.store.pipe(select(fromUxeGallery.selectAll));
      this.obs.subscribe(console.log);
      /**
        This will return
        [
          {
            details:"some dog",
            imgSrc:"url",
            name:"dog"
          }
        ]
      */
    }
  }
  </code></pre>
  
  <p><strong>How can I make a selector that will grab the extended state from my Entity model?</strong></p>
  
  <p>e.g</p>
  
  <pre><code>  selectedItem: null,
    hiddenItem: null,
    topbarTemplateType: TopbarType.WHITE,
    topbarTemplate: false,
    bottombarTemplate: false,
    modalTemplate: false,
    canvasTemplate: false,
    canvasImg: null,
  </code></pre>
  
  <p>UPDATE:</p>
  
  <p>I added this:</p>
  
  <pre><code>export const getState = createFeatureSelector&lt;any&gt;('uxeGallery');
  export const selectFeatureExtended = createSelector(getState, (state: State) =&gt; {
    return  {
      selectedItem: state.selectedItem,
      hiddenItem: state.hiddenItem,
      bottombarTemplate: state.bottombarTemplate,
      topbarTemplate: state.topbarTemplate,
      topbarTemplateType: state.topbarTemplateType,
      modalTemplate: state.modalTemplate,
      canvasTemplate: state.canvasTemplate,
      canvasImg: state.canvasImg,
    };
  });
  </code></pre>
  
  <p>It feels pretty verbose but if theres no other solution it works as intended :(</p>