📚[DOCS]: Documentation needs more complete examples

[isochronous]

Description

Most of the documentation around selectors is very targeted around the usage of specific methods, but there is a lot of information required for real-world use that is just missing.

For example, the docs describe a bunch of different ways of defining selectors using @Selector. Then they show a bunch of ways of defining selectors using Select. But you don't actually explain the relationship between the two, or if @Selectors can be defined in component classes as well, or if they can only use @Select and @Selector has to be used in state or library classes only. Like, I assume because the examples all show @Selector only being used in state classes or "meta-selector" classes, that they cannot be used in component classes that consume the state. But I don't actually KNOW, because the docs don't actually cover that, they just give a bunch of different examples.

Then on your "optimizing selectors" page you spend a great deal of time showing how to define an isDataSelected lazy selector, but DO NOT SHOW HOW TO USE IT in the component. In fact, I cannot find a single place in the documentation where you explain how to use lazy selectors like this. The only place where there is code showing an example of using a lazy selector, you're using a pattern that I do not think would work with the isDataSelected lazy selector?

@Component({ ... })
export class ZooComponent {
  babyPandas$: Observable<string[]>;

  constructor(private store: Store) {
    this.babyPandas$ = this.store
      .select(ZooState.pandas)
      .pipe(map(filterFn => filterFn('baby')));
  }
}

What's the affected URL?**

https://www.ngxs.io/concepts/select https://www.ngxs.io/advanced/optimizing-selectors

Expected vs Actual Behavior**

Documentation really needs to be more holistic, not only showing how to define aspects of the state, but ALSO show how those aspects can be consumed within related components. API documentation for the various decorators and primary classes would also be very welcome (I feel like this HAS to exist already, but I haven't found it). Trying to figure out all of the various signatures for the decorators involves a whole lot of clicking around through various pages.

Having multi-tab examples like angular material does would be very useful, where a single example could include both the state pieces being defined and the consumption of those pieces in component logic and/or templates.