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

Encountering a JavaScript/TypeScript issue that reads "Unable to access property 'Items' as it is undefined"

I encountered an issue with Javascript where I'm receiving an error message stating "Cannot read property 'Items' of undefined". The this keyword is consistently showing as undefined in the Base class. How can this problem be resolved? Coul ...

The command 'ng' is not valid in this context, please make sure it is being used correctly within the program or batch file

After attempting to install angular-cli with npm install -g, I hit a roadblock. Next, I attempted to add it to the PATH under Environment Variables but encountered no success. ...

Deleting a property once the page has finished loading

My issue is a bit tricky to describe, but essentially I have noticed a CSS attribute being added to my div tag that seems to come from a node module. The problem is, I can't seem to find where this attribute is coming from in my files. This attribute ...

Exploring Angular2's DOMContentLoaded Event and Lifecycle Hook

Currently, I am utilizing Angular 2 (TS) and in need of some assistance: constructor(public element:ElementRef){} ngOnInit(){ this.DOMready() } DOMready() { if (this.element) { let testPosition = this.elemen ...

Troubleshooting Angular2: Issues with ngModel functionality within an ngIf directive

Whenever I attempt to reference an NgModel directive using a template reference variable within an *ngIf statement, I encounter a "Cannot read property 'valid' of undefined" error. Consider the following form as an example: <form (ngSubmit)= ...

NVDA now prioritizes reading only the most recently loaded content in a div, disregarding the rest

When loading 3 different div elements dynamically based on search criteria, I have added attributes "role='alert'", "tabindex='0'", and "aria-live='polite'" to each div. The DOM loads all 3 div el ...

Transform an Angular application built using the Meteor framework to an Express JS-Angular application

Is there an automated or minimalist way to transform an application with a meteor backend and angular frontend to use a backend in Express js and keep the frontend using vue js instead? I have not been able to find any resources or documentation that prov ...

Implementing TypeScript with styled components using the 'as' prop

I am in the process of developing a design system, and I have created a Button component using React and styled-components. To ensure consistency, I want all my Link components to match the style and receive the same props as the Button. I am leveraging t ...

Merging Type-GraphQL and Typegoose through a Variety of Decorators

Using a combination of Type-GraphQl and Typegoose, I aim to streamline my data definitions by consolidating them into one source for both GraphQL schemas and Mongoose queries. Is it feasible to merge the two libraries in a way that allows me to describe bo ...

Enhancing JSON data: Transforming basic JSON structure into more complex format

I am currently working on a typescript file that is receiving a JSON response from an external API. I am in need of assistance to convert the received JSON into a different format. Could someone please help me with this JSON conversion task? Sample JSON d ...

Angular does not include the ControlGroup feature in its common offerings

I am new to TypeScript and have been following tutorials in an attempt to accomplish simple tasks, but so far without success. Many tutorials seem outdated with changes in Angular or provide instructions that do not work at all. Even the tutorials that do ...

Updating events instantly with a single click in Angular 6: A step-by-step guide

Hello there, I am currently diving into learning Angular 6 and I have encountered a query. I want to achieve a functionality where upon clicking a button, the text on the button changes as well as the corresponding event that triggers when the button is cl ...

In React and TypeScript, when I pass a state as a prop, the data fails to render

Here is the useState function for managing the Data Interestingly, removing this state from the code doesn't affect rendering at all. const [cart, setCart] = useState([] as Product[]); This piece of code handles Mapping and Rendering the Data <Sin ...

React TypeScript throws an error when a Socket.IO object is passed to a child component and appears as undefined

Currently, I'm developing a simple chat application as part of my university course. The code below represents a work-in-progress page for this project. While I am able to get the socket from the server and use it in the main component without any is ...

The absence of a `require` definition in Typescript combined with daisyui

Considering using typescript with react and daisyUI (a tailwindCSS component). Just a heads up, I'm currently utilizing vite In my ts.config file, I've specified node as moduleResolution Encountering an error in the tailwind config stating &apo ...

Encountered errors while trying to install ng-bootstrap, installation of package was unsuccessful

I am currently developing an Angular application and I require an accordion component for it. My efforts to install the ng-bootstrap package using the command 'ng add @ng-bootstrap/ng-bootstrap' have been unsuccessful as the installation fails ev ...

Tips on how to connect with ngFor

I have been working on an application to display various events, but I am encountering an issue. Whenever I load the webpage, it appears empty and the console throws an error saying 'Can't bind to 'ngForEvent' since it isn't a know ...

Divide a list Observable into two parts

In my code, I have an Observable called 'allItems$' which fetches an array of Items. The Items[] array looks something like this: [false, false, true, false] My goal is to split the 'allItems$' Observable into two separate Observables ...

Link a template to a formly field when clicking on another field within an Angular formly form

Recently, I have been utilizing a Formly form that includes a section for displaying dynamic HTML content. Within this form, I am using the template field to initialize some HTML content when the page loads. However, I have encountered an issue where chang ...

Unable to provide any input while utilizing npm prompts

After installing npm prompts, I encountered a strange issue. When trying to run the example code for npm prompts, I found that I couldn't enter any input at all. The underscore in the input field would blink for a few seconds, then the cursor would ju ...