CODEWITHSUNDEEP
angulartypescript
Mr. Jo
Mr. Jo

Reputation: 5251

How can I detect if a screen size gets changed in Angular if I hide an element?

I'm currently developing a contact form. If the form gets submitted successfully, I'm hiding it. The problem is that in this case the footer comes up because the contact form is hidden:

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

I've already developed a script that fixes this problem but the script only works on window resize changes and is part of my footer component:

onResize() {
  this.stickyFooter();
}

So does anyone has an idea how I can call this script from my contact component or detect the change of the DOM in the footer component somehow?

Upvotes: 0

Views: 224

Answers (2)

HTN
HTN

Reputation: 3594

You can use a setter for your successfullySent

class Component {
  set successfullySent(v: boolean) {
    this._successfullySent = v;
    if (v) {
      this.stickyFooter(); // or this.onResize();
    }
  }

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

  private _successfullySent: boolean;
}

Upvotes: 0

Hien Nguyen
Hien Nguyen

Reputation: 18975

You can use BehaviorSubject in this case

hideItem = new BehaviorSubject<boolean>(false);

When your div hide, you call this.hideItem.next(successfullySent);

and subscribe in onResize as 

this.hideItem.subscribe(successfullySent=>{
            // if successfullySent
})

Upvotes: 1

Related Questions