Can't get a basic Edit Modal to work in Angular 8

Question

I am used to Asp.Net MVC Views and working with Modals. You can easily create a Shared Modal template and reuse that over and over by passing in PartialViews with ViewBags, TempData, hidden inputs etc... using JavaScript.

I am new to Angular and I'm using Bootstrap 4. I can easily create a Modal that will create something like an employee object, but I can't figure out a good way to edit that object, using a Modal. I can create an Edit Modal and use something like JavaScript to populate the data, but I can't pass all the form data on a button click nor can I pass all the data like Ids, using hidden fields.

The solution seems to be installing a package like ngBootstrap in order to leverage a Modal service that will allow me to pass in the employee object when opening an Edit Modal. If so, I will need to refactor my application to use ngBootstrap since it doesn't seem to play well with JavaScript, jQuery and the native Bootstrap implementation. I will also have to build modals and modal containers that I don't see how can be reused.

If I use a Modal service, will it magically bind all the elements of the employee object and pass all the data (including any edits and Ids) when I click the save button? Seems like this is the real benefit of Angular.

Do I need to install something like ngBootstrap to get this basic functionality?

Are there better ways to do this in Angular 8?

UPDATE 1

I would expect this.formModel = content to actually populate data in the Modal, but it does not. If I use this.formModel.Name = "Test Name", that works.

this.service.findContent(id).subscribe(
      res => {

        var content = res as Content;

        let content2 = Object.assign(new Content(), res)

        //Full object is visible in console
        console.log('content', content);
        //undefined in console
        console.log('content2', content2.Name);

        //Does not populate any data in the form
        this.formModel = content;

        //This will populate Test Name in the Name field on the form 
        this.formModel.Name = "Test Name";

        //Just shows the Modal using Javascript
        this.popModal(content);
      },
      err => {
        console.log(err);
      }
    )

Any help is much appreciated. Thanks!

Answer 1

There is no native modal / dialog provided by Angular

So alternatives are :

• Create a custom modal
• Use a library like ngBooststrap or Angular Material

Dialog provided by Angular Material is really simple but powerful. https://material.angular.io/components/dialog/overview

I have no experience with ngBooststrap but it should suit for simple use case.

Answer 2

Do I need to install something like ngBootstrap to get this basic functionality?

Yes. Instead of using the OG bootstrap framework, you should install wrapper libraries like @ng-bootstrap/ng-bootstrap or ngx-bootstrap. These wrapper libraries are created so you don't have to use jQuery with Angular. It is not in the "Angular Spirit" to use jQuery with Angular. What you can do with jQuery, you can most likely do it with Angular too. However, mixing jQuery and Angular together is more than likely to cause you lots of headaches as your app gets bigger, especially with change detection issues and possibly security issues. I would point you to this, this, this and maybe even this for more info.

If I use a Modal service, will it magically bind all the elements of the employee object and pass all the data (including any edits and Ids) when I click the save button? Seems like this is the real benefit of Angular.

The modal service in a bootstrap wrapper library is used to open/close a modal. E.g. ngx-bootstrap docs. You're likely to only need to feed the service the look and view of how you want your modal to look like. This means you can do something like this:

component with the modal template

<ng-template #template>
  <div class="modal-body text-center">
    <p>Do you want to confirm?</p>
    <button type="button" class="btn btn-default" (click)="confirm()" >Yes</button>
    <button type="button" class="btn btn-primary" (click)="decline()" >No</button>
  </div>
</ng-template>

confirm() method still resides in the same component that contains the above ng-template. In terms of model-binding with forms, that's a whole other ball-game with Angular forms. Do note that there are two types of forms in Angular. Reactive Forms and Template-driven forms. See this

Are there better ways to do this in Angular 8?

After reading your post twice, I think that what you are trying to do is really simple in Angular context. However, the way you have phrased your question tells me you are new to Angular. If I may give you an advice, I would suggest that you take one thing at time - figure out how angular forms work first before trying to put it in a modal and trying to pass data back and forth between components. And believe me when I say it is much more simple to use a wrapper library like ngx-bootstrap or ng-bootstrap than using the OG bootstrap framework with jQuery and Angular.