Cannot instantiate the editor in Angular

I am trying to build a code editor

I have component which renders conditionally

 <ace-editor [(text)]="text" #editor style="height:150px;"></ace-editor>

And I have a ngAfterViewInit Lifecycle hook in which I am setting all the editor options.

ngAfterViewInit() {
console.log('After view init called...');
this.editor.setTheme('monokai');
this.editor.setMode('text');
this.editor.getEditor().setShowPrintMargin(false);
this.editor.getEditor().setFontSize(16);
// this.editor.setReadOnly(true);
this.editor.getEditor().setOptions({
  // enableBasicAutocompletion: true,
});

this.editor.getEditor().commands.addCommand({
  name: 'showOtherCompletions',
  bindKey: 'Ctrl-.',
  exec: function (editor) {},
});

}

I am accessing the editor using the template reference variable using the @ViewChild inside of my .ts file. But in the browser I am getting Cannot read property setTheme of undefined.