feat(modal): Implement modal component

[ryzy]

Hi,

The README says Modal (in progress...). Is it true, is sb working on that? Can we share some progress here (in a separate branch presumably)? I'd consider contributing as I need it for my project...

Thanks for providing more info. Marcin

[RolfVeinoeSorensen]

+1 and ty for doing this awsome work

[BenevidesLecontes]

+1

[protubero]

+1

[gvandyk-r7]

+1

[bdsoha]

+1

[dougludlow]

For any interested, you might take a look at https://github.com/dougludlow/ng2-bs3-modal for a working bootstrap modal component.

[bdsoha]

@dougludlow that means another module and another dependency...

[dougludlow]

@bdsoha that's how we roll :bike:

[kalpeshrajvir-virtueinfo]

I tired ng2-bs3-modal which doesn't work for me. As mentioned in document ng2-bs3-modal depends on bootstrap which depends on jquery, you'll need to include both scripts before ng2-bs3-modal:

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/2.2.0/jquery.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/3.3.6/js/bootstrap.js"></script>

instead of it I used

    <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/2.2.0/jquery.js"></script>
    <script src="node_modules/ng2-bootstrap/bundles/ng2-bootstrap.min.js"></script>
    <script src="node_modules/ng2-bs3-modal/bundles/ng2-bs3-modal.js"></script>

and it doesn't work. Any clue?

[likerRr]

@kalpeshrajvir-virtueinfo ng2-bootstrap.min.js has nothing to do with bootstrap.js. They are totally different, that's why you can't make it run with such set of libraries. Use dependencies proposed by library author. And you better ask such question on ng2-bs3-modal's github page

[kalpeshrajvir-virtueinfo]

Do you mean ng2-bootstrap.min.js and bootstrap.js both is required? I though they will conflict that's why I tried with one.

On Fri, Apr 22, 2016 at 7:15 PM, Alexey Lizurchik notifications@github.com wrote:

@kalpeshrajvir-virtueinfo https://github.com/kalpeshrajvir-virtueinfo ng2-bootstrap.min.js has nothing to do with bootstrap.js. They are totally different, that's why you can't make it run with such set of libraries. Use the libraries proposed by library author. And you better ask such question on ng2-bs3-modal's github page https://github.com/dougludlow/ng2-bs3-modal/issues

— You are receiving this because you were mentioned. Reply to this email directly or view it on GitHub https://github.com/valor-software/ng2-bootstrap/issues/29#issuecomment-213434259

------------------------------------------------Thanks & Regards,Kalpesh RajvirTeam LeaderVirtueinfo Web Technologies (India) Pvt. Ltd.www.virtueinfo.com http://www.virtueinfo.com/mobile:+91 9375701917E-mail: kalpeshrajvir.virtueinfo@gmail.com kalpeshrajvir.virtueinfo@gmail.comSkype: kjrajvir.virtueinfoGtalk: kalpeshrajvir.virtueinfo

[likerRr]

@kalpeshrajvir-virtueinfo No they will not. Bootstrap (original) uses jquery for their components, but ng2-bootstrap utilizes self-built components on vanilla js (without heavy jquery). So basically ng2-bootstrap just visually is like bootstrap, but actually not. And also that's why new components appear slowly, because @valorkin should make them almost from scratch. Let's stop this discussion, because other guys get notified, but there are no changes for this issue

[ShurikAg]

+1

[alexandec]

+1

[markmaynard]

+1

[MarkHenderson]

+1

[sundriver]

+1

[dmcclureagl]

+1 Awaiting this feature, noticed it was "coming soon" in December, updates?

[valorkin]

I would say it will be soon enough :) https://twitter.com/shlomiassaf/status/730164935947370496

[mohammedzamakhan]

@shlomiassaf implemented modal in a different way, I would like it to be similar way as we have it in ui-bootstrap, because a lot of use cases are covered using that.

[hongbo-miao]

While we are waiting, if you want to use code to control when to open/close the modal now, my walkaround way right now is adding hidden buttons. No need 3rd-party library. And it can give you full control.

This way can keep the Bootstrap style of the modal and the fade in/out animation, which works perfect.

Say I have a modal:

<div id="myModal" class="modal fade">
  You modal content goes here
</div>

Open modal

Add a hidden button:

<button id="openModalButton" [hidden]="true" data-toggle="modal" data-target="#myModal">Open modal</button>

Then use this code to "click" the button to open the modal:

document.getElementById("openModalButton").click();

Close modal

Similar, add a hidden button:

<button id="closeModalButton" [hidden]="true" data-dismiss="modal">Close modal</button>

Then use this code to "click" the button to close the modal:

document.getElementById('closeModalButton').click();

[mohammedzamakhan]

@Hongbo-Miao That would require jquery and bootstrap javascript files to be included, if the project doesn't uses them, then we cant use it.

[valorkin]

just to keep you updated work in progress https://github.com/valor-software/ng2-bootstrap/tree/feat-modal

[ulfryk]

:+1:

[valorkin]

tracing last issues before release

[jhiemer]

@valorkin I looked into the code of that branch and I have two questions:

• Is it possible to reference the modal via template url?
• Is it possible to put a separat ts file behind a modal window?
• Is it possible to exchange information between the modal window and its parent?

[valorkin]

Released :)

@jhiemer

Is it possible to reference the modal via template url?

it will be added, but not as templateUrl in html, but as component to inherit and replace html

Is it possible to put a separate ts file behind a modal window?

please elaborate

Is it possible to exchange information between the modal window and its parent?

they share context, so yes

[jhiemer]

it will be added, but not as templateUrl in html, but as component to inherit and replace html

Ok, waiting for it. :-)

Is it possible to put a separate ts file behind a modal window?

please elaborate

I think the separate component/html one, would fit into this.

Is it possible to exchange information between the modal window and its parent?

they share context, so yes

I will try it.

Question after trying the modal: Let's say I have two buttons, one to save, and one to cancel. Both need to issue the onHide(), default value is always $event. What is the cleanest way to distinct those two states in my component?

[jhiemer]

@valorkin to be more precise, here is a sample from Angular 1.

$scope.open = function (size) {

    var modalInstance = $uibModal.open({
      animation: $scope.animationsEnabled,
      templateUrl: 'myModalContent.html',
      controller: 'ModalInstanceCtrl',
      size: size,
      resolve: {
        items: function () {
          return $scope.items;
        }
      }
    });

    modalInstance.result.then(function (selectedItem) {
      $scope.selected = selectedItem;
    }, function () {
      $log.info('Modal dismissed at: ' + new Date());
    });
  };

[valorkin]

@jhiemer modal is just a UI tool, it doesn't create separate context (at least for now or should not) so it doesn't have result in a separate way it just allows you to show data in different way but handling of data streams is up to you

if doesn't make sense I can elaborate a bit more

[jhiemer]

@valorkin ok, but having just this popup without being able to transfer any data into it and getting back some results from e.g. Save() or Cancel() does not help in many cases.

Which use cases do you see for a modal, which just opens and displays "data in a different way"?

Taking an example: you want to have modal, which opens up, if you want to delete a resource. Then it would be very nice to have at least way to get a reference of the entity to delete into the modal and vice versa.

[mohammedzamakhan]

This also has another limitation, you cannot open one modal from different location in the application.

And also how should we be able to open multiple modals?!

How can we integrate modal with the router?!

[valorkin]

And also how should we be able to open multiple modals?!

http://v4-alpha.getbootstrap.com/components/modal/

Multiple open modals not supported Be sure not to open a modal while another is still visible. Showing more than one modal at a time requires custom code.

[valorkin]

This also has another limitation, you cannot open one modal from different location in the application.

actually you can but the way it is in ng2 is a bit different from ng1

Other question that you can not create components dynamically via just ModalsService.open This is planned but will be later

[valorkin]

How can we integrate modal with the router?!

How can you integrate opening dropdown with router? Same way works for modal :)

[valorkin]

PS do not hesitate to ask questions, I am listing them and will update documentation with answers

right now top prio datepicker popup, than update docs ( more samples, may be even FAQ per component)

[jhiemer]

@valorkin my questions are still open. :-)

thanks for the great library btw.

[mohammedzamakhan]

@valorkin

Multiple open modals not supported

Even thought Jquery Bootstrap didn't support it, we had Angular UI (for 1.x) which is a custom code as is ng2-bootstrap, which supported it.

[valorkin]

@mohammedzamakhan agreed, should be added

[ShurikAg]

How can I close a modal from within its own controller? For example, I have a modal that shows a form. The save button is executing a method in modal's controller. Once everything is saved, I want to close it. Is there any reference to lgModal?

[valorkin]

http://valor-software.com/ng2-bootstrap/#modals like in demo

In general you have two options how to get instance of modal component:

• via View\Content child
• via html like this #lgModal="bs-modal" than you have an access to hide method

[ShurikAg]

Right, so I have this as a template:

<div bsModal #lgModal="bs-modal" class="modal fade" tabindex="-1" role="dialog" aria-labelledby="goalFormModal" aria-hidden="true">
....
      <div class="modal-footer">
        <button type="submit" class="btn btn-primary">Create</button>
        <button type="reset" class="btn btn-danger" (click)="lgModal.hide()">Cancel</button>
      </div>
    </div>
  </div>
</div>

And the controller attached to it is something like this

export class GoalFormComponent {

  newGoalModel: NewGoal = new NewGoal('');

  constructor(
    private goalsService: GoalsService
  ) {}

  newGoalSubmit() {
    this.goalsService.createNewGoal(this.newGoalModel)
      .subscribe(
        _ => this.loadGoals(),
        err => console.error(err),
        () => lgModal.hide()
      );
  }
}

So basically, I am within the modal's component. See the line () => lgModal.hide(), that is the one I am refering to.

[valorkin]

@ShurikAg no no, this should throw an exception please refer to this post: http://blog.mgechev.com/2016/01/23/angular2-viewchildren-contentchildren-difference-viewproviders/ and inject modal into your component via View or Content child

[valorkin]

and let us move to https://gitter.im/valor-software/ng2-bootstrap to not spam to all here :)

[karthikkavin]

How to use bootstrap nested modal in simple way?