Holiday Notice: Support will be provided on a limited scale from December 24th, 2024, to January 2nd, 2025. Happy holidays and a wonderful New Year!

  1. MDB Home Page
  2. Support Main Page
  3. MDB Angular
Topic: Wysiwyg Editor - Bundle

Jan Louw pro asked 4 years ago

Hi,

I'm trying to you the latest Wysiwyg (9.3.1) and getting the following compilation error:

ERROR in src/app/comp/team-act/team-act.component.ts:890:31 - error TS2339: Property 'subscribe' does not exist on type '() => Observable<any>'.

My extract:

import { MdbTableDirective, MdbTablePaginationComponent, IMyOptions, ModalDirective, Option, MdbCheckboxChange } from 'ng-uikit-pro-standard'; import {MdbWysiwygComponent} from 'mdb-wysiwyg';

export class TeamActComponent implements OnInit, AfterViewInit, OnDestroy { @ViewChild(MdbWysiwygComponent, { static: true }) wysiwyg: MdbWysiwygComponent;

onComments(usr: string): void { console.log('Launch Modal for Comments: %s', usr); this.wysiwyg.valueChange$.subscribe((data: any) => { console.log(data); }); this.mdmemcom.show(); }

In addition, how do you "Reset" the content of the Wysiwyg?

Regards

Arkadiusz Idzikowski staff answered 4 years ago

There is a problem with syntax, valueChange$ should be a function call:

this.wysiwyg.valueChange$().subscribe((value) => console.log(value));

To reset the component content you can for example you ngModel directive:

<mdb-wysiwyg #wysiwyg [options]="options" [(ngModel)]="content"></mdb-wysiwyg>

Then create content variable in your ts file and set the variable to empty string to reset the content.

Jan Louw pro commented 4 years ago

Hi, just another question.

How will you remove the "insert Link and Image" header options from the component?

Regards

Arkadiusz Idzikowski staff commented 4 years ago

Unfortunately it's not possible to remove those elements, but you can set its display to none with css, for example:

.btn-clear .fa-paperclip { display: none; }

and accordingly for 'fa-image' icon

Jan Louw pro commented 4 years ago

Hi Arkadiusz,

I've tried your solution, but I can not get it to work.

Here is the code:

Template: <div class="modal-body"> <div class="container-fluid"> <div class="row"> <div class="col-12"> <mdb-wysiwyg class="btn-clear fa-paperclip" [(ngModel)]="comments"></mdb-wysiwyg> </div> </div> </div> </div> SCSS: .btn-clear .fa-paperclip { display: none; } .btn-clear .fa-image { display: none; }

Regards

Konrad Stępień staff commented 4 years ago

Hi @Jan Louw,

Did you try to provide these styles for your styles.scss file or component.scss?

Jan Louw pro commented 4 years ago

Hi Konrad,

I've provided the styles in the component.scss file. Must it be in styles.scss ?

Regards

Jan Louw pro commented 4 years ago

Hi, I've added the scss to the styles.scss, and it worked. Regards

Arkadiusz Idzikowski staff answered 4 years ago

There is a problem with syntax, valueChange$ should be a function call:

this.wysiwyg.valueChange$().subscribe((value) => console.log(value));

To reset the component content you can for example use ngModel directive:

<mdb-wysiwyg #wysiwyg [options]="options" [(ngModel)]="content"></mdb-wysiwyg>

Then create content variable in your ts file and set the variable to empty string to reset the content.

Jan Louw pro commented 4 years ago

Hi,

Please then update your documentation around the valueChange$ to reflect being a function call.

Thank you for the "reset" solution.

Regards

Write
Create snippet
Please insert min. 20 characters.

FREE CONSULTATION

Hire our experts to build a dedicated project. We'll analyze your business requirements, for free.
Status

Resolved

Specification of the issue
  • ForumUser: Pro
  • Premium support: No
  • Technology: MDB Angular
  • MDB Version: 9.3.1
  • Device: Na
  • Browser: Na
  • OS: Ubuntu 16:04
  • Provided sample code: No
  • Provided link: No
Tags
angular-wysiwyg
About author
Jan Louw
Pro User 118Support score
24Questions 3Answers 0Snippets