ngOnInit not firing when opening dialog

Question

When opening the dialog, ngOnInit is not being called. The only way I can get it to fire is when I resize the window. I tried using detectChanges and zone.run() but it did not change anything.

Here is the code for the dialog component:

(settings-dialog.component.ts)

import { Component, OnInit } from '@angular/core';
import { ElectronService } from '../../providers/electron.service';

@Component({
  selector: 'app-settings-dialog',
  templateUrl: './settings-dialog.component.html',
  styleUrls: ['./settings-dialog.component.scss']
})
export class SettingsDialogComponent implements OnInit {
  public settings;

  constructor(
    private electronService: ElectronService,
  ) { }

  ngOnInit(): void {
    console.log('Getting settings');
    this.getSettings();
  }

  private getSettings() {
    this.settings = this.electronService.settings.getAll();
    console.log(this.settings);
  }
}

(settings-dialog.module.ts)
import { CommonModule } from '@angular/common';
import { NgModule } from '@angular/core';

import { SettingsDialogComponent } from './settings-dialog.component';

@NgModule({
  imports: [ CommonModule ],
  providers: [ ],
  declarations: [ SettingsDialogComponent ],
  entryComponents: [ SettingsDialogComponent ]
})
export class SettingsDialogModule { }

The component is being loaded from the menu bar setup with Electron:

(app.component.ts)

import { Component } from '@angular/core';
import { MatDialog } from '@angular/material';
import { TranslateService } from '@ngx-translate/core';

import { SettingsDialogComponent } from './dialogs/settings-dialog/settings-dialog.component';
import { ElectronService } from './providers/electron.service';

@Component({
  selector: 'app-root',
  templateUrl: './app.component.html',
  styleUrls: ['./app.component.scss']
})
export class AppComponent {
  constructor(public electronService: ElectronService, public translate: TranslateService, private dialog: MatDialog) {
    this.setupMenu();
  }

  private setupMenu() {
    const menu = this.electronService.remote.Menu.buildFromTemplate([{
      label: 'File',
      submenu: [{
        label: 'Settings',
        click: () => this.openSettingsDialog()
      }]
    }]);

    this.electronService.remote.Menu.setApplicationMenu(menu);
  }

  private openSettingsDialog() {
    this.dialog.open(SettingsDialogComponent);
  }
}

(app.module.ts)
import '../polyfills';
import 'reflect-metadata';

import { HttpClient, HttpClientModule } from '@angular/common/http';
import { NgModule } from '@angular/core';
import { FormsModule } from '@angular/forms';
import { MatDialogModule } from '@angular/material';
import { BrowserModule } from '@angular/platform-browser';
import { BrowserAnimationsModule } from '@angular/platform-browser/animations';
import { TranslateLoader, TranslateModule } from '@ngx-translate/core';
import { TranslateHttpLoader } from '@ngx-translate/http-loader';

import { AppRoutingModule } from './app-routing.module';
import { AppComponent } from './app.component';
import { WorkspaceModule } from './components/workspace/workspace.module';
import { SettingsDialogModule } from './dialogs/settings-dialog/settings-dialog.module';
import { WebviewDirective } from './directives/webview.directive';
import { ElectronService } from './providers/electron.service';

// AoT requires an exported function for factories
export function HttpLoaderFactory(http: HttpClient) {
  return new TranslateHttpLoader(http, './assets/i18n/', '.json');
}

@NgModule({
  declarations: [
    AppComponent,
    WebviewDirective
  ],
  imports: [
    BrowserModule,
    BrowserAnimationsModule,
    FormsModule,
    HttpClientModule,
    AppRoutingModule,
    TranslateModule.forRoot({
      loader: {
        provide: TranslateLoader,
        useFactory: (HttpLoaderFactory),
        deps: [HttpClient]
      }
    }),
    WorkspaceModule,
    MatDialogModule,
    SettingsDialogModule
  ],
  providers: [ElectronService],
  bootstrap: [AppComponent]
})
export class AppModule { }

What am I missing? What have I done wrong? (I don't might trying stuff again)

Thanks!

user_5485167 · Answer

I tried using detectChanges and zone.run() but it did not change anything

You were on the right way but maybe didn't use it properly. When you click on menu in electron app you leave ngZone. So the following code should work and ngOnInit should be trigger as I've checked:

app.component.ts

import { NgZone } from '@angular/core';
...
export class AppComponent {
  constructor(...private zone: NgZone) {}


  private openSettingsDialog() {
    this.zone.run(() => {
      this.dialog.open(SettingsDialogComponent);
    });
  }

ngOnInit not firing when opening dialog

1 Answers