Stuck on an issue?

Lightrun Answers was designed to reduce the constant googling that comes with debugging 3rd party libraries. It collects links to all the places you might be looking at while hunting down a tough bug.

And, if you’re still stuck at the end, we’re happy to hop on a call to see how we can help out.

Error on close a modal with the *ngIf directive

See original GitHub issue

An error is occurring when I try to close a modal with the *ngIf directive.

Code:

<button type="button" (click)="showModal=true"> Show </button> <div *ngIf="showModal" [config]="{ show: true }" bsModal class="modal fade" tabindex="-1" role="dialog" aria-hidden="true"> <button type="button" (click)="showModal=false"> Close </button> </div>

When I click on close button, the following error is displayed on the console:

ERROR TypeError: Cannot read property 'querySelectorAll' of null at ModalDirective.webpackJsonp.../../../../ngx-bootstrap/modal/modal.component.js.ModalDirective.focusOtherModal (modal.component.js:278) at modal.component.js:208 at callbackRemove (modal.component.js:237) at ZoneDelegate.webpackJsonp.../../../../zone.js/dist/zone.js.ZoneDelegate.invokeTask (zone.js:424) at Object.onInvokeTask (core.es5.js:3881) at ZoneDelegate.webpackJsonp.../../../../zone.js/dist/zone.js.ZoneDelegate.invokeTask (zone.js:423) at Zone.webpackJsonp.../../../../zone.js/dist/zone.js.Zone.runTask (zone.js:191) at webpackJsonp.../../../../zone.js/dist/zone.js.ZoneTask.invokeTask (zone.js:498) at ZoneTask.invoke (zone.js:487) at timer (zone.js:1829)

Issue Analytics

State:
Created 6 years ago
Comments:5 (1 by maintainers)

Top GitHub Comments

2reactions

jschankcommented, Feb 8, 2018

You know the ngx-bootstrap documentation would seem to recommend what @davidmguerra (and I) are doing

Auto shown modal Show modal right after it has been initialized. This allows you to keep DOM clean by only appending visible modals to the DOM using *ngIf directive.

0reactions

Lehrencommented, Feb 6, 2019

Same problem on tooltips and popovers.

Top Results From Across the Web

Can't bind to 'ngIf' since it isn't a known property of 'div' in ...

It really looks like Angular's error handling could 'know' (or guess) that ngIf is one of it's own directives, and 'know' that it...

Angular Ng Bootstrap Modal Content (forked) - StackBlitz

Example usage of the modal widget from https://ng-bootstrap.github.io. ... <div *ngIf="f.jobId.errors. required">. Job Id is required.

Template-Driven Forms • Angular - codecraft.tv

The directives we need to build template-driven forms are in the FormsModule not the ReactiveFormsModule , so let's import that and add it...

Introduction to Angular animations

Let's create a new open-close component to animate with simple transitions. Run the following command in terminal to generate the component: content_copy

What is ng-template & ng-container in Angular? - Educative.io

In Angular, directives fall under 3 major categories: ... ng-template falls under the category of structural directives, which help us define a template...