Is there a way to identify changes in screen size in Angular when hiding an element?

Question

Is there a way to identify changes in screen size in Angular when hiding an element?

During the development of a contact form, I encountered a challenge. After successfully submitting the form, I hide it, but then the footer pops up because the form is hidden:

<div class="form-wrapper mat-elevation-z1" [hidden]="successfullySent">
    .....
</div>

I have already created a script to resolve this issue, but it only activates when there are changes in window size and is part of my footer component:

onResize() {
  this.stickyFooter();
}

Does anyone have suggestions on how I can implement this script in my contact component or somehow detect DOM changes in the footer component?

angular typescript

Answer 1

Answer №1

If you need to toggle visibility, consider using the BehaviorSubject

hideItem = new BehaviorSubject<boolean>(false);

To hide your div, trigger

this.hideItem.next(successfullySent);

Then, in the onResize method, subscribe like this

this.hideItem.subscribe(successfullySent=>{
            // handle successful send
})

Answer 2

If you need to toggle visibility, consider using the BehaviorSubject

hideItem = new BehaviorSubject<boolean>(false);

To hide your div, trigger

this.hideItem.next(successfullySent);

Then, in the onResize method, subscribe like this

this.hideItem.subscribe(successfullySent=>{
            // handle successful send
})

Answer 3

Answer №2

To ensure that your message has been successfully sent, you can create a setter for the successfullySent property in your component.

class Component {
  set successfullySent(value: boolean) {
    this._successfullySent = value;
    if (value) {
      this.showConfirmationMessage(); // or any other action
    }
  }

  get successfullySent(): boolean {
    return this._successfullySent;
  }

  private _successfullySent: boolean;
}

Answer 4

To ensure that your message has been successfully sent, you can create a setter for the successfullySent property in your component.

class Component {
  set successfullySent(value: boolean) {
    this._successfullySent = value;
    if (value) {
      this.showConfirmationMessage(); // or any other action
    }
  }

  get successfullySent(): boolean {
    return this._successfullySent;
  }

  private _successfullySent: boolean;
}

Is there a way to identify changes in screen size in Angular when hiding an element?

Answer №1

Answer №2

Similar questions

Navigating product search in your Ionic Ecommerce App

There is a problem with the Angular document because it is not

Upon upgrading to Angular 8, the function this._delegate.setNgStyle is not recognized

Transform an Hstore to a Map instance

Customizing the main color scheme in Naive-UI with typescript

Why do I keep being told that the property doesn't exist?

Is it possible to use Angular CLI 6 to run ng serve with Angular 4?

Error code TS2749 is indicating that the identifier 'XXX' is being interpreted as a value instead of a type. Perhaps you intended to use 'typeof XXX' instead

Deactivate Form Group using a custom directive

Dayjs is failing to retrieve the current system time

Currently trapped within the confines of a Next.js 13 application directory, grappling with the implementation of a

Issue with the integration of Angular and Java Jersey API arises when attempting to encode utf-8 whitespaces at the end, resulting in invalid JSON

Error encountered in Typescript React: JSON API Object expecting a ":" when indexing

Tips to prevent elements from overlapping in Angular applications

Due to a TypeScript error stating that the type '{ Id: number; Name: string; }' cannot be utilized as an index type, I am unable to assign a value for students at this time

Determine the Variable Type by Evaluating the Value of Another Variable

Issues encountered when setting up a Context Provider in React using TypeScript

Storing data retrieved from MongoDB into a local array in a MEAN stack

JavaScript - Replacing key/value pairs in an object and transferring them to a different object

Can I access the component attributes in Vuetify using Typescript?