Initiate an error signal or finish processing from a subscription

Just starting with Angular and attempting to activate the error callback during a subscribe function. I'm making changes to a table object and looking to display a toast message when a certain condition is met. This should occur either on error or completion.

// editCollection.component.ts
handleMoveRowsDown() {
  this.collectionsStore.moveRowsDown(this.selectedRows).subscribe(
    (collection) => {
      this.table.sorts = [];
      this.rowsSorted = true;
      this.collection = collection;
      this.table.rows = this.collection.rows;
    },
    (error) => {
      console.error(error);
      this.toastr.error("You've hit bottom!"); // show toast if "trigger" is true
      this.selectedRows = [];
    }
  );
}
// collections.store.ts
moveRowsDown(selectedRows: DtRow[]): Observable<DtCollection> {
  let trigger = false;

  // manipulate table... 

  if (trigger) {
    throw new Error(); // currently not effective
  } else {
    this.setCurrentCollection(tempCollection as DtCollection);
    // how can I include trigger when returning asObservable?
    return this._currentCollection.asObservable(); 
  }
}

Answer №1

Retrieve an observable containing an error instance using the throwError() method.

return throwError(() => new Error());
import { throwError } from 'rxjs';

moveRowsDown(selectedRows: DtRow[]): Observable<DtCollection> {
  let trigger = false;
  
  // manipulate table... 

  if (trigger) {
    return throwError(() => new Error());
  } else {
    this.setCurrentCollection(tempCollection as DtCollection);
    // how can I include trigger when returning the asObservable?
    return this._currentCollection.asObservable(); 
  }
}

View Dummy Demo on StackBlitz

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

Tips for reverting from Angular 7 to Angular 6

I attempted to switch from angular 7 back to angular 6 by executing the following npm commands: npm uninstall -g angular-cli npm cache clean npm install -g <a href="/cdn-cgi/l/email-protection" class="__cf_email__" data-cfemail="32535c55475e53401f515e5 ...

Context API is failing to work in components that use children when the version is v16.6.0 or higher

Currently, I am utilizing the latest context API of React (v16.6.0 or higher) by specifying the public static contextType inside the component that consumes the context. Everything works smoothly unless the component declaring the Provider directly include ...

Creating a structure within a stencil web component

In my current project, I am utilizing Stencil.js (typescript) and need to integrate this selectbox. Below is the code snippet: import { Component, h, JSX, Prop, Element } from '@stencil/core'; import Selectr from 'mobius1-selectr'; @ ...

What is the best way to set up the parser and plugins using ESLint's updated flat configuration?

How can ESLint be configured using the new "flat config" system (specifically with the eslint.config.js file) to work seamlessly with both @typescript-eslint/eslint-plugin and /parser? I have been struggling to make ESLint's new configuration system ...

Creating a dynamic text field integrated with Google Places in Ionic 4: a step-by-step guide

I am currently implementing the google-place-api autoComplete feature in my project, but I encountered an error: TypeError: Cannot read property 'getInputElement' of undefined .html <section [formGroupName]="i" *ngFor="l ...

Fetching data in VueJs before redirecting to a new page

Within the mounted function, I am creating an action that fetches data from a Rest API and populates my table in a Vue.js component mounted() { UserService.getProjects().then( (response) => { this.isProject = true; this.project ...

What could be causing NgModel to fail with mat-checkbox and radio buttons in Angular?

I am working with an array of booleans representing week days to determine which day is selected: selectedWeekDays: boolean[] = [true,true,true,true,true,true]; In my HTML file: <section> <h4>Choose your days:</h4> <mat-che ...

The library path in a react (js) integrated mono repo could not be resolved by Nx 16

Greetings everyone, I am a newcomer to the world of NX Monorepo. Following the step-by-step instructions on how to create an Integrated React Monorepo from the official NX website can be found here. I diligently followed each instruction provided. Howeve ...

Using an Angular variable in a JavaScript function may seem challenging at first, but with

Currently, I have an Angular component that utilizes a JavaScript library (FullCalendar V4). The library triggers a function when certain events occur (such as mouseover or click) and provides an argument that allows me to access the calendar values (start ...

Utilizing IIS Windows Authentication for Angular 4 and .Net Core 2.0: Resolving Access-Control-Allow-Origin Issue

I have tried numerous StackOverflow answers regarding this issue but none of them seem to be working effectively for me. The error message I keep encountering in the console is: Failed to load : No 'Access-Control-Allow-Origin' header is present ...

Changing the Month Label Format from Short (MMM) to Long (MMMM) in Angular Material Datepicker

I am looking to customize the month labels in Angular Material datepicker. By default, the month view displays in MMM format and I want to change it to MMMM using custom MatDateFormats. export const APP_DATE_FORMATS: MatDateFormats = { parse: { dat ...

Adjusting column sizes smaller than 1/12 within the Primeng flex grid in Angular 8

In using primeng grid, a common desire is to have 2 columns behave a certain way: the first column should take up 1/13 of the total space the second column should take up the remaining space. Many attempt different solutions like: <div class="p-g ...

What is the method for running a powershell script within protractor testing?

I am attempting to run a powershell script within my protractor test. Protractor spec.ts it("Executing Powershell Script", async () => { browser.get('http://mywebsite.com') var spawn = require('child_process').spawn; ...

Having trouble debugging localhost because the cookie for a specific domain is not being written

In a particular scenario, I needed to write a cookie upon logging in with a code for a specific domain, for example, let's say the domain is "uat.example.com." The backend API will generate this cookie after authenticating the user, and then the appl ...

Guide to setting up a one-to-many self relation entry in Prisma

I am facing a challenge with a simple schema model that includes one-to-many self relations. In this scenario, my goal is to create a parent entity along with its children in a single transaction. How can I accomplish this task effectively? data-model Y{ ...

Is the ng bootstrap modal within Angular failing to show up on the screen

In the midst of working on my project, I encountered an issue with opening a modal using ng bootstrap. Although I found a similar thread discussing this problem, it did not include bootstrap css. I decided to reference this example in hopes of resolving t ...

Develop a module using the Angular plugin within the Eclipse IDE

I am currently new to Angular and following the Angular Get Started Tutorial (https://angular.io/guide/quickstart). I am using the angular cli plugin in Eclipse. As I reached the 7th part of the tutorial, I am required to create a new module with the comm ...

Angular's dependency injection gets disrupted by the use of lazy loading

I am facing a scenario where I have a module A, which is an npm package that needs to be used in module B. Module B is also an npm package that is utilized in an application. Module B is lazily loaded by the application. Within module A, I have the follo ...

Is it considered improper to include non-input HTML elements within a form tag in Angular reactive forms?

When working with an angular reactive form to manage html inputs, is it acceptable to include non-input html elements within the form tags? NOTE: The previous example has been removed. A new one will be provided soon. ...

Retrieving Data from Repeated Component in Angular 6

Need Help with Reading Values from Repeating Control in Angular 6 I am struggling to retrieve the value of a form field in the TS file. Can someone please assist me with this? This section contains repeating blocks where you can click "add" and it will g ...