Invoke the ngOnInit method in Angular 7 or any other method within the component itself

Question

Invoke the ngOnInit method in Angular 7 or any other method within the component itself

My current dilemma involves a component named user-table-list, which essentially represents a table with entries corresponding to various users.
Within this setup, there exists another component called table-list, responsible for defining the structure and behavior of tables for multiple components (including user-table-list). The HTML code for user-table-list looks like this:

<app-table-list #table [tableConfiguration]="usersTableConfiguration"></app-table-list>

On the other hand, the HTML code for table-list contains the layout details such as columns, headers, etc. The configurations specific to each individual table, including data loading and column names, are defined in the corresponding .ts file.

In the header section, there is a button for adding new entries to the table, whether they are users, clients, or any other entity. The event handling and database operations take place within table-list.component.ts, where different actions are executed based on the type of table the event originates from. Here's an example snippet:

createNewButtonClicked(tableType: string) {
    
    const dialogConfig = new MatDialogConfig();
    dialogConfig.width = '60%';
    dialogConfig.autoFocus = true;

    switch (tableType) {
        case 'clients': {
            this.dialog.open(ClientDialogComponent, dialogConfig);
            break;
        }
        case 'projects': {
            this.dialog.open(ProjectDialogComponent, dialogConfig);
            break;
        }  
        case 'users':{
            this.dialog.open(UserDialogComponent, dialogConfig);
            break;
        }
    }
}

When a new client/project/user is added through these dialogs, I aim to refresh the list by triggering a method that retrieves data from the database. However, the challenge lies in finding a way to trigger this refresh externally without resorting to page reloads. Attempts to achieve this directly in the dialog or table-list components have failed due to circular references. Even creating an external service for this task results in the same issue.

I'm currently at a loss for solutions; how can this desired functionality be implemented without modifying the existing application architecture?

javascript angular typescript angular7

Answer 1

Answer №1

When utilizing a material dialog, you can monitor an observable to determine when the dialog has been closed. By assigning it to a variable, you can track its status as follows:

createNewButtonClicked(tableType: string) {
    // your existing logic
    // ... 
    const dialog = this.dialog.open(ClientDialogComponent, dialogConfig);
    
    dialog.afterClosed().subscribe(closeResult => {
        // update data from database after dialog closure
    });
}

By using an Output property, you can communicate events within a child component to its parent. Within the subscription function (where the database update comment is placed), you can emit that the dialog has been closed. Your list code could resemble the following: @Output() dialogClosed = new EventEmitter();

createNewButtonClicked(tableType: string) {
    const dialogConfig = new MatDialogConfig();
    dialogConfig.width = '60%';
    dialogConfig.autoFocus = true;
    let dialog;
    
    switch (tableType) {
        case 'clients': {
            dialog = this.dialog.open(ClientDialogComponent, dialogConfig);
            break;
        }
        case 'projects': {
            dialog = this.dialog.open(ProjectDialogComponent, dialogConfig);
            break;
        }  
        case 'users':{
            dialog = this.dialog.open(UserDialogComponent, dialogConfig);
            break;
        }
    }
    
    if (!!dialog) {
        dialog.afterClosed().subscribe(closeResult => {
            this.dialogClosed.next();
        });
    }
}

In your user-table component, listen for the event being emitted:

<app-table-list (dialogClosed)="onDialogClosed($event)"></app-table-list>

Lastly, adjust your user tables ts file. Avoid calling ngOnInit again after dialog closure, as ngOnInit should only be used for initialization purposes. Extract the database logic from ngOnInit into another method and trigger it upon dialog closure:

ngOnInit() {
  this.getData();
}

onDialogClose() {
    this.getData();
}

private getData() {
  // perform database operations here and update data accordingly
}

Reserve ngOnInit solely for view initialization to prevent unintended resetting of values previously set.

Answer 2

When utilizing a material dialog, you can monitor an observable to determine when the dialog has been closed. By assigning it to a variable, you can track its status as follows:

createNewButtonClicked(tableType: string) {
    // your existing logic
    // ... 
    const dialog = this.dialog.open(ClientDialogComponent, dialogConfig);
    
    dialog.afterClosed().subscribe(closeResult => {
        // update data from database after dialog closure
    });
}

By using an Output property, you can communicate events within a child component to its parent. Within the subscription function (where the database update comment is placed), you can emit that the dialog has been closed. Your list code could resemble the following: @Output() dialogClosed = new EventEmitter();

createNewButtonClicked(tableType: string) {
    const dialogConfig = new MatDialogConfig();
    dialogConfig.width = '60%';
    dialogConfig.autoFocus = true;
    let dialog;
    
    switch (tableType) {
        case 'clients': {
            dialog = this.dialog.open(ClientDialogComponent, dialogConfig);
            break;
        }
        case 'projects': {
            dialog = this.dialog.open(ProjectDialogComponent, dialogConfig);
            break;
        }  
        case 'users':{
            dialog = this.dialog.open(UserDialogComponent, dialogConfig);
            break;
        }
    }
    
    if (!!dialog) {
        dialog.afterClosed().subscribe(closeResult => {
            this.dialogClosed.next();
        });
    }
}

In your user-table component, listen for the event being emitted:

<app-table-list (dialogClosed)="onDialogClosed($event)"></app-table-list>

Lastly, adjust your user tables ts file. Avoid calling ngOnInit again after dialog closure, as ngOnInit should only be used for initialization purposes. Extract the database logic from ngOnInit into another method and trigger it upon dialog closure:

ngOnInit() {
  this.getData();
}

onDialogClose() {
    this.getData();
}

private getData() {
  // perform database operations here and update data accordingly
}

Reserve ngOnInit solely for view initialization to prevent unintended resetting of values previously set.

Answer 3

Answer №2

To trigger an action when the submit button inside the Dialog is clicked, you need to capture the click event of the Dialog and notify the parent components from table-list.

Here's an example:

table-list.component.ts

@Output() clickedOkDialog = new EventEmitter<boolean>();

onClickOkDialog() {
  this.clickedOkDialog.emit(true);
}

Then you can handle the event in user-table-list

In your user-table-list.component.html

<app-table-list (clickedOkDialog)="onClickOkDialog($event)" #table [tableConfiguration]="usersTableConfiguration"></app-table-list>

In your user-table-list.component.ts

onClickOkDialog(event) {
   // Update database after the dialog is closed
}

Answer 4

To trigger an action when the submit button inside the Dialog is clicked, you need to capture the click event of the Dialog and notify the parent components from table-list.

Here's an example:

table-list.component.ts

@Output() clickedOkDialog = new EventEmitter<boolean>();

onClickOkDialog() {
  this.clickedOkDialog.emit(true);
}

Then you can handle the event in user-table-list

In your user-table-list.component.html

<app-table-list (clickedOkDialog)="onClickOkDialog($event)" #table [tableConfiguration]="usersTableConfiguration"></app-table-list>

In your user-table-list.component.ts

onClickOkDialog(event) {
   // Update database after the dialog is closed
}

Invoke the ngOnInit method in Angular 7 or any other method within the component itself

Answer №1

Answer №2

Similar questions

Generate an automatic "proxy" for ASP.NET MVC Controller to communicate with AngularJs service

Generating conference itinerary - establishing agenda function (Sequelize)

I constantly receive null values when executing my database query function

retrieve the classname by tapping into the parsed JSON

How can you recognize the attribute modification event in KnockoutJS?

The controller's AngularJS function seems to be unresponsive

What is the process for activating namespacing on a VueX module that has been imported?

Can you explain the concept of static in Typescript?

After the "div" tag comes the magic of AJAX, PHP, and JAVASCRIPT, replacing

Enhance your automation with the powerful combination of Java,

Unable to save text to file in both Javascript and PHP

The toggle-input component I implemented in React is not providing the desired level of accessibility

Safari Glitch in Bootstrap 4

Compiling Typescript tasks in Visual Studio Code - ensuring output encoding is set correctly

An error occurred: Cannot access the 'splice' property of an undefined value

Position the <a> to the right side of the div

What steps should I take to resolve the error: Uncaught SyntaxError: expected expression, received '<'?

The JavaScript function is unable to fetch information from the controller

The moduleResolution setting is missing in the tsconfig.json file generated by Next.js TypeScript

In Angular, components can be appended to the page instead of replacing the entire page when using router-out