What is the best way to set a variable as true within a pipeline?

Could someone assist me with a coding issue I'm facing? If the id is null, I need variable x to be true. I am unable to use if and else statements within the pipe. Any guidance would be greatly appreciated.

  private x = false;
  private y = false;

ngOnInit() {
    this.subscribe = this.route.params.pipe(
    map(({ id }) => id),
    filter(id => !!id), // <---- here
    switchMap((id: string) => 
     this.shippingService.getShippingById(id)))
  .subscribe(
    res => {
      this.shippingData = res;
      this.y= true;
    },
    err => this.error = err.error,
  );
}

Answer №1

One technique you can try is to insert the tap operator before applying your filter logic:

ngOnInit() {
    this.subscribe = this.route.params.pipe(
    map(({ id }) => id),
    tap((val) => { if (val === null) this.x = true }),
    filter(id => !!id),
    switchMap((id: string) => 
     this.shippingService.getShippingById(id)))
  .subscribe(
    res => {
      this.shippingData = res;
      this.y= true;
    },
    err => this.error = err.error,
  );
}

Similar questions

If you have not found the answer to your question or you are interested in this topic, then look at other similar questions below or use the search

Dynamically adjust the label position based on the button position

I am currently developing an interface that allows users to change the position of buttons and add a label text under the button. However, I am facing an issue where the label is not always centered below the button due to variations in the size and number ...

Integrating Angular with ng-select for item selection verification

Could someone help me with setting up this scenario? A user picks an option from the dropdown menu. The previous selection remains until a certain point is reached. The selected value is sent out through the @Output variable. The chosen value is then con ...

provide an element reference as an argument to a directive

I am trying to figure out how to pass an element reference to a directive. I know that I can get the reference of the element where the directive is applied using private _elemRef: ElementRef but my goal is to pass the reference of another element to the ...

Error: Unhandled promise rejection: Trying to access a property of null (specifically 'branch') causing a TypeError

While developing a dashboard for an Angular application, I encountered an error when trying to access the dashboard: ERROR Error: Uncaught (in promise): TypeError: Cannot read properties of null (reading 'branch') TypeError: Cannot read propert ...

The State of NgRX Entity is encountering undefined IDs

I decided to experiment with @ngrx/entity in a simple "Todo" project, where I had only one AppModule, one reducer, and a single component. However, as I delved into it, I encountered some challenges. The actions I defined were quite basic, focusing on CRU ...

Why is the function not being called when declaring a variable, resulting in a type error?

click here reference: const fn1 = (arg1: { key: number, })=>{ console.log(arg1) } fn1({ key: 1 }) const data = { key: 1, a: 1, } fn1(data) fn1({ key: 1, a: 1, }) more info Assistance needed: Why is ...

Dealing with Angular 6 HTTP Interceptor and the frustrating net:: ERR_TIMED_OUT error

I have been puzzling over something recently that has left me scratching my head. Within my interceptor, there is code that deals with parsing and handling errors in specific ways based on factors such as status codes. While I haven't included this c ...

The type 'typeof globalThis' does not have an index signature, therefore the element is implicitly of type 'any'. Error code: ts(7017) in TypeScript

I'm encountering an issue with my input handleChange function. Specifically, I am receiving the following error message: Element implicitly has an 'any' type because type 'typeof globalThis' has no index signature.ts(7017) when att ...

Creating a Fixed HeaderToolbar in FullCalendar React

I am currently working on customizing the FullCalendar React component and I am looking to incorporate a sticky headerToolbar. My main objective is to have the header along with its toolbar remain fixed at the top of the calendar, even when users scroll th ...

Error: Typescript foreach loop encountering 'Expression yields void type'

Currently, I am working on setting up a cron job to monitor the completion of my tournaments and trigger some specific code upon completion. For reference, I came across this example: During deployment of my code, an error popped up as follows: ERROR: fu ...

Issue with NestedKeyof type arising from circularly referencing objects

Currently, I am in the process of constructing a library and my task involves implementing NestedKeyof. During my research, I came across the following code snippet: type NestedKeyOf<T extends object> = { [Key in keyof T & (string | number)]: ...

Angular component classes now use the updated RXJS 6.X syntax, rendering the previously used observable deprecated

Here is the component method I am using: if (id !== undefined && id != null && id !== 0) { this.dataService.getTransactionById(id).subscribe( (tr: ITransactionResponse) => { ...

Tips for effectively jasmine testing with the createSpyObj function, where class properties are defined as spies

When attempting to create a mock service with set-only properties, I encountered errors indicating that the value was undefined despite following the guidance in the documentation here. I want to be able to track the values of these properties during test ...

Tips for keeping a specific key value pair as the final entry in a Typescript Object

My goal is to construct a Typescript Object that has a specific element with the key 'NONE' always positioned at the end. This arrangement is crucial for displaying the object in my HTML page with this value appearing last. I am seeking an implem ...

Modify the color of the matSnackbar

I'm having trouble changing the snackbar color in Angular using Angular Material. I tried using panelClass in the ts file and adding it to the global css, but the color remains unchanged. Any suggestions on how to resolve this? I am still new to this ...

What is the process for defining child routes in Angular 2.0 for Dart?

When working with TypeScript, a child route can be easily defined as shown below: export const routes: Routes = [ { path: '', redirectTo: 'product-list', pathMatch: 'full' }, { path: 'product-list', component: P ...

What steps do I need to take in order to ensure that each webpage displays unique thumbnails?

As a newcomer to website development, I recently looked into implementing open graph on my site. However, I ran into an issue where I could only set one thumbnail for the entire website. This posed a problem as I wanted each navigation menu tab (Home, Abou ...

Passing both the object and its attributes simultaneously for reflect-metadata in TypeScript is a feature that closely resembles functionality found

Instead of using DataAnnotation in C# to add meta attributes on properties, I am seeking a similar functionality in TypeScript for a ldap model class. The goal is to have decorators that can set the LDAP attribute used in the LDAP directory internally. ex ...

Encountering a typescript error: Attempting to access [key] in an unsafe manner on an object of

I have recently developed a thorough equality checking function. However, I am encountering an issue with the highlighted lines in my code. Does anyone have any suggestions on how to rectify this problem (or perhaps explain what the error signifies)? Her ...

Adjusting the duration of the timeout for HTTP requests using Node.js alongside Angular 4 or Express

I am facing an issue with a request being sent from an Angular 4 app (which utilizes Electron that runs on Chromium) to a bottleneck server built in Node.js/Express. The server takes approximately 10 minutes to process the request, but the default timeout ...