How to conditionally trigger a click event in Angular?

Question

Edited: The code below is simplified, the disabled property won't help. I have a form and when I submit it according to success or failure of it I want the model to pop - only if the form values are correct. The modal button should be combined with submit form button

Why not use the [disabled] property on the modal button with that logic? — , Feb 05 '19 at 18:20
I agree with @OneLunchMan suggestion, it is a common approach to have the button remain disabled until the required conditions are met. At any rate, based off your question and the code you provided it appears you already know what you're doing. I am a bit unclear on what it is you're really asking help for? — Narm, Feb 05 '19 at 18:25
If looks like you using jQuery based Bootstrap modals. You should really consider using a library such as [ng-bootstrap](https://ng-bootstrap.github.io/) with components/models specifically made for Angular with no dependencies on jQuery. Also that way you would not need to trigger a click, you could just use various available methods on the components to open/close a modal for example without needing to query DOM elements and execute `click()`, which wouldn't be very testable nor compatible with Angular rendering. — Alexander Staroselsky, Feb 05 '19 at 18:29
As per your edited question https://stackoverflow.com/a/54540905/815600. — Sandy, Feb 05 '19 at 19:52

Sandy · Answer 1 · 2019-02-05T19:50:54.353

How about having a condition in HTML file itself.

<button type="button" (click)="(2+3 > 1) && onConditionApply()">trigger here!</button>

Its basically a standard JavaScript style of code.

Answer as per Edited Question

I am still not clear with the question. But let me give a try.

formSubmitted() {
    this.httpClient.post().subscribe(
        (response) => {
            // Make Show Modal button enabled/Unhide Modal show button.
            // Trigger Modal button to show popup
        });
}

Basically I assume form submission is async call and then just subscribe it and do things in success callback.

And regarding "only if the form values are correct",

<div #f="ngForm"></div>
<button [disabled]="f.invalid"></button>

Above I am just trying to make a button enabled/disabled based on form validity status. If this value needs to be accessed in component ts file, you need to add @ViewChild() f in your TS file and things can be accessed in same way.

It may not directly answer your question (as I am not clear what exactly the requirement is) but may give you pointers in right direction.

Hope this helps.

score 0 · Answer 2 · answered Feb 05 '19 at 18:37

In .ts file

export class ClassName{
  allowButton = false;

onConditionApply() {
    if (2 + 3 > 1) {
      allowButton = true;
    }
   }
  }

In Html File.

<button type="button" class="btn btn-primary" [disabled]="allowButton" data-toggle="modal" data-target="#myModal">Open modal</button>

How to conditionally trigger a click event in Angular?

2 Answers2