The close button in Angular 4 is unresponsive until the data finishes loading in the pop-up or table

Having trouble with the Close button in Angular 4 popup/table

  1. The Pop Up is not closing after clicking anywhere on the screen.
  2. I have added backdrop functionality so that the pop-up closes only when the user clicks on the close icon.
  3. However, the close icon does not work until data loads inside the pop-up/table. I am using ag-grid data within the pop-up/table.

Any suggestions or ideas on how to solve this issue?

Here is a snippet of my template:

reg-list.component.ts

 {
        headerName: "Regulations",
        cellRenderer: this.regulationsClick,
        onCellClicked: function(params) {
            console.log(params);
            const modalRef = that.modalService.show(ControlsListComponent,{class: 'gray modal-lg', keyboard: false, backdrop : 'static'});
            modalRef.content.data = params.data;
        },
        valueGetter: this.regulationsClick,
        enableRowGroup: true,
        enablePivot: true,
}


regulationsClick(params){
    if(params.data && params.data.AppCertificateMembers.length>0){
        const Regulations:any=[];
        let regulationstring: any;
        params.data.AppCertificateMembers.forEach((value,index) =>{
            Regulations.push(value.Certificate.name);
            params.regulationstring = Regulations.toString();
            console.log("assets", params.regulationstring);
        });
        return `<a href="javascript:void(0)" style="font-size: 12px">${params.regulationstring}</a>`;
    }
    else{
        console.log("checkelse");
        return ;
    }
}

Answer №1

Greetings to all, I appreciate the feedback on this matter.

I am happy to report that I was able to resolve this issue through my own research.

For those interested, please consider the following details:

Typically, when a pop-up containing ag-grid data is loading, the close-icon may not work smoothly.

Hence, using "modal-body" as a "class" within the "div" tag seems to fix this issue effectively.

This allows the pop-up to be closed immediately upon clicking the close-icon.

[Note: Specifically referring to Bootstrap modal-popups]

For further clarity, refer to the code below.

reg-list.component.html

<div class="modal-body">
       <ag-grid-angular
          #agGrid
          style="height:710px;width:auto;"
          id="myGrid"
          class="ag-theme-material"
          [rowData]="Controls"
          [columnDefs]="columnDefs"
          [enableSorting]="true"
          [enableRangeSelection]="true"
          [pagination]="true"
          [enableColResize]="true"
          (rowGroupOpened)="onRowGroupOpened($event)"
          [enableFilter]="true"
          (columnRowGroupChanged)="onColumnRowGroupChanged()"
          [autoGroupColumnDef]="autoGroupColumnDef"
          [rowSelection]="rowSelection"
          [suppressRowClickSelection]="true"
          (rowSelected)="onRowSelected($event)"
          [rowGroupPanelShow]="rowGroupPanelShow"
          (gridReady)="onGridReady($event)">
      </ag-grid-angular>
  </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

Simplify an array in Javascript

I have a collection of objects structured in the following way: let list = [ { 'items': [ 'item 1', 'item 2' ] }, { 'items': [ 'item 3' ] } ] My goal is to flatte ...

Retrieving a nested type based on a particular condition while keeping track of its location

Given an object structure like the one below: type IObject = { id: string, path: string, children?: IObject[] } const tree = [ { id: 'obj1' as const, path: 'path1' as const, children: [ { id: &ap ...

What is the best way to assign ngModel to dynamically inserted input rows in Angular 4+ (specifically in a mat-table)?

Just a quick question - how can I add ngModel to dynamically added new input rows? I have a Mat table with multiple rows and an "add element" method that adds a new row every time a button is clicked. This way, I want to bind the user-entered values and se ...

Passing data from a container component to a Redux Form component in React with TypeScript

One of my Form container components looks like this: class PersonalDetailContainer extends React.Component<PropTypes> { onSubmit = async (fields: PersonalFields) => { this.props.savePersonalDetail(fields); }; render(): JSX.Element { ...

Guide on importing a markdown file (.md) into a TypeScript project

I've been attempting to import readme files in TypeScript, but I keep encountering the error message "module not found." Here is my TypeScript code: import * as readme from "./README.md"; // I'm receiving an error saying module not found I als ...

What are the steps to creating an Observable class?

I am working with a class that includes the following properties: export class Model { public id: number; public name: string; } Is there a way to make this class observable, so that changes in its properties can be listened to? I'm hoping fo ...

Tips for centering text inside a div using a separator

During my side project, I decided to use the angular material divider but encountered issues with aligning the text correctly. https://i.stack.imgur.com/zg1mu.png The problem can be seen in the image provided - the text on the right side is not aligned b ...

When converting to TypeScript, the error 'express.Router() is not defined' may

Currently, I am in the process of converting my express nodejs project from JavaScript to TypeScript. One of the changes I've made is renaming the file extension and updating 'var' to 'import' for "require()". However, there seems ...

Issue encountered: Jest-dom is throwing a TypeError because $toString is not recognized as a function on a project using Typescript, React

I have been facing a challenge while setting up jest and @testing-library/jest-dom for my typescript/react/next.js website. Each time I try running the tests, an error occurs, and I am struggling to identify the root cause. This issue has been perplexing ...

The serverTimeStamp() function in firebase.firestore.FieldValue does not allow for the Timestamp data type to be used

async addNewUser(id: string, email: string) { await this.afs.doc<MemberProfileModel>(FirestoreDbConstant.MEMBER_PROFILES + `/${id}`).set({ email, registeredDate: firebase.firestore.FieldValue.serverTimestamp(), }); } This appro ...

What is the proper method for specifying the path to my index.tsx file within a React application?

After using npx create-react-app my-app --template typescript to generate my React app, I decided to reorganize the files by moving them to /src/client and relocating my Express backend to /src/server. However, upon running the relocated React app, I encou ...

What is the process for incorporating personalized variables into the Material Ui Theme?

In the process of developing a react app with TypeScript and Material UI, I encountered an issue while attempting to define custom types for my themes. The error message I received is as follows: TS2322: Type '{ mode: "dark"; background: { default: s ...

The module "node_modules/puppeteer/lib/types" does not contain the export "Cookie"

Currently facing an issue with puppeteer types. I am attempting to import the Cookie type, but it seems to be not functioning on versions above 6.0.0. import { Cookie } from 'puppeteer'; Here is the error message: /node_modules/puppeteer/lib/typ ...

Typescript - Specifying the return type for a deeply nested object

I have a container that holds multiple sub-containers, each containing key-value pairs where the value is a URL. I also have a function that takes the name of one of the sub-containers as input, loops through its entries, fetches data from the URLs, and re ...

Guide to transforming API Response into Custom type in Angular 5

Describing my method to structure the API Response - interface MyTest { property2: string } Incorporating Angular 5 Service Code - getAPI(searchKey: string) { this.productsAPIUrl = https://localhost:44331/api/SampleData/WeatherFore ...

Utilizing a library that solely enhances the functionality of the Array object

I have a library with type definitions structured like this: declare global { interface Array<T> { addRange<T>(elements: T[]): void; aggregate<U>(accumulator: (accum: U, value?: T, index?: number, list?: T[]) => an ...

Issues with ngClass in AngularAngular's ngClass feature is failing

In my ngClass condition, it looks like this: <div [ngClass]="{'alert alert-danger': alert.type == 0,'alert alert-success': alert.type == 1}" When alert.type == 1, the class is set to alert alert-success. But when alert.type = 0, th ...

Tips for correctly implementing an authorize function in TypeScript with NextAuth.js

Trying to implement the Credentials Provider in NextJs ("next": "^12.0.7") and NextAuth ("next-auth": "^4.1.2") using TypeScript has been a challenge. I am encountering difficulties in getting the function to work co ...

What is the best way to merge three arrays of data into a single iterable array?

I am working on a function that fetches data from an API. In this process, I execute a total of 3 queries, each returning an array of data. My goal is to combine these 3 arrays into a single iterable array, where the indexes correspond to the original a ...

What is the best way to implement Infinite scroll alongside Virtual scroll in Ionic 3?

Having recently delved into the world of Ionic and Angular, I am encountering some difficulties with implementing Infinite scroll alongside Virtual scroll. Despite pushing data such as images, text, and click functions from TypeScript, only empty Ionic car ...