Ways to retrieve a boolean value from my API and implement it

Question

Ways to retrieve a boolean value from my API and implement it

I am facing an issue retrieving data from my backend server.

file.html

<div *ngIf="shouldDisplay">
  <p> information to display </p>
  <button mat-flat-button type="button" (click)="update()">
     update
  </button>
</div>

file.ts

shouldDisplay: boolean;

ngOnInit() {
  this.initialize();
}

initialize() {
  this.fileService.check().subscribe(data => {
    this.shouldDisplay = data;
  });
}

update(){
  this.initialize();
  
  if(this.shouldDisplay){
    this.fileService.update();
  } else {
    this.notificationService.error('errorMessage');
  }
}

I need the 'shouldDisplay' variable to be set as true in the 'check' method response. Also, I want to utilize the 'shouldDisplay' variable in the 'update' method.

angular typescript

Answer 1

Answer №1

When dealing with the asynchronous action of this.check(), it's important to handle the completion by returning the underlying Observable and subscribing to it within other methods:

ngOnInit(): void {
  this.check().subscribe(() => this.shouldDisplay = this.checkData);
}

check(): Observable<boolean> {
  return this.fileService.check().pipe(
    tap(data) => this.checkData = data)
  );
}

update(): void {
  this.check().subscribe(() => {
    if (this.checkData) {
      this.fileService.update();
    } else {
      this.notificationService.error("errorMessage");
    }
  });
}

Answer 2

When dealing with the asynchronous action of this.check(), it's important to handle the completion by returning the underlying Observable and subscribing to it within other methods:

ngOnInit(): void {
  this.check().subscribe(() => this.shouldDisplay = this.checkData);
}

check(): Observable<boolean> {
  return this.fileService.check().pipe(
    tap(data) => this.checkData = data)
  );
}

update(): void {
  this.check().subscribe(() => {
    if (this.checkData) {
      this.fileService.update();
    } else {
      this.notificationService.error("errorMessage");
    }
  });
}

Ways to retrieve a boolean value from my API and implement it

Answer №1

Similar questions

Changing the host domain to a non-.com extension in Angular-cli while serving for development

What is the best way to categorize an array based on a specific key, while also compiling distinct property values into a list

How to toggle visibility of multiple div elements in ReactJS

The 'subscribe' property is not found in the type 'OperatorFunction<Response, Recipe[]>'

It is crucial to include the _id field in the findOneAndUpdate operation

What could be preventing me from setting a boolean variable within an Observable?

What could be causing the node to run so slowly during a Chrome audit with Lighthouse?

Looking for a Regular Expression Validation Pattern!

Upon launching Google Chrome, a series of errors plague the WSL2 Ubuntu setup while running Karma and Jasmine for Angular testing

The code in the Node.js/Express application remains unchanged even after making alterations to the source code

Retrieving the component function name in Angular production mode after minification

Exploring the dynamic duo of NextJS 14 with SupabaseAuth and the power of SupabasePostgres

Struggling with keeping radCalendar events up-to-date in NativeScript (Angular)

A Defer statement in TypeScript that mimics Go's functionality

What is the process for directing to a particular URL using htaccess file?

What could be the reason behind encountering the UnhandledPromiseRejectionWarning error while executing npm build in my serverless application?

Organizing an array based on designated keywords or strings

Continuously execute the scroll function as long as the cursor remains over the element

Discover how to validate a property within an array of objects and add the accurate values to a fresh array using TypeScript

Removing a particular item from an Observable of arrays containing any type