An error occurred while trying to close the popup by clicking on the overlay: TypeError: Attempting to access the 'nativeElement' property of an

Need help with closing a modal popup when clicking on the overlay. Encountering an error: "ERROR TypeError: Cannot read property 'nativeElement' of undefined"

export class PopupComponent {
      @ViewChild('window') popup: ElementRef;
      visible = false;
      openPopup: boolean;
      constructor() { }

      ngOnInit() {
      }

      overlayClicked(event) {
        if(event.path.indexOf(this.popup.nativeElement) === -1){
          this.visible = false;
        }
}
.window__container {
        display: block;
        position: absolute;
        min-width: 360px;
        z-index: 10000;
}
.overlay {
        position: fixed;
        display: none;
        width: 100%;
        height: 100%;
        z-index: 2;
        cursor: pointer;
  }
<button md-icon-button (click)="openPopup()">Open</button>

<div class="overlay" (click)="overlayClicked($event)">
  <div *ngIf="openPopup" class=window>
    <h1>Hello</h1>
  </div>
</div>

Answer №1

To ensure proper functionality, it is recommended to include the id attribute like "#window" in the html element rather than solely relying on setting the class.

<div class="overlay" (click)="overlayClicked($event)">
  <div *ngIf="openPopup" #window class=window>
    <h1>Hello</h1>
  </div>
</div>

Similar questions

If you have not found the answer to your question or you are interested in this topic, then look at other similar questions below or use the search

Disabling Angular2 Change Detection for External Libraries: A How-To Guide

Is there a way to disable change detection for Google Maps triggering over 100 times per second? Take a look at the map preview here This issue becomes even more significant when using the mouseover event. ngDoCheck() { console.log('do check&apos ...

The design of Next.js takes the spotlight away from the actual content on the

Recently, I've been working on implementing the Bottom Navigation feature from material-ui into my Next.js application. Unfortunately, I encountered an issue where the navigation bar was overshadowing the content at the bottom of the page. Despite my ...

Error: Undefined object trying to access 'vibrate' property

Good day, I apologize for my poor English. I am encountering an issue with Ionic Capacitor while attempting to utilize the Vibration plugin. The documentation lacks detailed information, and when checking the Android Studio terminal, I found the following ...

The utilization of @ViewChildren within a service.ts file can lead to an undefined outcome

I'm facing an issue where I get an undefined error when using ViewChildren to find specific elements in a service. The problem arises because the service is used across multiple HTML files. Is there a way to properly load these children within the ser ...

Transforming the express app object into a data type instead of a regular variable

Currently, I am setting up my own TypeScript Express project and aiming to abstract the code for better organization. In my app.ts file, the code looks like this: import express from 'express' const app = express(); const port = 3000; require( ...

Determining the generic type argument of a class can be unsuccessful due to the specific properties within that class

Why is it that Typescript sometimes fails to infer types in seemingly simple cases? I am trying to understand the behavior behind this. When Typescript's Type Inference Goes Wrong Consider the scenario where we have the following class declarations: ...

Recently, I decided to delve into the world of Angular and explore the possibilities of designing a collapsible D3 force graph. I stumbled upon this interesting tutorial (https://bl.ocks.org/ngminhtrung/ef06acdaa036365dd15746

I am interested in implementing this using Angular: https://bl.ocks.org/ngminhtrung/ef06acdaa036365dd15746effce7f474 When working with Angular, I encountered issues where d3.layout.force() is not functioning properly and d3.event is causing errors. d3.tre ...

What could be causing my items to appear twice and as blank elements?

I'm feeling a bit lost here as to why my code isn't functioning correctly. For some reason, it's not displaying the predefined items that I've set up. Any guidance or assistance would be greatly appreciated. Dealing with Angular errors ...

Discovering the interface type of class properties in order to implement a factory method

I am struggling with implementing a factory method in my code. I want to be able to pass not only a Class type to instantiate but also a set of default values for the properties within the class. My goal is to have the compiler notify me if I try to pass i ...

The checkbox confirmation button appears to be absent in the ngx mat date time picker

I encountered a styling issue with the ngx mat datetime picker in my Angular 15 project. You can find the package here. To resolve the issue, I included @import "https://fonts.googleapis.com/icon?family=Material+Icons"; in my styles.scss file, and that re ...

Guide on utilizing *ngFor with a JSON array in order to extract specific values

I am trying to display my JSON data where the "4th January 2018" is set as the list header and the description as the content of the list. How can I utilize the *ngFor directive for this task? However, when I attempt to use *ngFor="let item of timeline da ...

`Incredible sequence of events unfolding`

In order to add an additional action after the deletion process is complete, I must make modifications to an epic. The current epic code is as follows: const deleteComponentEpic: Epic< AppActions, AppActions, AppStore, ComponentDetailsEpicsDepen ...

Issue with Angular 12 service worker causing SW update to fail

I'm currently working on integrating a service worker into my Angular application to enable updates without user intervention. Here is the step-by-step process that I am following: Make changes to the application Run ng build Start an HTTP ser ...

Angular Element utilizing Angular Universal

I am working on an Angular Universal app and facing issues while trying to load a web component that I created separately. I have concatenated all the JS files for the child app into one and attempted to use it in my parent app using a selector. However, t ...

Troubleshooting Cors Problem between Angular 2 Form Data and Express

I'm attempting to send some files to an Express server that utilizes the cors() module in the following way app.use(cors()); This is the Angular 2 code used for file uploading let formData:FormData = new FormData(); for(let i = 0; i < files. ...

What is the easiest method for updating the date format in the Mat-Datepicker to DD/MM/YYYY?

I am currently setting up a mat-datepicker for Date of Birth (DOB), and the default display format is MM/DD/YYYY. I am looking to change it to DD/MM/YYYY with minimal coding involved. I attempted to use the format tag in the mat-date picker, but unfortuna ...

Enhancing Luxon DateTime with extension type support

Referencing the issue at https://github.com/moment/luxon/issues/260, I am looking to extend the DateTime object as shown below: import { DateTime } from 'luxon'; function fromUnix(tsp?: number): DateTime { return DateTime.fromMillis(tsp * 1000 ...

What is the correct way to extract a value from a keyvalue pair?

When dealing with an object that returns boolean "issues", I specify it as a string. If the value is true, I aim to show a checkmark; if false, I want to display a cross. <ul *ngFor="let filtered of reposFiltered | keyvalue"> <li *ngIf=& ...

Collection of functions featuring specific data types

I'm currently exploring the idea of composing functions in a way that allows me to specify names, input types, and return types, and then access them from a central function. However, I've encountered an issue where I lose typing information when ...

What is the best way to choose a dropdown item at random from a list using Angular 5?

My current setup involves a list that looks like this... export const inventory= [ 'coffee' 'tea' 'wine' 'beer' 'sake' .... ]; Within the HTML, I am using a loop to create dropdown menus a set number of t ...