@angular/router#NavigationExtras TypeScript Examples

navToConfirmPage(vendor) {
    let navigationExtras: NavigationExtras = {
      queryParams: {
        vendor: JSON.stringify(vendor),
        back: "home"
      }
    }
    this.message = ""
    this.flag = false;
    this.router.navigate(['home/feed/service-lists/service-confirm'], navigationExtras)
    
    this.modalCtrl.dismiss({
      'dismissed': true
    })

  }

navToConfirmPage(vendor) {
    let navigationExtras: NavigationExtras = {
      queryParams: {
        vendor: JSON.stringify(vendor)
      }
    }
    this.flag = false;
    this.route.navigate(['home/feed/service-lists/service-confirm'], navigationExtras)
    // this.modalCtrl.dismiss({
    //   'dismissed': true
    // })
  }

async toConfirm(v) {
    let navigationExtras: NavigationExtras = {
      queryParams: {
        vendor: JSON.stringify(v),
        back: "home"
      }
    }
    this.router.navigate(['home/feed/service-lists/service-confirm'], navigationExtras)
  }

async navToReview(order: any) {
    console.log(order)
    await this.presentLoading()
    let navigationExtras: NavigationExtras = {
      state: {
        orderDetail: order
      }
    }
    this.router.navigate(['/review'], navigationExtras)
    this.loading.dismiss()
  }

async placeOrder() {
    await this.presentLoading()
    let navigationExtras: NavigationExtras = {
      state: {
        homeServiceId: this.homeSeviceId,
        homeService: this.homeService
      }
    };
    // add request to vendor current request
    let vendorId =  this.homeService.vendorId
    this.data['userId'] = this.afAuth.auth.currentUser.uid
    console.log(this.data)
    // this.userService.addCurrentOrder(vendorId, this.afAuth.auth.currentUser.uid, this.data)

    this.router.navigate(['/home/me/payment'], navigationExtras)
    this.loading.dismiss()
  }

async navPlaceOrder(v) {
    let navigationExtras: NavigationExtras = {
      queryParams: {
        vendor: JSON.stringify(v),
        back: "home"
      }
    }
    this.router.navigate(['/place-request'], navigationExtras)
  }

async toConfirm(v) {
    let navigationExtras: NavigationExtras = {
      queryParams: {
        vendor: JSON.stringify(v),
        back: "home"
      }
    }
    this.route.navigate(['home/feed/service-lists/service-confirm'], navigationExtras)
  }

/********************************************************
  **************** Prompt Confirm Contact ******************
  *********************************************************/
  showConfirmPrompt(isPublished: boolean) {
    Logger.log('contacts', "Prompting contact confirm", this.pendingContact);
    const props: NavigationExtras = {
      queryParams: {
        id: this.pendingContact.id,
        name: this.pendingContact.credentials.name,
        image: this.pendingContact.credentials.avatar ? JSON.stringify(this.pendingContact.credentials.avatar) : null, // Temporary BPI fix to avoid receiving [Object object] in the confirm screen, but better avoid using query params for potentially large data like avatars. Need to fix here @chad.
        isPublished: isPublished,
      }
    }
    void this.globalNav.navigateRoot('contacts', '/contacts/confirm', props);
  }

/********************************************************
  ************* Handle 'pickfriend'Intent *****************
  *********************************************************/

  // 'pickfriend' intent without filter param
  getContacts(isSingleInvite: boolean, intent: string) {
    void this.getStoredContacts().then((contacts: Contact[]) => {
      Logger.log('contacts', 'Fetched stored contacts for pickfriend intent', contacts);
      const realContacts = contacts.filter((contact) => contact.id !== 'did:elastos');
      if (realContacts.length > 0) {
        let props: NavigationExtras = {
          queryParams: {
            singleInvite: isSingleInvite,
            intent: intent
          }
        }
        void this.globalNav.navigateTo('contacts', '/contacts/invite', props);
      } else {
        void this.globalNav.navigateRoot('contacts', '/contacts/friends');
        void this.native.alertNoContacts(
          intent,
          this.managerService.handledIntentId,
          this.translate.instant('contacts.no-contacts-alert')
        );
      }
    });
  }

/********************************************************
  ************** Handle Contact Buttons *******************
  *********************************************************/
  showCustomization(contact: Contact, contactAddedWithNoName: boolean) {
    const props: NavigationExtras = {
      queryParams: {
        id: contact.id,
        name: contact.credentials.name,
        avatar: JSON.stringify(contact.avatarLocal),
        customName: contact.customName,
        customNote: contact.customNote,
        contactAddedWithNoName: contactAddedWithNoName,
      }
    }
    void this.globalNav.navigateRoot(App.CONTACTS, '/contacts/customize', props);
  }

private showScanScreen(fromIntentRequest: boolean) {
        const props: NavigationExtras = {
          state: {
            fromIntent: fromIntentRequest
          }
        }

        this.ngZone.run(() => {
            void this.globalNav.navigateRoot("/scanner", "/scanner/scan", props);
        });
    }

login(userData) {


    // stop here if form is invalid
    if (this.loginForm.invalid) {
      return;
    }


    this.authService.checkLogin(this.fName.value, this.password.value).subscribe(isLoggedIn => {

      if (isLoggedIn) {
        console.log('LoggIn Successfully');
        // Usually you would use the redirect URL from the auth service.
        // However to keep the example simple, we will always redirect to `/admin`.
        const redirectUrl = '/admin';


        // Send to subscriber i.e. header.component.ts
        this.missionService.confirmLogging(this.fName.value);

        // Set our navigation extras object
        // TODO@Idrice I dont  understand this !!
        // that passes on our global query params and fragment
        const navigationExtras: NavigationExtras = {
          queryParamsHandling: 'preserve',
          preserveFragment: true
        };

        // Clear input data in form
        this.loginForm.reset();

        // Navigation to admin page!!
        this.router.navigate([redirectUrl], navigationExtras);
      }
    });
  }

// 'pickfriend' intent with filter param
  getFilteredContacts(isSingleInvite: boolean, ret) {
    void this.getStoredContacts().then((contacts: Contact[]) => {
      Logger.log('contacts', 'Fetched stored contacts for pickfriend intent', contacts);
      const realContacts = contacts.filter((contact) => contact.id !== 'did:elastos');
      if (realContacts.length > 0) {
        this.filteredContacts = [];

        Logger.log('contacts', 'Intent requesting friends with credential', ret.params.filter.credentialType);
        realContacts.map((contact) => {
          if (contact.credentials[ret.params.filter.credentialType]) {
            this.filteredContacts.push(contact);
          }
        });

        if (this.filteredContacts.length > 0) {
          let props: NavigationExtras = {
            queryParams: {
              singleInvite: isSingleInvite,
              friendsFiltered: true,
              intent: 'pickfriend'
            }
          }
          void this.globalNav.navigateTo('contacts', '/contacts/invite', props);
        } else {
          void this.globalNav.navigateRoot('friends', '/contacts/friends');
          void this.native.alertNoContacts(
            'pickfriend',
            this.managerService.handledIntentId,
            this.translate.instant('contacts.no-contacts-with-cred-alert')
          );
        }
      } else {
        void this.globalNav.navigateRoot('contacts', '/contacts/friends');
        void this.native.alertNoContacts(
          'pickfriend',
          this.managerService.handledIntentId,
          this.translate.instant('contacts.no-contacts-alert')
        );
        return;
      }
    });
  }

intercept(request: HttpRequest<unknown>, next: HttpHandler): Observable<HttpEvent<any>> {
    return next.handle(request).pipe(
      // TODO: Better Error handling.
      // https://medium.com/@aleixsuau/error-handling-angular-859d529fa53a
      catchError((error: Error | HttpErrorResponse): Observable<never> => {
        if (error instanceof HttpErrorResponse) {
          const { status } = error;

          switch (status) {
            case HttpStatusCode.BadRequest:
              if (error.error?.errors) {
                const { errors } = error.error; // { fieldKey: errorMessage }
                const modalStateErrors: { [ key: string ]: string[] }[] = [];
                for (const err in errors) {
                  if (errors.hasOwnProperty(err)) {
                    modalStateErrors.push({
                      [ makeFirstLetterLowercase(err) ]: errors[ err ]
                    });
                  }
                }
                return throwError(() => modalStateErrors);
              }
              this.toast.error(error.error);
              return throwError(() => error.error);

            case HttpStatusCode.NotFound:
              this.toast.warning('Not found!', 'Item does not exist!');
              return throwError(() => error);

            case HttpStatusCode.Unauthorized:
              this.toast.error('You are not authorized!');
              return throwError(() => error);

            case HttpStatusCode.InternalServerError:
              const navigationExtras: NavigationExtras = { state: { error: error.error } };
              this.router.navigateByUrl('errors/server', navigationExtras);
              return throwError(() => error);

            default:
              this.toast.error('Something unexpected went wrong!');
              console.log(error);
              break;
          }

        }
        return throwError(() => error);

        // if (error instanceof HttpErrorResponse) {
        //   if (error.status === 0) {
        //     if (error?.statusText === 'Unknown Error') {
        //       return throwError('Server is not responding!');
        //     }
        //     this.store.dispatch(logout());
        //     return throwError(error.statusText);
        //   } else if (error.status === 401) {
        //     if (error.statusText === 'Unauthorized') {
        //       this.store.dispatch(logout());
        //       return throwError('You are not authorized!');
        //     }
        //     return throwError(error.statusText);
        //   }
        //   // HttpStatusCode of InternalServerError is 500
        //   if (error.status === 500) {
        //     return throwError(error.error);
        //   }

        //   const applicationError = error.headers.get('Application-Error');
        //   if (applicationError) {
        //     return throwError(applicationError);
        //   }

        //   const serverError = error.error;
        //   let modelStateErrors = '';
        //   if (typeof serverError?.errors === 'object') {
        //     for (const key in serverError.errors) {
        //       if (serverError.errors[key]) {
        //         modelStateErrors += serverError.errors[key] + '\n';
        //       }
        //     }
        //   }
        //   return throwError(modelStateErrors || serverError || 'Server Error');
        // } else {
        //   return throwError('Unknown Error!!!');
        // }
      })
    );
  }