Topic: MDB Bootstrap Angular CRUD with start-here sample app
Dileepgn free asked 5 years ago
Hi,
I was looking at the start-here application given in the tutorial. I like to add the edit and remove functionality to the app by adding two buttons to the row. Please provide me some sample code to accomplish this in the start-here application.
Thanks, DN
Bartosz Termena staff answered 5 years ago
Dear @Dileepgn
You can find Angular CRUD code here: https://github.com/mdbootstrap/Angular-Bootstrap-Boilerplate
if you only want HTML
like in the projects
section, here you go:
<div class="container">
<div class="row">
<div class="col-md-6">
<mdb-card>
<!--Card image-->
<mdb-card-img
src="https://mdbootstrap.com/img/Photos/Lightbox/Thumbnail/img%20(97).jpg"
alt="Card image cap"
class="waves-light"
mdbWavesEffect
></mdb-card-img>
<mdb-card-body>
<!--Title-->
<mdb-card-title>
<h4>Title</h4>
</mdb-card-title>
<!--Text-->
<mdb-card-text> Description </mdb-card-text>
<div class="text-left">
<a mdbBtn color="primary" mdbWavesEffect (click)="basicModal.show()">Edit</a>
<a mdbBtn class="red lighten-1 white-text" mdbWavesEffect (click)="onDelete()"
>Delete</a
>
</div>
</mdb-card-body>
</mdb-card>
</div>
</div>
</div>
<div
mdbModal
#basicModal="mdbModal"
class="modal fade"
tabindex="-1"
role="dialog"
aria-labelledby="myBasicModalLabel"
aria-hidden="true"
>
<div class="modal-dialog" role="document">
<div class="modal-content">
<div class="modal-header">
<button
type="button"
class="close pull-right"
aria-label="Close"
(click)="basicModal.hide()"
>
<span aria-hidden="true">×</span>
</button>
<h4 class="modal-title w-100" id="myModalLabel">Modal title</h4>
</div>
<div class="modal-body">
...
</div>
<div class="modal-footer">
<button
type="button"
mdbBtn
color="secondary"
class="waves-light"
aria-label="Close"
(click)="basicModal.hide()"
mdbWavesEffect
>
Close
</button>
<button type="button" mdbBtn color="primary" class="relative waves-light" mdbWavesEffect>
Save changes
</button>
</div>
</div>
</div>
</div>
Hope it helps!
Best Regards, Bartosz.
Dileepgn free answered 5 years ago
Hi ,
Thank you for sending the link. I was able to find this page in the Table section, but I couldn't find the code for this page. Could you please send me the code for this page.
I am looking for some thing exactly similar.
Thanks, DN,
Dileepgn free answered 5 years ago
I am looking for how to put an EDIT Button on the left side of Delete button on each row. and bring up same modal to edit existing event.
Bartosz Termena staff commented 5 years ago
Hi!
Where exactly would you like to add these buttons in the app?
Check this out: https://ng-boilerplate.mdbootstrap.com/projects
project list
section has exactly the buttons you described - edit
on the left side of delete
Best, Bartosz.
FREE CONSULTATION
Hire our experts to build a dedicated project. We'll analyze your business requirements, for free.
Answered
- ForumUser: Free
- Premium support: No
- Technology: MDB Angular
- MDB Version: 8.3.0
- Device: PC
- Browser: Chrome
- OS: Windows
- Provided sample code: No
- Provided link: No
Arkadiusz Idzikowski staff commented 5 years ago
Where exactly would you like to add these buttons?