click anywhere to remove a class in angular2

Question

im on angular2+ and i have an element that has an active class, such as

<div class="notification active">...</div>

what i need to do is that, if i click/tap on anything except on that div the active class should be removed.

similarly to this jquery example: https://codepen.io/vlrprbttst/pen/xOoxWo

i had a hard time figuring out how to add that active class and now i have no idea on what's the approach to remove it, and especially how to typescript the "click anywhere to..." part. :/

i am not interested in detecting if that class is there or not as in this question: remove or add Class in Angular and the main difficulty is not removing the class i guess, but the "click anywhere to remove it" part.

any help is greatly appreciated

Refer to: https://stackoverflow.com/questions/50531212/directive-click-outside-angular-6 — msanford, Oct 08 '19 at 14:18
Why not just use plain JS to add an event handler to the body? It's a fairly trivial solution. — Rich, Oct 08 '19 at 14:24
`document.body.addEventListener('click', handler);` where `handler` just checks the contents of `event.target` — Rich, Oct 08 '19 at 14:27
@Rich thanks but im totally bad with javascript i unfortunatly wouldn't know what to do with that line of code :(. would you be kind enough to help with a working fiddle or something? — valerio0999, Oct 08 '19 at 14:30

terahertz · Accepted Answer · 2019-10-08T16:02:33.137

3

Sorry for the flag earlier, didn't read your question thoroughly enough. Anyway, like Rich had mentioned, what you're trying to do is quite similar to jQuery/javascript if you come from that background (like most of us do).

export class AppComponent  {
  name = 'Angular';

  constructor(private eleRef: ElementRef){

  }

  ngAfterViewInit() {
    this.eleRef.nativeElement.querySelector('main').addEventListener('click', this.onClick.bind(this));
  }

  onClick(event: MouseEvent){
    // console.log(event.target)
    let clickedEle = event.target as HTMLElement;
    let aBoxEle = this.eleRef.nativeElement.querySelector('#aBox') as HTMLElement;
    if(clickedEle.id != "aBox"){
      if(aBoxEle.classList.contains("box")){
        aBoxEle.classList.remove("box");
      }else{
        aBoxEle.classList.add("box");
      }
    }
  }
}

You can try it out with this stackblitz example

Also, do have a read on this: “Thinking in AngularJS” if I have a jQuery background?. To be able to use Angular effectively, you have to "unlearn" some parts of jQuery that you are used to.

edited Oct 08 '19 at 16:02

answered Oct 08 '19 at 14:33

terahertz

2,915
1
21
33

thanks for your time. i have a problem, this is my code: https://nimb.ws/kUKBfm but i get an error in the console: ERROR TypeError: Cannot read property 'addEventListener' of null – valerio0999 Oct 08 '19 at 14:49
Do you have an element wrapping around your `` that is displaying ContainerElement? Or is your element `
` nested inside another element? Check your developer tools's inspector, make sure you are targeting the right element in your code's context.
– terahertz Oct 08 '19 at 14:57
i used a
like in your example and it works but.. instead of a console log, how do i remove "active" class from the #ntf div? :)
– valerio0999 Oct 08 '19 at 15:04
`let ele = event.target as HTMLElement;` and `ele.classList.add("green");`. I have modified the stackblitz, you should see the changes if you reload. What this is doing is simply `event.target` as a HTMLElement type. This way, you'll be able to access all the functions to manipulate the DOM as you'd like to. The docs are here: [HTMLElement](https://developer.mozilla.org/en-US/docs/Web/API/HTMLElement). You can also cast it this way `let ele = event.target`. – terahertz Oct 08 '19 at 15:35

score -1 · Answer 2 · answered Oct 08 '19 at 18:15

-1

You could achieve that by doing something like this, using NgClass.

component.html

<div (click)="clicked=!clicked" [ngClass]="clicked ? 'active' : 'hidden'">                
     Your content goes here
</div>

So now define your active and hidden css classes like this in your

component.scss

.active {
    display: block;
}

.hidden {
    display: none;
}

That should do the trick :)

answered Oct 08 '19 at 18:15

P0wersl4ve

55
3

"what i need to do is that, if i click/tap on anything except on that div the active class should be removed." what you suggested just works when clicking the `div` – eja Dec 14 '22 at 15:57

click anywhere to remove a class in angular2

2 Answers2