[SOLVED] trouble assigning default values route parameters angular

Issue

I’m having trouble assigning default values to my route parameters inside of my component ts class. I want the genreId to be null by default. I want monetization, sortBy, and page to have default values. I’m not sure if I’m supposed to do this inside of ngOninit or if I’m supposed to do this somehow inside of my app routing module.

export class MoviesPageComponent implements OnInit {
  movies?: MovieData;
  genreId?: string | null = null;
  monetization?: string | null;
  sortBy?: string | null;
  page?: string | null;
  constructor(private getMovies: GetMoviesService,
              private route: ActivatedRoute) { }
  ngOnInit(): void {
    this.route.queryParamMap.subscribe((params: ParamMap) => {
      this.genreId = params.get('genreId')
    })
    this.route.paramMap.subscribe((params: ParamMap) => {
      this.monetization = params.get('monetization');
      this.sortBy = params.get('sortBy');
      this.page = params.get('page');
    });
    if (this.genreId === null) {
      this.getMovies.moviesData(this.monetization, this.sortBy, this.page).subscribe((movieData: MovieData) => {
        if (movieData !== undefined) {
          this.movies = movieData;
        }
      })
    }
  }
}

My app routing module array looks like this.

const routes: Routes = [
  {path: ' ', pathMatch: 'full', redirectTo: '/:monetization/:sortBy/:page'},
  {path: '/:monetization/:sortBy/:page/', pathMatch: 'full', component: MoviesPageComponent}
];

Solution

Just set them to a default value when you declare them. Overwrite the default value if the value received is truthy. I use the || operator during assignment to go to the next value if the first one is falsey. Consider using ActivatedRouteSnapshot instead of ActivatedRoute to get params.

export class MoviesPageComponent implements OnInit {
  movies?: MovieData;
  genreId?: string | null = null;
  monetization = 'default monetization';
  sortBy = 'default sort by';
  page = 'default page';
  constructor(
    private getMovies: GetMoviesService,
    private snapshot: ActivatedRouteSnapshot
  ) {}
  ngOnInit(): void {
    this.genreId = this.snapshot.queryParams['genreId'] || this.genreId;
    this.monetization =
      this.snapshot.params['monetization'] || this.monetization;
    this.sortBy = this.snapshot.params['sortBy'] || this.sortBy;
    this.page = this.snapshot.params['page'] || this.page;

    if (this.genreId === null) {
      this.getMovies
        .moviesData(this.monetization, this.sortBy, this.page)
        .subscribe((movieData: MovieData) => {
          if (movieData !== undefined) {
            this.movies = movieData;
          }
        });
    }
  }
}

As a side note, if you don’t have a reason to differentiate between null and undefined just use undefined and check if the value is falsey with ! or truthy with a simple if statement. Really helps declutter code.

export class MoviesPageComponent implements OnInit {
  movies?: MovieData;
  genreId?: string;
  ...
  ngOnInit(): void {
    this.genreId = this.snapshot.queryParams['genreId'];
    ...
    if (!this.genreId) {
      this.getMovies
        .moviesData(this.monetization, this.sortBy, this.page)
        .subscribe((movieData: MovieData) => {
          if (movieData) this.movies = movieData;
        });
    }
  }
}

Answered By – Chris Hamilton

Answer Checked By – Pedro (BugsFixing Volunteer)