Angular renderer2

Ionic Framework Ionic Angular
1

I have created an SOF post about this problem.

The goal is to detect an outside click. But it does not update the value, in the front, but it does in the console…

SOF post :

I created a boolean isStationSelected to know if the element is selected or not.

In which case I show a select button. The problem is that the value never updates.

I have tried plenty of solution, like this one or this article and many others, but none of theme worked.

I have tried some other solutions found on internet but no success, the value stay to the initial state.

html

<div>
    <div #station> 
        {{isStationSelected}} // always false
    </div>
    <button
      [ngClass]="{'hidden': !isStationSelected, 'block': isStationSelected}">
        Select
    </button>
</div>

ts

  ...
  @ViewChild('station') station: ElementRef;

  public isStationSelected: boolean = false

  constructor(
    private renderer: Renderer2
  ) {
    this.renderer.listen('window', 'click', (e: Event) => {
      this.station.nativeElement.contains(e.target) ?
        this.isStationSelected = true :
        this.isStationSelected = false
    })
  }
...

I reproduced exactly what I have Ionic Angular V5 (forked) - StackBlitz

But I do not get the problem in stackblitz… I think this is beceause ionic on a device. But how to fix it, or to detect outside clicks ?

I also tried to use a toggle function

  toggle() {
    this.isStationSelected = !this.isStationSelected
    console.log("fired");
  }

Which works nice when it is not in an event listener like this.renderer.listen('window', 'click') or document.addEventListener("click") for exemple.

(If I use the toggle() function in a button on click it works fine)

The logs are always good, I mean this.isStationSelected as the value it should in the console, and the log fired is well displayed.

But the value does not change in front.

2

No clue why you would need renderer2

Can u detect click using angulars (click) binding?

I did not check your conditional css but i would first use ngIf before tryinh css conditional classes

Once you have proven yourself you can use the angular way of binding to events and properties, go fancy with ngClass or other directives - my advice

Ps copy the code here instead of referencinh to StackOverflow. Also to avoid being flagged as spam

3

No clue why you would need renderer2
Can u detect click using angulars (click) binding?

What would you suggest ? Binding (click) where in order to detect an outside click ?

Once you have proven yourself you can use the angular way of binding to events and properties, go fancy with ngClass or other directives - my advice

I guess this is why I simply show the isStationSelected in the front page.

Thanks for the advice, I copy pasted the SOF post :slight_smile:.

1 Like
4

Thx - what do you mean by outside click?

Outside the browser? Within the browser but outside a dom element?

I am not able to look at your stackblitz- maybe later

5

Outside the browser? Within the browser but outside a dom element?

The problem occurs only in natives apps

I am looking if I may do something with the (click) binded to a global element. I might be able to do the trick like this.

6

Thanks Tommertom I finally found a solution using (click) event binding.

I did not went through that at first because it is more hacky than using renderer2 for detecting outside clicks.

I wrap a (click) event on the ion-content and the ion-header to detect all clicks and execute unselect().

  unselect(e) {
    if (this.button.nativeElement.contains(e.target)) return
    this.isSelected = false
  }

On my button I simple execute my toggle function

  toggleSelect() {
    this.isSelected = !this.isSelected
  }
1 Like
7

Good job - nice catch