title: How to send data between electron ipcMain and angular ipcRenderer asynchronously with observables
body: <p>I have an ipcMain and ipcRenderer processes(electron's and angular's side). How can I rewrite my code in order to receive data from main process asynchronously? Connecting to the database is done using typeorm</p>
  
  <p><strong>The renderer's side (data.service.ts):</strong></p>
  
  <pre><code>constructor(private _electronService: ElectronService) {}
  
  getItems(): Observable&lt;Item[]&gt; {
      return of(this._electronService.ipcRenderer.sendSync('get-items')).pipe(
        catchError((error: any) =&gt; Observable.throw(error.json))
      );
  }
  </code></pre>
  
  <p><strong>app.component.ts</strong></p>
  
  <pre><code>@Component({
    selector: 'App',
    template: `&lt;div style="text-align:center"&gt;
      &lt;h1&gt;
          Welcome to {{ title }}!
      &lt;/h1&gt;
      &lt;h2&gt;Here is the contents of the database: &lt;/h2&gt;
      &lt;div&gt;
          &lt;ul style="list-style: none"&gt;
              &lt;li *ngFor="let item of itemList"&gt;
                  {{ item.name }}
              &lt;/li&gt;
          &lt;/ul&gt;
      &lt;/div&gt;
  &lt;/div&gt;`
  })
  
  export class AppComponent implements OnInit {
    itemList: Item[];
  
    constructor(private appservice: AppService) {}
  
    ngOnInit(): void {
      console.log('component initialized');
      this.appservice.getItems().subscribe((items) =&gt; (this.itemList = items));
    }
  </code></pre>
  
  <p><strong>The main side (index.ts):</strong></p>
  
  <pre><code>import { app, BrowserWindow, ipcMain } from 'electron';
  
  import { createConnection } from 'typeorm';
  
  import { Item} from './assets/model/item.schema';
  
  const createWindow = async () =&gt; {
    const connection = await createConnection({
      type: 'mssql',
      host: 'server\\instance',
      username: 'sa',
      password: 'password',
      port: 1433,
      database: 'test',
      synchronize: true,
      logging: true,
      entities: [ Item ],
    });
  
    const itemRepo = connection.getRepository(Item);
  
    ipcMain.on('get-items', async (event: any, ...args: any[]) =&gt; {
      try {
        event.returnValue = await itemRepo.find();
      } catch (err) {
        throw err;
      }
    });
  </code></pre>