mdbRippleRadius attribute of button not working

  1. MDB Home Page
  2. Support Main Page
  3. MDB Angular
Topic: mdbRippleRadius attribute of button not working

dante jackson asked 7 years ago

when i create buttons dynamically using the *ngFor directive, the buttons are not getting the ripple wave effect.here\'s my code: <mat-card *ngFor=\"let group of bowGroupsItems?.Groups\">      <div *ngFor=\"let buttons of getBigButtons(group.groupId)\">           <div *ngFor=\"let item of buttons\">                <button type=\"button\"class=\"btn btn-primary waves-light\"mdbRippleRadiusid=\"{{item.actionDesc}}\">                                            {{item.actionDesc}}</button>           </div>       </div> </mat-card> please help!

Dawid Adach pro answered 7 years ago

Dear Dante,

I've just created small loop , please use following syntax:

.html:

<button *ngFor="let button of buttons;" type="button" class="btn btn-primary waves-light" mdbRippleRadius>{{button.name}}</button>

.ts:

buttons:Array<any> = [

{name: 'Button 1'},

{name: 'Button 2'}

];

 

dante jackson answered 7 years ago

Thanks David for your quick response. Im still having issues.  From further testing it looks to be because i'm using a function (getBigButtons) in my ngFor to get the values.  See sample code below:  Again, it renders fine...just doesnt do the wave ripple effect when you click on the buttons.
<div class="card-body bg-color" *ngFor="let group of bowGroupsItems.Groups;">
<h4 class="card-title"> {{group.Group}} </h4>
<div class="row" *ngFor="let buttons of getBigButtons(group.groupId);">
<div class="col" *ngFor="let item of buttons;">
<button type="button" (click)="submitToTimeline(group.groupId, item)"class="btn btn-primary waves-light"mdbRippleRadius>{{item.actionDesc}}</button>
</div>
</div>
</div>
   

Dawid Adach pro commented 7 years ago

Dear Dante, unfortunately it's difficult to let what can cause that error without looking into code. Please check generated code with inspector (i.e. using Chrome) or start with my simple exmaple and try to enhance it step by step with loading data from API and see which step is breaking.
Write
Create snippet
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
  • User: Free
  • Premium support: No
  • Technology: MDB Angular
  • MDB Version: -
  • Device: -
  • Browser: -
  • OS: -
  • Provided sample code: No
  • Provided link: No
About author
dante jackson
10Support score
1Questions 1Answers
0Snippets likes 0Snippets