When the button is pressed, the TypeScript observable function will return a value

Question

When the button is pressed, the TypeScript observable function will return a value

Check out the snippet of code I'm working with:

removeAlert() : Observable<boolean> {
    Swal.fire({
      title: 'delete this file ?',
      text: 'sth',
      icon: 'warning',
      showCancelButton: true,
      confirmButtonText: 'ok',
      cancelButtonText: 'cancel'
    }).then((result) => {
      if (result.value) {
        return of(true);
      } 
      else if (result.dismiss === Swal.DismissReason.cancel) {
        this.showError("canceled" , "sth else");
        return of(false);
      }
    });
    //return of(false);
  }

I'm trying to figure out how to observe the value after a click and return it.

Specifically, I need help with this part if(result.value)

angular typescript observable sweetalert2

Answer 1

Answer №1

To implement a Subject and trigger a next value within an if/else statement, you need to make sure to call .subscribe() on the Subject before emitting a value. In the provided code snippet, the subscription is set up in the ngOnInit lifecycle method:

myBool: boolean;
mySubject: Subject<boolean> = new Subject();

ngOnInit() {
  this.mySubject.subscribe(value => console.log('Value: ', value));
}

removeAlert() {
  if (this.myBool) {
    this.mySubject.next(true);
  } else {
    this.mySubject.next(false);
  }
  this.myBool = !this.myBool;
}

Make sure to bind the click event to the removeAlert() method in your component template:

<button (click)="removeAlert()">Click me</button>

You can also check out this stackblitz demo for a working example of the above implementation.

Answer 2

To implement a Subject and trigger a next value within an if/else statement, you need to make sure to call .subscribe() on the Subject before emitting a value. In the provided code snippet, the subscription is set up in the ngOnInit lifecycle method:

myBool: boolean;
mySubject: Subject<boolean> = new Subject();

ngOnInit() {
  this.mySubject.subscribe(value => console.log('Value: ', value));
}

removeAlert() {
  if (this.myBool) {
    this.mySubject.next(true);
  } else {
    this.mySubject.next(false);
  }
  this.myBool = !this.myBool;
}

Make sure to bind the click event to the removeAlert() method in your component template:

<button (click)="removeAlert()">Click me</button>

You can also check out this stackblitz demo for a working example of the above implementation.

Answer 3

Answer №2

I am curious about your desired outcome. Perhaps utilizing a Subject object would be helpful.

private subject = new Subject<boolean>();


swal.fire({
...
})
.then(() => this.subject.next(true))

You can then proceed to subscribe to the subject.

Answer 4

I am curious about your desired outcome. Perhaps utilizing a Subject object would be helpful.

private subject = new Subject<boolean>();


swal.fire({
...
})
.then(() => this.subject.next(true))

You can then proceed to subscribe to the subject.

When the button is pressed, the TypeScript observable function will return a value

Answer №1

Answer №2

Similar questions

Dealing with Cross-Origin Resource Sharing Problems in Angular 8 REST API

Error in Typescript: Property 'timeLog' is not recognized on type 'Console'

Exploring the power of Angular: Combining multiple observables seamlessly

The correct procedure for refreshing a page in Angular 8

What is the best way to implement an Angular Guard that utilizes an API service for validation and redirects in case of failure?

Finding the location of an "Apply" button on an Angular HTML page

Navigating through the nested object values of an Axios request's response can be achieved in React JS by using the proper

Unable to establish a connection between the HTML element and the TypeScript variable

Struggling to add phantom-js to my Angular project

Angular 2 is encountering issues with reading and displaying unicode characters (ud83dude31 or u0C28u0C3E) from the http response onto the user

The Fusion of Apollo GraphQL Server and TypeScript: A Match Made

Error: Code layer not located while utilizing "sam invoke local" in AWS

best practices for filtering custom data returned from valuePreparefunction in ng2 smart table

Ways to identify the moment a form becomes 'ready' after the component has been initialized

From HTML element to pug-template with the use of the # symbol

Encountered a mistake while trying to deploy an Angular 2 application on Heroku - received an error message indicating an expected expression but instead got

Comparing TypeScript and C++ in terms of defining class reference member variables

Show information in a table based on a unique identifier

Pile of automatically generated elements

Troubleshooting error messages in Angular related to scss ModuleBuild