Plugin WYSWIG for Angular - How to binding ngModel

Topic: Plugin WYSWIG for Angular - How to binding ngModel

vizmedia pro asked 1 months ago

How to bind the mdb-wyswig control with the variable by ngModel

<mdb-wysiwyg [(ngModel)]="context"></mdb-wysiwyg>

did not work

how to set and read the contents of the component ?

vizmedia pro answered 4 weeks ago

thx, but that's not good The component can not be used in common operations on a form

You just need to implement ControlValueAccessor

Do you think about such a change?

vizmedia pro answered 2 weeks ago

points 2 and 3 have not been repaired!

Please, do something with this, because it's very important bugs.

As of today, I can not use this plugin in my business.

Arkadiusz Idzikowski staff commented a week ago

We added ControlValueAccessor in version 7.5.0. Please upgrade.

We will take a closer look at those bugs.

Damian Gemza staff answered 1 months ago

Dear vizmedia,

There's no such possibility to use ngModel on mdb-wysiwyg component.

We have to add some output which allows getting the mdb-wysiwyg value.

As a workaround, please use the below code to get the actual editor value:


<mdb-wysiwyg #wysiwyg [value]="value"></mdb-wysiwyg>


import {Component, HostListener, ViewChild} from '@angular/core';
import {MdbWysiwygComponent} from "mdb-wysiwyg";

  selector: 'app-root',
  templateUrl: './app.component.html',
  styleUrls: ['./app.component.scss']
export class AppComponent {
  @ViewChild(MdbWysiwygComponent) wysiwyg: MdbWysiwygComponent;
  value: string = '<h1>New Value</h1>';

  @HostListener('click') onClick() {


Best Regards,


Damian Gemza staff answered 4 weeks ago

Yes, we'll implement such a feature, but not now.

In the 7.4.4 release we'll add two features: 1) event which emits wysiwyg's value, 2) observable to which you'll be able to subscribe to get the latest wysiwyg's value.

Best Regards,


vizmedia pro answered 4 weeks ago

7.4.3 Unfortunately, the plugin is difficult to use in the project

<mdb-wysiwyg #wysiwyg [value]="value"></mdb-wysiwyg>

1. if value is null nothing is displayed, mdb-wyswig disappears

2. If value is empty string, mdb-wysiwyg displays the unchangeable welcome text

enter image description here

How should I show it to the customer ???!!!

vizmedia pro answered 4 weeks ago

3. Software change in value also has no effect. You need to re-render the component to see the new value.

vizmedia pro answered 3 weeks ago

4. when I do as you wrote

@HostListener('click') onClick() {
    this.value = this.wysiwyg.textarea.nativeElement.innerHTML;

for example value is

value: "to be <strike>or not</strike> to be"

when I click in "show HTML code"

the value changes to

value: "to be &lt;strike&gt;or not&lt;/strike&gt; to be"

I broke down :(((

Damian Gemza staff answered 3 weeks ago

Dear vizmedia,

Please try to update the mdb-wysiwyg to the latest 7.4.4 version (just download the new .zip and copy from it the .tgz archive and install it), and check if those problems still exist.

With 7.4.4 we have added an output called (valueChanged) with which you can subscribe to the changing value of WYSIWYG.

Best Regards,


vizmedia pro answered a week ago

The new version did not eliminate any of the above problems.

Are you going to improve them? will it stay like that?

Arkadiusz Idzikowski staff commented a week ago

We will fix those problems, unfortunately I can't provide an ETA for that yet.

Please insert min. 20 characters.


Specification of the issue
  • User: Pro
  • Premium support: No
  • Technology: Angular
  • MDB Version: 7.4.3
  • Device: PC
  • Browser: Chrome
  • OS: Win 10 Pro
  • Provided sample code: No
  • Provided link: No