MDB Bootstrap Angular CRUD with start-here sample app


Topic: MDB Bootstrap Angular CRUD with start-here sample app

Dileepgn 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


Arkadiusz Idzikowski staff commented 5 years ago

Where exactly would you like to add these buttons?


Dileepgn 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.


Dileepgn 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,


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.


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