Issue #2389💬 AnsweredOpened November 8, 2019by Khan-Uzair0 reactions

Angular with Grapesjs

快速解答by Khan-Uzair

Any updates @artf?

Read full answer below ↓

Question

代码片段TEXT
Hi I want to integrate Grapesjs into my angular application.

Suppose I have a custom dropdown component (containing .ts, .html and .scss files) as shown shown below:

CustomDropdown.html----------------------------------
    <div class="cust-dropwodn-container">
          <span>Some header</span>
         <select *ngIf="shouldDropdownBePresent" class="select-class">
                  <option *ngFor="let optionVal of optionsArr">
                            {{ optionVal.value }}
                        </option>
                </select>
           <button (onClick)="callEventFunction()">Some event click</button>
    </div>

CustomDropdown.ts------------------------------ ---
    shouldDropdownBePresent: boolean = false;
    @Output() emitToOutsideWorld= new EventEmitter<any>();
    ngOnInt() {
         //logic to toggle shouldDropdownBePresent value
         //get array data for dropdown 
    }

  callEventFunction() {
        //emitting event to outside world
        emitToOutsideWorld.emit();
   }

CustomDropdown.scss------------------------------------
    .cust-dropwodn-container {
            background: aqua,
            .select-class {
                border: none,
            }
     }

Calling this component anywhere in the application, like calling it in SampleComponent would be this way,  (SampleComponent's html and typescript file shown below)
SampleComponent.html-------------------------------
     <CustomDropdown  [someData]="data" (emitToOutsideWorld)="eventHandlerFunction()" />

SampleComponent.ts----------------------------------
     eventHandlerFunction() {
        //do something when the event fired from CustomDropdown component
    }

I'd like to call CustomDropdown component in canvas of Grapes.js, but Grapesjs expects only html, so how to implement this?
And I would like to invoke methods written in typescript file from canvas or panels or blocks.
Above the events are handled as show below in angular:
    (emitToOutsideWorld)="eventHandlerFunction()"
Is there any way to emit events from grapesjs and have their handler functions outside?

Answers (2)

Khan-UzairNovember 11, 2019

Any updates @artf?

artfNovember 13, 2019

No @Khan-Uzair by default GrapesJS doesn't read any framework related components... please read more about GrapesJS components here

Related Questions and Answers

Continue research with similar issue discussions.

Paid Plugins That Match This Issue

Curated by issue keywords and label relevance to help you ship faster.

View all plugins

Loading paid plugin recommendations...

Free option

Check the open-source GrapesJS plugins on GitHub or run a quick search in our free catalog.

Browse free plugins →
Premium option

Premium plugins ship with support, regular updates, and production-ready features — save days of integration work.

Browse premium plugins →

Related tutorials

In-depth guides on the same topic.

All tutorials →

Browse Plugin Categories

Jump directly to plugin category pages on the marketplace.