libs/auth/src/lib/+state/products.selectors.ts
import { createFeatureSelector, createSelector } from '@ngrx/store';
import { ProductsData } from './products.reducer';
const getProductsState = createFeatureSelector<ProductsData>('products');
const getProducts = createSelector(getProductsState, (state) => state.products);
export const productsQuery = {
getProducts,
};
export * from './lib/+state/auth.actions';
export * from './lib/+state/auth.effects';
export * from './lib/+state/auth.reducer';
export * from './lib/+state/auth.selectors';
export * from './lib/+state/auth.models';
export * from './lib/auth.module';
export { AuthService } from './lib/services/auth/auth.service';
export { AuthGuard } from './lib/guards/auth/auth.guard';
export { AuthState } from './lib/+state/auth.reducer';
2. Use selector in Layout component
libs/layout/src/lib/containers/layout/layout.component.ts
import { Component, OnInit } from '@angular/core';
import { AuthService } from '@demo-app/auth';
import { Observable } from 'rxjs';
import { User } from '@demo-app/data-models';
@Component({
selector: 'demo-app-layout',
templateUrl: './layout.component.html',
styleUrls: ['./layout.component.scss'],
})
export class LayoutComponent implements OnInit {
user$: Observable<User>;
constructor(private authService: AuthService) {}
ngOnInit() {
this.user$ = this.authService.user$;
}
}
At this point, the app may not run properly until we update the products state in the next step.