Logo Questions Linux Laravel Mysql Ubuntu Git Menu
 

ngOnInit not firing when opening dialog

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!

like image 545
TheBird956 Avatar asked Jun 06 '19 03:06

TheBird956


People also ask

How do I call ngOnInit service?

Call it in ngOnInit() link It certainly shouldn't call a function that makes HTTP requests to a remote server as a real data service would. Instead, call getHeroes() inside the ngOnInit lifecycle hook and let Angular call ngOnInit() at an appropriate time after constructing a HeroesComponent instance.

Can we implement OnInit in Angular service?

To use ngOnInit in Angular, it is required to import into the component class in this way – import {Component, OnInit} from '@angular/core'.

What is ngOnInit()? How to define it?

Constructor initialize class members. ngOnInit() is a place to put the code that we need to execute at very first as soon as the class is instantiated.


1 Answers

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);
    });
  }

enter image description here

like image 127
yurzui Avatar answered Oct 13 '22 11:10

yurzui