mdbRippleRadius attribute of button not working

Topic: mdbRippleRadius attribute of button not working

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

Add comment

dante jackson free answered 6 years ago

0 0 Best answer

Please insert min. 20 characters.

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.

<h4 class="card-title"> {{group.Group}} </h4>

<button type="button" (click)="submitToTimeline(group.groupId, item)"class="btn btn-primary waves-light"mdbRippleRadius>{{item.actionDesc}}</button>

</div>

Dawid Adach pro commented 6 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.

Add comment

Dawid Adach pro answered 6 years ago

0 0 Best answer

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

];

Add comment

Write

Create snippet

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

dante jackson

10Support score
1Questions 1Answers 0Snippets