Style of dropdown list missing after adding the module

[xhour]

Bug description:

Hello folks,

I have an issue with the module when I add it to my angular project. I tested it by creating a simple angular app and adding the module to the app module and component.

When I serve it, I discover that the drop-down list of the mentions has no style (?!) :

Here is my app module :

import { NgModule } from '@angular/core';
import { BrowserModule } from '@angular/platform-browser';

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

import {NgMentionsModule} from '@nth-cloud/ng-mentions';

import { FormsModule } from '@angular/forms';

@NgModule({
  declarations: [
    AppComponent,
    MentionComponent
  ],
  imports: [
    BrowserModule,
    AppRoutingModule,
    NgMentionsModule,
    FormsModule
  ],
  providers: [],
  bootstrap: [AppComponent]
})
export class AppModule { }

here is my component app component :

import { Component, ViewEncapsulation } from '@angular/core';

@Component({
  selector: 'app-root',
  templateUrl: './app.component.html',
  styleUrls: ['./app.component.css']
})
export class AppComponent {
  title = 'test-ng-mentions';

  disabled: boolean = false;
  required: boolean = false;
  rows: number = 5;
  cols: number = 15;
  dropUp: boolean = false;

  model: any = {
      value: 'Hello @[Dave](contact:1). How are you doing today?\n\nWould you like to play a game of chess?',
      mentions: [
          {
              display: 'Dave',
              id: 1,
              type: 'contact'
          },
          {
              display: 'Bob Ross',
              id: 2,
              type: 'contact'
          },
          {
              display: 'Carl',
              id: 3,
              type: 'contact'
          },
          {
              display: 'Sue',
              id: 4,
              type: 'contact'
          },
      ]
  };
}

Version of Angular and ng-mentions:

Angular:12.1.4

ng-mentions:5.0.0

[trickeyone]

@xhour The component doesn't really have any styling, itself. If you're wanting it to have styling like in the demo, then you'll need to include Bootstrap. It uses the Bootstrap dropdown menu styling by default for the mentions list. Otherwise you'll need to define the CSS stylings.