ace.edit can't find div #javascript-editor inside Angular Material elements

[kpredde]

I'm trying to create a JavaScript editor inside an AngularMaterialModule and ace.edit('editor') fails to find the #javascript-editor inside the element

<mat-tab-group>
  <mat-tab label="Editor">
    <h4>Custom Editor</h4>
    <div id="javascript-editor" style="height: 300px;"></div>
  </mat-tab>
</mat-tab-group>

import { Component, OnInit } from '@angular/core';

import * as ace from 'brace';
import 'brace/mode/javascript';
import 'brace/theme/monokai';

@Component({
  selector: 'my-app',
  templateUrl: './app.component.html',
  styleUrls: [ './app.component.css' ]
})
export class AppComponent implements OnInit {
  ngOnInit() {
    const editor = ace.edit('javascript-editor');
    editor.getSession().setMode('ace/mode/javascript');
    editor.setTheme('ace/theme/monokai');
  }
}

The same code when placed outside the mat-tab in a div works fine.

I have a code sample at StackBlitz

I'm using angular6