@angular/router#ParamMap TypeScript Examples

ngOnInit(): void {
    let contact$ = this.route.queryParamMap.pipe(
      switchMap((params: ParamMap) =>
        this.contactService.fetchById(params.get('id')))
    );

    contact$.subscribe(
      (contact: Contact) => this.handleResponse(contact),
      err => this.handleError(err)
    );
  }

ngOnInit() {
    this.route.paramMap.subscribe((params: ParamMap) => {
      this.id = params.get("id");
      this.queryCategoriesArticles = this.apollo
        .watchQuery({
          query: CATEGORY_ARTICLES_QUERY,
          variables: {
            id: this.id
          }
        })
        .valueChanges.subscribe(result => {
          this.data = result.data
          this.category = this.data.category.name
          console.log(this.data)
          this.leftArticlesCount = Math.ceil(this.data.category.articles.length / 5);
          this.leftArticles = this.data.category.articles.slice(0, this.leftArticlesCount);
          this.rightArticles = this.data.category.articles.slice(
            this.leftArticlesCount,
            this.data.category.articles.length
          );
          this.loading = result.loading;
          this.errors = result.errors;
        });
    });
  }

private fetchEmail() {
    let email$ = this.route.queryParamMap.pipe(
      switchMap((params: ParamMap) =>
        this.emailService.fetchMessageById(params.get('id')))
    );

    email$.subscribe(
      (email: Email) => this.handleEmailResponse(email),
      err => this.handleError(err)
    );
  }

ngOnInit(): void {
    let redirect$ = this.route.queryParamMap.pipe(
      switchMap((params: ParamMap) =>
        this.emailService.fetchToken(params.get('code')))
    );

    redirect$.subscribe(
      (token: string) => this.handleResponse(token),
      err => this.handleError(err)
    );
  }

private loadDeal() {
    let deal$ = this.route.queryParamMap.pipe(
      switchMap((params: ParamMap) =>
        this.dealService.fetchDealById(params.get('dealId')))
    );

    deal$.subscribe(
      (deal: Deal) => this.handleDealResponse(deal),
      err => this.handleDealError(err)
    );
  }

private loadDeal() {
    let deal$ = this.route.queryParamMap.pipe(
      switchMap((params: ParamMap) =>
        this.dealService.fetchDealById(params.get('dealId')))
    );

    deal$.subscribe(
      (deal: Deal) => this.handleDealResponse(deal),
      err => this.handleDealError(err)
    );
  }

private loadContact() {
    if (this.route.snapshot.queryParams['contactId']) {
      let contact$ = this.route.queryParamMap.pipe(
        switchMap((params: ParamMap) =>
          this.contactService.fetchById(params.get('contactId')))
      );

      contact$.subscribe(
        (contact: Contact) => this.handleContactResponse(contact),
        err => this.handleContactError(err)
      );
    }
  }

ngOnInit(): void {
    this.contact$ = this.route.queryParamMap.pipe(
      switchMap((params: ParamMap) =>
        this.contactService.fetchById(params.get('id')).pipe(
          tap(contact => this.handleBreadcrumb(contact)),
          catchError(err => this.handleError(err))
        )
      )
    );
  }

private initializeActivity() {
    let activity$ = this.route.queryParamMap.pipe(
      switchMap((params: ParamMap) =>
        this.activityService.fetchActivityById(params.get('id')))
    );

    activity$.subscribe(
      (activity: Activity) => this.handleResponse(activity),
      err => this.handleError(err)
    );
  }

private loadActivity() {
    let activity$ = this.route.queryParamMap.pipe(
      switchMap((params: ParamMap) =>
        this.activityService.fetchActivityById(params.get('activityId')))
    );

    activity$.subscribe(
      (activity: Activity) => this.handleActivityResponse(activity),
      err => this.handleActivityError(err)
    );
  }

private loadContact() {
    if (this.route.snapshot.queryParams['contactId']) {
      let contact$ = this.route.queryParamMap.pipe(
        switchMap((params: ParamMap) =>
          this.contactService.fetchById(params.get('contactId')))
      );

      contact$.subscribe(
        (contact: Contact) => this.handleContactResponse(contact),
        err => this.handleContactError(err)
      );
    }
  }

private prepopulateForm() {
    if (this.addingForContact)
      this.activityFormGroup.controls['contact'].setValue(this.contact.id);

    if (this.addingActivityType) {
      this.route.queryParamMap.subscribe(
        (params: ParamMap) => this.prepopulateType(params.get('type'))
      )
    }
  }

ngOnInit(): void {
    let account$ = this.route.queryParamMap.pipe(
      switchMap((params: ParamMap) =>
        this.accountService.fetchById(params.get('id')))
    );

    account$.subscribe(
      (account: Account) => this.handleResponse(account),
      err => this.handleError(err)
    );
  }

ngOnInit(): void {
    let account$ = this.route.queryParamMap.pipe(
      switchMap((params: ParamMap) =>
        this.accountService.fetchById(params.get('id')))
    );

    account$.subscribe(
      (account) => this.handleResponse(account),
      err => this.handleError(err)
    );
  }

ngAfterViewInit(): void {
		// Get persisted page options?
		this.route.queryParamMap.pipe(
			defaultIfEmpty({} as ParamMap),
			map(params => {
				return {
					page: params.has('page') ? Number(params.get('page')) : 0,
					search: {
						sortBy: params.get('sortBy') ?? 'popularity',
						sortOrder: params.get('sortOrder'),
						globalState: params.get('globalState'),
						query: params.get('query'),
						submitter: params.get('submitter'),
						channel: params.get('channel')
					}
				};
			}),
			tap(() => setTimeout(() => this.skipNextQueryChange = false, 0)),
			filter(() => !this.skipNextQueryChange)
		).subscribe({
			next: opt => {
				const d = {
					pageIndex: !isNaN(opt.page) ? opt.page : 0,
					pageSize: Math.max(EmoteListComponent.MINIMUM_EMOTES, this.calculateSizedRows() ?? 0),
					length: 0,
				};
				this.updateQueryParams(true);
				this.currentSearchOptions = opt.search as any;

				this.paginator?.page.next(d);
				this.pageOptions = d;
			}
		});

		this.pageSize.next(this.calculateSizedRows() ?? 0);
	}

// Use a ReplaySubject to share previous values with subscribers
  // and pump new values into the `paramMap` observable
  private subject = new ReplaySubject<ParamMap>();

// Use a ReplaySubject to share previous values with subscribers
    // and pump new values into the `paramMap` observable
    private subject = new ReplaySubject<ParamMap>();