config.md

Collection Guard - Configuration

The Guard can be configure with a CollectionRouteData object :

interface CollectionRouteData {
  queryFn: QueryFn;
  redirect: string;
  awaitSync: boolean;
}

• queryFn: A Firestore queryFn to filter the subscription to Firestore.
• redirect: The route to redirect to if subscription failed (only for AwaitSync Strategy)
• awaitSync: Use AwaitSync Strategy if true.

You can set this configuration in three different places :

CollectionGuardConfig

You can use the CollectionGuardConfig decorator :

@Injectable({ providedIn: 'root' })
@CollectionGuardConfig({
  queryFn: (ref) => ref.limit(10),
  redirect: '/404',
  awaitSync: true,
})
export class MovieListGuard extends CollectionGuard<MovieState> {
  constructor(service: MovieService) {
    super(service);
  }
}

Router Data

You can set the CollectionRouteData directly in the route :

const routes: Route[] = [
  {
    path: 'movies',
    component: MovieListGuard,
    canActivate: [MovieListGuard],
    canDeactivate: [MovieListGuard],
    data: {
      queryFn: (ref) => ref.limit(10),
      redirect: '/404',
      awaitSync: true,
    },
  },
];

Getter parameters

For finer configuration you'll want to use the getters inside CollectionGuard :

@Injectable({ providedIn: 'root' })
export class MovieListGuard extends CollectionGuard<MovieState> {
  constructor(service: MovieService, private query: MovieQuery) {
    super(service);
  }

  get awaitSync() {
    return this.query.getCount() === 0;
  }
}

Here we await only if there is nothing yet in the store.