SimpleMDE with Angular 6 get reference of editor in component

Question

What I have done so far?

I have successfully implemented SimpleMDE in my angular 6 app and it is working fine. However I am struggling to get the reference of editor in my component.

What I want

I want to access the simplemde editor inside a function of my component so that I can call its method to show markdown I am getting from service response.

What is the problem?

I am newbie to angular and do not know how to get reference in my component of something initialized in module. Here is my code to explain it better:

Following this link:

https://www.npmjs.com/package/ng2-simplemde

My Module

import { NgModule } from '@angular/core'
    import { SimplemdeModule, SIMPLEMDE_CONFIG } from 'ng2-simplemde'
    @NgModule({
      imports: [
        SimplemdeModule.forRoot({
          provide: SIMPLEMDE_CONFIG,
          // config options 1
          useValue: {}
        })
      ],
      bootstrap: [AppComponent]
    })
    export class AppModule { }

My Component .ts

export class QuestionComponent implements OnInit, OnDestroy {
option2 = {placeholder: '# Welcome!! show your talent here.',
    promptURLs: true,
    renderingConfig: {codeSyntaxHighlighting: true},
    showIcons: ['code', 'table'],
    toolbar: [
        'bold',
        'italic',
        'heading',
        'code',
        'quote',
        'unordered-list',
        'ordered-list',
        {
            name: 'custom',
            action: function showit(editor) {
                this.demo.customFunction(editor, this.demo);
            } ,
            className: 'fa fa-picture-o',
            title: 'Custom Button',
            demo : this.vm
        },
        'table',
        'link',
        'horizontal-rule',
        'preview',
        'side-by-side',
        'fullscreen',
        'guide',
    '|', // Separator
]};

constructor() {}

//some other methods

}

My Component .html

<div class="row">
    <div class="col-md-6"><simplemde *ngIf="questions" [(ngModel)]="something" [options]="option2"></simplemde></div>

</div>

So far so good. But I need to process previously saved markdown in my component like this :

converttohtml(){
// call some serrvice and get reponse 
this.oldhtml = this.simplemde.options.previewRender(response.markdown);
} 

I do not know how to get this.simplemde in this method. Any help?

Note: I do not want to create a custom toolbar button of simplemde. I need to do it in response of a rest call.

Thanks

Answer 1

You can get a reference to the component a couple of ways.

One way is to use @ViewChild, and the component type. Another way is to use @ViewChild, and a template variable.

If you want to use a template variable, add one to the template, like below (added #simplemde inside the simplemde tag).

<simplemde #simplemde [options]="option2"></simplemde>

This is the TS code for the hosting component:

import { Component, ViewChild } from '@angular/core';
import { Simplemde } from 'ng2-simplemde';

@Component({
    selector: 'app-root',
    templateUrl: './app.component.html',
    styleUrls: ['./app.component.css']
})
export class AppComponent {
    // Try this
    @ViewChild(Simplemde) simplemde: Simplemde; // @ViewChild and component type
        // OR this
    @ViewChild('simplemde') simplemde: Simplemde; // @ViewChild and template variable

    option2 = {};

    // then you can refer the component like you want
    convertToHtml(){
        // call some service and get reponse 
        this.oldhtml = this.simplemde.options.previewRender(response.markdown);
    } 
}

More info on ViewChild