How to close a `div` box in Angular when I click outside of it.Without using jQuery

Question

I am working on a site which has been created using Angular. On the homepage I have a Service Box that contains icons which redirects us to different pages. Currently when I click on service box icon it displays the service box:

Image_Of_Service_Box

Now Whenever I click outside of it, it does not close. I am not using jQuery in my project. I have seen many answers for AngularJs but none worked.

Here is my code for service-box.component.html:

<button mat-icon-button (click)="opened = !opened">
        <mat-icon>apps</mat-icon>
    </button>
    <div class="box" [class.opened]="opened">
        <div class="tip">
            <div class="border"></div>
            <div class="foreground"></div>
        </div>
    <div class="services">
        <div class="row">
            <a href="https://blog.fossasia.org">
                <div class="col">
                    <div class="img">
                        <img src="assets/images/blog.png" alt="Fossasia">
                    </div>
                    <span>Blogs</span>
                </div>
            </a>
            <a href="https://github.com/fossasia/loklak_search">
                <div class="col">
                    <div class="img">
                        <img src="assets/images/github.png" alt="Fossasia">
                    </div>
                    <span>Github</span>
                </div>
            </a>
            <a href="https://github.com/fossasia/loklak_search/issues">
                <div class="col">
                    <div class="img">
                        <img src="assets/images/bug.png" alt="Fossasia">
                    </div>
                    <span>Bug Report</span>
                </div>
            </a>
        </div>
    </div>
    <hr />
        <div class="services">
            <div class="row">
                <a href="https://fossasia.org/">
                    <div class="col">
                        <div class="img">
                            <img src="assets/images/fossasia_logo_55x22.png" width="55" height="22" alt="Fossasia">
                        </div>
                        <span>FOSSASIA</span>
                    </div>
                </a>
                <a href="https://phimp.me">
                    <div class="col">
                        <div class="img">
                            <img src="assets/images/phimpme_64x64.png" width="50" height="50" alt="Phimpme">
                        </div>
                        <span>Phimpme</span>
                    </div>
                </a>
                <a href="https://susper.com/">
                    <div class="col">
                        <div class="img">
                            <img src="assets/images/susper_60x16.png" width="60" height="16" alt="Susper">
                        </div>
                        <span>Susper</span>
                    </div>
                </a>
            </div>
            <div class="row">
                <a href="https://chat.susi.ai/">
                    <div class="col">
                        <div class="img">
                            <img src="assets/images/susi_60x12.png" width="60" height="12" alt="Susi.AI">
                        </div>
                        <span>Susi.AI</span>
                    </div>
                </a>
                <a href="https://pslab.fossasia.org/">
                    <div class="col">
                        <div class="img">
                            <img src="assets/images/pslab_64x68.png" width="50" height="50" alt="PSLab">
                        </div>
                        <span>PSLab</span>
                    </div>
                </a>
                <a href="https://eventyay.com/">
                    <div class="col">
                        <div class="img">
                            <img src="assets/images/eventyay.png" width="60" height="18" alt="Eventyay">
                        </div>
                        <span>Eventyay</span>
                    </div>
                </a>
            </div>
        </div>
    </div>

service-box.component.ts contains only a public variable opened set to false by default.
I have tried to wrap up whole code of service-box.component.html in a div and used (focusout) event like this:

<div id="side-menu" (focusout)="opened=false">
//Rest of code as in service-box.component.html
</div>

But doing this disables the links in service box. Any suggestion will be of great help.

see [(document:click)](https://stackoverflow.com/questions/35712379/how-can-i-close-a-dropdown-on-click-outside) or [@HostListener('document:click', ['$event'])](https://stackoverflow.com/questions/40107008/detect-click-outside-angular-component) — Ilia Volk, Mar 11 '18 at 23:15

score 3 · Accepted Answer · answered Mar 11 '18 at 22:56

3

You seem to be using @angular/material and therewith the CDK. You should try the CDK's Overlay package.

The overlay package provides a way to open floating panels on the screen.

By setting the attribute hasBackdrop, the overlay will create a backdrop element (= everything outside of your component) and with it a backdropClick @Output event, to which you could bind the closing of your "Service Box".

answered Mar 11 '18 at 22:56

Kim Kern

54,283
17
197
195

For more detailed instructions, this blog article seems to be a good source: https://blog.thoughtram.io/angular/2017/11/20/custom-overlays-with-angulars-cdk.html – Kim Kern Mar 11 '18 at 22:59

How to close a `div` box in Angular when I click outside of it.Without using jQuery

1 Answers1