Hiding or showing a div in an Angular 6 component using a service-triggered function

Question

Hiding or showing a div in an Angular 6 component using a service-triggered function

After creating a service with a method that performs an action, the next step is to have this service interact with a specific component.

service.ts:

doSomething() {
    // Carries out a task here
}

In this case, the target component is described below:

myComponent.ts

The HTML file associated with myComponent contains a div element:

<div class="myDiv">Content Here</div>

The objective now is to display and hide this div element based on code within the doSomething() method of the service.

For example:

doSomething() {

    1. Display myDiv   
    2. // Perform a task here
    3. Hide myDiv
}

Is there a way to achieve this functionality?

angular typescript angular6

Answer 1

Answer №1

Particularly, I included in the doSomething() method a flag value to control the visibility of a div.

SECTION

doSomething() {
  service
    .doSomething()
    .subscribe(
       r => {
          this.show = true;   
          2. // Perform some actions here
          this.show = false;  
       }
    );
}

<div *ngIf="show" class="myDiv">Content Goes Here</div>

However, it is crucial for this code to remain within the component and not in the service.

Answer 2

Particularly, I included in the doSomething() method a flag value to control the visibility of a div.

SECTION

doSomething() {
  service
    .doSomething()
    .subscribe(
       r => {
          this.show = true;   
          2. // Perform some actions here
          this.show = false;  
       }
    );
}

<div *ngIf="show" class="myDiv">Content Goes Here</div>

However, it is crucial for this code to remain within the component and not in the service.

Answer 3

Answer №2

To incorporate conditional rendering, include the ngIf attribute in your HTML:

*ngIf="IAmDoingSomething"

Inside the component file, make the necessary adjustments as shown below:

export class MyDoSomethingComponent{
public IAmDoingSomething = false;
...
   executeActions = async  () => {
       this.IAmDoingSomething = true;
       await doSomething();
       this.IAmDoingSomething = false;
    }
...
}

Answer 4

To incorporate conditional rendering, include the ngIf attribute in your HTML:

*ngIf="IAmDoingSomething"

Inside the component file, make the necessary adjustments as shown below:

export class MyDoSomethingComponent{
public IAmDoingSomething = false;
...
   executeActions = async  () => {
       this.IAmDoingSomething = true;
       await doSomething();
       this.IAmDoingSomething = false;
    }
...
}

Hiding or showing a div in an Angular 6 component using a service-triggered function

Answer №1

Answer №2

Similar questions

Issue encountered during rendering: "TypeError: Attempting to access property '_t' of an undefined object" while running a Unit Test using Jest

Getting an Observable for data retrieved from a Firestore query in Angular 7

Angular 6 offers a versatile multi-select dropdown feature

Inconsistency in updating RxJS Observable item within an Observable list

Trouble with badge generation - angular2-mdl version 4.0.1 (Angular 4)

Keep an eye on the output of Firebase database in Angular 2

The index type '{id:number, name:string}' is not compatible for use

Utilize a type that is not made available for export

Encountering ERR_INVALID_HTTP_RESPONSE when trying to establish a connection with a Python gRPC server using @bufbuild/connect

Adding custom CSS and JavaScript to an Angular 4 project can be done by including the necessary

Can the Date class be expanded by overloading the constructor method?

Navigating routes for a module sourced from NPM: Best practices

Utilize generic typings to interact with the Array object

Calculating the total sum of an array utilizing filter and reduce techniques

Displaying data-table with only the values that are considered true

The Firestore query for viewing resources is currently not functioning as expected due to issues with

`Getting Started with TypeScript in an ASP.Net MVC Application`

Configuring Storybook to utilize typescript props with react-docgen-typescript-loader

What is the best way to retrieve the value of an input field in React when incorporating Material UI components?

eslint warning: the use of '$localize' is flagged as an "Unsafe assignment of an `any` value"