How to use the @ngrx/store.select function in @ngrx/store

ngOnInit(): void {
    this.store.dispatch(new productActions.Load());
    this.products$ = this.store.pipe(select(fromProduct.getProducts));
    this.errorMessage$ = this.store.pipe(select(fromProduct.getError));
    this.selectedProduct$ = this.store.pipe(select(fromProduct.getCurrentProduct));
    this.displayCode$ = this.store.pipe(select(fromProduct.getShowProductCode));
  }

it('selects the selected categoryId state', () => {
      const selector = store.pipe(select(selectCategoryPageConfigurationState));
      const expected = cold('a', { a: stubCategoryPageConfigurationState });
      expect(selector).toBeObservable(expected);
    });
  });

ngOnInit() {
    this.modalService.registerModal(
      this.cancelModalId,
      this.cancelModalTemplate
    );

    this.loading$ = this.apiConnectorStore.pipe(select(getApiConnectorLoading));
    this.currentActiveStep$ = this.apiConnectorStore.pipe(select(getApiConnectorWizardStep));
    this.uploadSpecification$ = this.apiConnectorStore.pipe(select(getApiConnectorUploadSpecification));
    this.validationErrors$ = this.apiConnectorStore.pipe(select(getApiConnectorValidationError));
    this.specificationForEditor$ = this.apiConnectorStore.pipe(select(getApiConnectorSpecificationForEditor));
    this.createRequest$ = this.apiConnectorStore.pipe(select(getApiConnectorRequest));
    this.showApiEditor$ = this.apiConnectorStore.pipe(select(getShowApiEditor));
    this.apiConnectorState$ = this.apiConnectorStore.pipe(select(getApiConnectorState));

    this.nav.hide();
  }

ngOnInit() {
    this.store.pipe(select(getAllNotesSelector)).subscribe(notes => {
      if (notes) {
        this.notes = notes;
        this.updateOptions();
      }
    });

    this.store.pipe(select(getFilterSelector)).subscribe(filter => {
      if (filter) {
        this.filter = filter;
      }
    });

    this.store
      .pipe(select(getSettingsSelector))
      .pipe(skip(1))
      .subscribe(settings => {
        this.settings = settings;
        this.updateOptions();
      });
  }

[groups]="groups$ | async"
      [fetching]="isLoading$ | async"
      [(selectedTemplate)]="selectedTemplate"
      (selectedTemplateChange)="selectedTemplateChange.emit($event)"
      (selectedTypesChanged)="onSelectedTypesChange($event)"
      (selectedOsFamiliesChanged)="onSelectedOsFamiliesChange($event)"
      (selectedGroupsChanged)="onSelectedGroupsChange($event)"
      (queryChanged)="onQueryChange($event)"
    >
  `,
})
export class IsoAttachmentFilterSelectorContainerComponent implements AfterViewInit {
  readonly isos$ = this.store.pipe(select(fromTemplates.selectTemplatesForIsoAttachment));
  readonly isLoading$ = this.store.pipe(select(fromTemplates.isLoading));
  readonly groups$ = this.store.pipe(select(configSelectors.get('imageGroups')));
  readonly viewMode$ = this.store.pipe(select(fromTemplates.vmCreationListViewMode));
  readonly selectedTypes$ = this.store.pipe(select(fromTemplates.vmCreationListSelectedTypes));
  readonly selectedOsFamilies$ = this.store.pipe(
    select(fromTemplates.vmCreationListSelectedOsFamilies),
  );
  readonly selectedGroups$ = this.store.pipe(select(fromTemplates.vmCreationListSelectedGroups));
  readonly query$ = this.store.pipe(select(fromTemplates.vmCreationListQuery));

  @Input()
  public selectedTemplate: BaseTemplateModel;
  @Output()
  public selectedTemplateChange = new EventEmitter();

  public groupings = [
    {
      key: 'zones',
      label: 'GROUP_BY_ZONES',

private getStoreData() {
    return zip(
      this.store.pipe(select(ChecklistSelectors.getActiveCategoryEntities)),
      this.store.pipe(select(AppSelectors.getItemEntities)),
      this.store.pipe(select(ProjectsSelectors.getSelectedProjectId))
    ).pipe(take(1));
  }

return throwError('setBasketPayment() called without paymentInstrument');
    }

    return this.apiService
      .put<{ data: PaymentInstrument; included: { paymentMethod: { [id: string]: PaymentMethodBaseData } } }>(
        `baskets/${basketId}/payments/open-tender?include=paymentMethod`,
        { paymentInstrument },
        {
          headers: this.basketHeaders,
        }
      )
      .pipe(
        map(({ data, included }) =>
          data && data.paymentMethod && included ? included.paymentMethod[data.paymentMethod] : undefined
        ),
        withLatestFrom(this.store.pipe(select(getCurrentLocale))),
        concatMap(([pm, currentLocale]) =>
          this.sendRedirectUrlsIfRequired(pm, paymentInstrument, basketId, currentLocale && currentLocale.lang)
        )
      );
  }

getCardTypes(): Observable {
    return this.checkoutStore.pipe(select(CheckoutSelectors.getAllCardTypes));
  }

get airline$(): Observable {
    return this.store$.pipe(select(AirlineSelectors.getSelected));
  }