Clarity: Modal Dialog box not displayed

Created on 23 Nov 2017 · 5Comments · Source: vmware/clarity

Select one ... (check one with "x")

[x] bug
[ ] feature request
[ ] enhancement

Expected behavior

Modal dialog box should open when button is clicked

Actual behavior

Modal does not open and the following error is shown in the web console:

ERROR Error: Found the synthetic listener @fadeDown.done. Please include either "BrowserAnimationsModule" or "NoopAnimationsModule" in your application.

Reproduction of behavior

Environment details

Angular version: 5.0.3
Clarity version: 0.10.15
OS and version: Windows 10
Browser: [Chrome XX | Firefox XX]

Source

KANekT

Most helpful comment

First ensure that you have the @angular/animations package by doing this...
npm install --save @angular/animations

and then update your app.module.ts file to reflect the following changes

import {BrowserAnimationsModule} from '@angular/platform-browser/animations';

@NgModule({
  ...
  imports: [BrowserAnimationsModule],
  ...
})
export class YourSuperAwesomeAppModule { }

Voila!

cyberbeast on 9 Dec 2017

👍4

All 5 comments

Clarity not support Angular 5 ?

KANekT on 23 Nov 2017

I updated to 4/4/6

KANekT on 24 Nov 2017

First ensure that you have the @angular/animations package by doing this...
npm install --save @angular/animations

and then update your app.module.ts file to reflect the following changes

import {BrowserAnimationsModule} from '@angular/platform-browser/animations';

@NgModule({
  ...
  imports: [BrowserAnimationsModule],
  ...
})
export class YourSuperAwesomeAppModule { }

Voila!

cyberbeast on 9 Dec 2017

👍4

I'm using Clarity Design System's Modal and I only had this problem when adding storybook to my angular application, but the solution is similar.. just add the _BrowserAnimationsModule_ to the _moduleMetadata_ imports and it should work.

export const withDefault = () => ({
    component: ModalComponent,
    props: { ... },
    moduleMetadata: {
        imports: [ ..., BrowserAnimationsModule ],
    },
});

appsilva on 2 Jun 2020

Hi there 👋, this is an automated message. To help Clarity keep track of discussions, we automatically lock closed issues after 14 days. Please look for another open issue or open a new issue with updated details and reference this one as necessary.