ATPIT free asked 1 month ago


I am using the WYSIWYG Editor plugin.

The Editor appears as expected and the buttons work by adding the desired effect.

My issue is with the dropdowns as the do not appear when clicked.

I have the following in my styles.scss: @import '@fortawesome/fontawesome-free/css/all.css'; @import 'mdb-angular-wysiwyg/scss/wysiwyg.scss';

I have the following in my app.module.ts:

import { LOCALE_ID, NgModule } from '@angular/core';
import { BrowserModule } from '@angular/platform-browser';
import { HttpClientModule, } from '@angular/common/http';

import { CoreModule } from './core/core.module';
import { SharedModule } from './shared/shared.module';

import { AppComponent } from './app.component';
import { AppRoutingModule } from './app-routing.module';

import { MsalRedirectComponent } from '@azure/msal-angular';
import { MsalConfigDynamicModule } from './msal-config-dynamic.module';
import { BrowserAnimationsModule } from '@angular/platform-browser/animations';
import localeDa from '@angular/common/locales/da';
import { registerLocaleData } from '@angular/common';

import { MdbDragAndDropModule } from 'mdb-angular-drag-and-drop';
import { MdbWysiwygModule } from 'mdb-angular-wysiwyg';
import { FormsModule } from '@angular/forms';
import { MdbDropdownModule } from 'mdb-angular-ui-kit/dropdown';
import { MdbTooltipModule } from 'mdb-angular-ui-kit/tooltip';
registerLocaleData(localeDa);

  imports: [
    BrowserModule.withServerTransition({ appId: 'ng-cli-universal' }),
    HttpClientModule,
    MsalConfigDynamicModule.forRoot('assets/configuration.json'),
    CoreModule,
    SharedModule,
    AppRoutingModule,
    BrowserAnimationsModule,
    MdbDragAndDropModule,
    MdbWysiwygModule,
    FormsModule,
    MdbDropdownModule,
    MdbTooltipModule
  ],

I have the following in my component.ts:

@ViewChild('wysiwyg') wysiwyg!: MdbWysiwygComponent;

And this in my component.html

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

Rafał Seifert staff answered 4 weeks ago


I have created a new angular 16 app and installed MDB 5.1.0 with wyswig plugin. Here's how my code looks. Wysiwyg works, tooltips and dropdowns too. Please try to copy my code and try this basic setup.

Template:

<mdb-wysiwyg></mdb-wysiwyg>

app.module.ts

import { NgModule } from '@angular/core';
import { BrowserModule } from '@angular/platform-browser';
import { MdbWysiwygModule } from 'mdb-angular-wysiwyg';
import { AppComponent } from './app.component';
import {BrowserAnimationsModule} from '@angular/platform-browser/animations'
@NgModule({
  declarations: [
    AppComponent
  ],
  imports: [
    BrowserModule,
    MdbWysiwygModule,
    BrowserAnimationsModule
  ],
  providers: [],
  bootstrap: [AppComponent]
})
export class AppModule { }

styles.scss

@import '@fortawesome/fontawesome-free/css/all.css';
@import "mdb-angular-ui-kit/assets/scss/mdb.scss";
@import 'mdb-angular-wysiwyg/scss/wysiwyg.scss';

I am not sure how else could I help you. Have you tried to follow our offical plugins installation docs?


Rafał Seifert staff answered 1 month ago


Please try adding:

import { MdbDropdownModule } from 'mdb-angular-ui-kit/dropdown';
import { MdbTooltipModule } from 'mdb-angular-ui-kit/tooltip';

to your imports. Please let me know if that helped you.


ATPIT free commented 1 month ago

I am guessing that they are to be added to my app.module.ts? I tried this but there are still no dropdowns.


Rafał Seifert staff commented 1 month ago

Yes, they should be added also into imports array in app.module Could you please edit your post and provide an exact or simpler example how you try to implement the dropdowns? Meaby you have some syntax error.


ATPIT free commented 1 month ago

I have added code snippets from my component.ts and component.html with how I try to implement the Wysiwyg editor.


Rafał Seifert staff commented 1 month ago

Have you added @import "mdb-angular-ui-kit/assets/scss/mdb.scss"; to your styles.scss ?


ATPIT free commented 4 weeks ago

I tried it, and it seemed to mess with a lot of my styling. However, it did not make the dropdowns appear.


Rafał Seifert staff commented 4 weeks ago

Did you import { BrowserAnimationsModule } from '@angular/platform-browser/animations'; to your app? Do you get any console errors?


ATPIT free commented 4 weeks ago

I have the BrowserAnimationsModule and there are no console errors.

To be completely clear, I have added all the imports in my post. Just to avoid any confusion.



Please insert min. 20 characters.

FREE CONSULTATION

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

Status

Answered

Specification of the issue

  • ForumUser: Free
  • Premium support: No
  • Technology: MDB Angular
  • MDB Version: MDB5 5.1.0
  • Device: PC
  • Browser: Edge
  • OS: Windows
  • Provided sample code: No
  • Provided link: No