Topic: mdbRippleRadius attribute of button not working

dante jackson free 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!

dante jackson free 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.

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'}

];

 



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: -
  • Device: -
  • Browser: -
  • OS: -
  • Provided sample code: No
  • Provided link: No
Tags