mdbootstrap с угловой - анимация не работает

Я следовал этому руководству здесь: https://github.com/mdbootstrap/Angular-Bootstrap-with-Material-Design. И все выглядит так, как я ожидал, но анимация не работает. На этой демонстрационной странице: https://mdbootstrap.com/components/buttons/ При нажатии кнопки имеют волновой эффект, но когда я копирую / вставляю демонстрационный код в свой (test) app.component.html, то волны нет эффект.

Кажется, что некоторые обработчики событий не зарегистрированы, но я не уверен, как это сделать...

редактировать

После еще одного возни, я действительно узнал, как заставить рябь работать!:) Вот мой app.module.ts (импорт RippleModule важен):

import { NgModule, NO_ERRORS_SCHEMA } from '@angular/core';
import { BrowserModule } from '@angular/platform-browser';
import { MDBBootstrapModule } from 'angular-bootstrap-md';
import { RippleModule } from 'angular-bootstrap-md/ripple';

import { AppComponent } from './app.component';

@NgModule({
  declarations: [AppComponent],
  imports: [
    BrowserModule,
    MDBBootstrapModule.forRoot(),
    RippleModule.forRoot()
  ],
  providers: [],
  bootstrap: [AppComponent],
  schemas: [NO_ERRORS_SCHEMA]
})
export class AppModule {}

Пример использования ряби на кнопке:

<!-- mdbRippleRadius attribute (directive) and the waves-light class is imporant -->
<button type="button" class="btn btn-primary waves-light" mdbRippleRadius >Primary</button>

1 ответ

Вам нужно добавить директиву mdbRippleRadius в ваш HTML, если вы используете Angular.io.

<button type="button" class="btn btn-primary" mdbRippleRadius>Primary</button>

См. Угловая бутстрап с дизайном материала:

https://mdbootstrap.com/angular/components/buttons/

Другие вопросы по тегам