Angular:How to Implement Condtion Based Click Event

Condition based click event in Angular 2

(click)="idx > 0 && removeSelected(item.spId)"

Conditionally apply click event in Angular 4

There is no way to enable/disable bindings.

It's possible to do that imperatively

@ViewChild('.user') aUser:ElementRef; 

clickHandler(event) {
  console.log(event);
}
_clickHandler = this.clickHandler.bind(this);

ngAfterViewInit() {
  this.aUser.nativeElement.addEventListener('click', this._clickHandler); 
}  

to unsubscribe use

this.aUser.nativeElement.removeEventListener('click', this._clickHandler); 

See also Dynamically add event listener

Apply a directive conditionally

I don't know if you can apply directives based on a condition, but a workaround would be having 2 buttons and display them based on a condition.

<button *ngIf="!condition"></button>
<button *ngIf="condition" md-raised-button></button> 

Edit: maybe this will be helpful.

Conditionally Alter link in button in Angular

Don't use onClick event on the button, although it might feel weird to you, since you are coming from vanilla JS, you should use ng-click.

<button
      class="halo-modal-action-button external-instructions"
      ng-disabled=""
      ng-click="openWindow()"
      data-bs-enabled=""
      >Instructions</button>

and inside controller

$scope.openWindow = function(){
    if ( condition ) {
        open('http:foo.bar')
    } else {
        open('http:bar.foo')
    }
}

How to call multiple methods on a button click using Angular 5?

<button (click)="callall()"></button>

make one function and call all the function in that

function 1

abc(){}

function 2

bcde(){}

call both in common function

 callall(){

        this.abc()
        this.bcde() 
}

How to detect click outside of an element in Angular?

Here is the link to the working demo: Stackblitz Demo

I would do this by using the Angular recommended approach which is also easy to develop apps in environments with no DOM access, I mean Renderer 2 class which is an abstraction provided by Angular in the form of a service that allows manipulating elements of your app without having to touch the DOM directly.

In this approach, you need to inject Renderer2 into your component constructor, which the Renderer2 lets us to listen to triggered events elegantly. It just takes the element you're going to listen on as the first argument which can be window, document, body or any other element reference. For the second argument it takes the event we're going to listen on which in this case is click, and the third argument is actually the callback function which we do it by arrow function.

this.renderer.listen('window', 'click',(e:Event)=>{ // your code here})

The rest of the solution is easy, you just need to set a boolean flag which keeps the status of the menu (or panel) visibility, and what we should do is to assign false to that flag when it's clicked outside of the menu.

HTML

<button #toggleButton (click)="toggleMenu()"> Toggle Menu</button>

<div class="menu" *ngIf="isMenuOpen" #menu>
I'm the menu. Click outside to close me
</div>

app.component.ts

    export class AppComponent {
      /**
       * This is the toogle button elemenbt, look at HTML and see its defination
       */
      @ViewChild('toggleButton') toggleButton: ElementRef;
      @ViewChild('menu') menu: ElementRef;
    
      constructor(private renderer: Renderer2) {
        /**
         * This events get called by all clicks on the page
         */
        this.renderer.listen('window', 'click',(e:Event)=>{
             /**
              * Only run when toggleButton is not clicked
              * If we don't check this, all clicks (even on the toggle button) gets into this
              * section which in the result we might never see the menu open!
              * And the menu itself is checked here, and it's where we check just outside of
              * the menu and button the condition abbove must close the menu
              */
            if(e.target !== this.toggleButton.nativeElement && e.target!==this.menu.nativeElement){
                this.isMenuOpen=false;
            }
        });
      }
    
      isMenuOpen = false;
    
      toggleMenu() {
        this.isMenuOpen = !this.isMenuOpen;
      }
    }

Again, if you like to see the working demo, use this link: Stackblitz Demo

How to do something conditionally with Observables before subscribe?

Not sure I understand the question, but here's a similar way of doing that and trying to keep the code as clean as possible :

const click$ = Observable.fromEvent(document, 'click');

// I don't know what's in your condition so I just return true
const condition = () => true;

const fnCtrlIsPressed = () => 'Ctrl is pressed';
const fnCtrlIsNotPressed = () => 'Ctrl is not pressed';

click$
  .map(event => event.ctrlKey)
  .map(isCtrlPressed => isCtrlPressed ?
    fnCtrlIsPressed():
    fnCtrlIsNotPressed())
  .do(console.log)
  .subscribe();

The output will be something like that :

Here's a working Plunkr : https://plnkr.co/edit/VwuXkk0QnVGC4hPCvtOo?p=preview

How to handle "single click" and "double click" on the same html DOM element using typescript:Angular 2 or 4?

You can use a timeout and a boolean flag to solve this.
Consider the following:

The DOM takes a few milliseconds to recognize the double click.

But it's damn sure that it recognize the double click but the first click is also recognized.

So the logic goes like this.

isSingleClick: Boolean = true;     

method1CallForClick(){
   this.isSingleClick = true;
        setTimeout(()=>{
            if(this.isSingleClick){
                 doTheStuffHere();
            }
         },250)
}
method2CallForDblClick(){
         this.isSingleClick = false;
         doTheStuffDblClickHere();
}

Call the method one in the click event of the element and method 2 in the click event of the element.

Angular - How to disable mouse click events outside a specific DIV based on a condition?

You can do the following thing. Look at the code and find the (click) event and pass the reference of the MouseEvent to this event.

Template:

<div (click)="stopEvent($event)"></div>

Then call:

stopEvent(e: MouseEvent) {
  e.stopPropagation();
}

Another solution would be to add a disable to the div tag:

<div [disabled]="true"></div>

---

Related Topics