Angular 2 0 and Modal Dialog

Question

I am trying to find some examples on how to do a Confirmation modal dialog in Angular 2 0  I have been using Bootstrap dialog for Angular 1 0  and unable to find any examples in the web for Angular 2 0  I also checked angular 2 0 docs with no luck   Is there a way to use the Bootstrap dialog with Angular 2 0

User · Answer

try to use ng-window  it s allow developer to open and full control multiple windows in single page applications in simple way  No Jquery  No Bootstrap     Avilable Configration   Maxmize window Minimize window Custom size  Custom posation the window is dragable  Block parent window or not Center the window or not Pass values to chield window  Pass values from chield window to parent window Listening to closing chield window in parent window Listen to resize event with your custom listener Open with maximum size or not Enable and disable window resizing Enable and disable maximization Enable and disable minimization

User · Answer

Angular 2 and up Bootstrap css  animation is preserved   NO JQuery NO bootstrap js Supports custom modal content  just like accepted answer  Recently added support for multiple modals on top of each other        Component     selector   app-component     template       lt button type  button   click   modal show    gt test lt  button gt     lt app-modal  modal gt       lt div class  app-modal-header  gt        header      lt  div gt       lt div class  app-modal-body  gt        Whatever content you like  form fields  anything      lt  div gt       lt div class  app-modal-footer  gt         lt button type  button  class  btn btn-default   click   modal hide    gt Close lt  button gt         lt button type  button  class  btn btn-primary  gt Save changes lt  button gt       lt  div gt     lt  app-modal gt         export class AppComponent       Component     selector   app-modal     template       lt div  click   onContainerClicked  event   class  modal fade  tabindex  -1   ngClass     in   visibleAnimate           ngStyle     display   visible    block     none    opacity   visibleAnimate   1   0   gt       lt div class  modal-dialog  gt         lt div class  modal-content  gt           lt div class  modal-header  gt             lt ng-content select   app-modal-header  gt  lt  ng-content gt           lt  div gt           lt div class  modal-body  gt             lt ng-content select   app-modal-body  gt  lt  ng-content gt           lt  div gt           lt div class  modal-footer  gt             lt ng-content select   app-modal-footer  gt  lt  ng-content gt           lt  div gt         lt  div gt       lt  div gt     lt  div gt         export class ModalComponent      public visible   false    public visibleAnimate   false     public show    void       this visible   true      setTimeout      gt  this visibleAnimate   true  100          public hide    void       this visibleAnimate   false      setTimeout      gt  this visible   false  300          public onContainerClicked event  MouseEvent   void       if    lt HTMLElement gt event target  classList contains  modal            this hide                  To show the backdrop  you ll need something like this CSS    modal     background  rgba 0 0 0 0 6       The example now allows for multiple modals at the same time   see the onContainerClicked   method    For Bootstrap 4 css users  you need to make 1 minor change  because a css class name was updated from Bootstrap 3   This line   ngClass     in   visibleAnimate   should be changed to   ngClass     show   visibleAnimate    To demonstrate  here is a plunkr

User · Answer

Check ASUI dialog which create at runtime  There is no need of hide and show logic  Simply service will create a component at runtime using AOT ASUI NPM

User · Answer

Now available as a NPM package  angular-custom-modal     Stephen Paul continuation      Angular 2 and up Bootstrap css  animation is preserved   NO JQuery  NO bootstrap js Supports custom modal content Support for multiple modals on top of each other  Moduralized Disable scroll when modal is open Modal gets destroyed when navigating away  Lazy content initialization  which gets ngOnDestroy ed  when the modal is exited  Parent scrolling disabled when modal is visible   Lazy content initialization  Why   In some cases you might not want to modal to retain its status after having been closed  but rather restored to the initial state   Original modal issue  Passing the content straightforward into the view actually generates initializes it even before the modal gets it  The modal doesn t have a way to kill such content even if using a  ngIf wrapper   Solution  ng-template  ng-template doesn t render until ordered to do so   my-component module ts      imports            ModalModule     my-component ts   lt button  click   reuseModal open    gt Open lt  button gt   lt app-modal  reuseModal gt     lt ng-template  header gt  lt  ng-template gt     lt ng-template  body gt       lt app-my-body-component gt         lt  -- This component will be created only when modal is visible and will be destroyed when it s not  -- gt       lt  app-my-body-content gt       lt ng-template  footer gt  lt  ng-template gt   lt  app-modal gt    modal component ts  export class ModalComponent          ContentChild  header   header  TemplateRef lt any gt      ContentChild  body   body  TemplateRef lt any gt      ContentChild  footer   footer  TemplateRef lt any gt            modal component html   lt div      ngIf  visible  gt           lt div class  modal-body  gt      ng-container  ngTemplateOutlet  body  gt  lt  ng-container gt     lt  div gt    References  I have to say that it wouldn t have been possible without the excellent official and community documentation around the net  It might help some of you too to understand better how ng-template   ngTemplateOutlet and  ContentChild work   https   angular io api common NgTemplateOutlet https   blog angular-university io angular-ng-template-ng-container-ngtemplateoutlet  https   medium com claritydesignsystem ng-content-the-hidden-docs-96a29d70d11b https   netbasal com understanding-viewchildren-contentchildren-and-querylist-in-angular-896b0c689f6e https   netbasal com understanding-viewchildren-contentchildren-and-querylist-in-angular-896b0c689f6e  Full copy-paste solution  modal component html   lt div    click   onContainerClicked  event     class  modal fade    tabindex  -1     ngClass     in   visibleAnimate      ngStyle     display   visible    block     none    opacity   visibleAnimate   1   0      ngIf  visible  gt     lt div class  modal-dialog  gt       lt div class  modal-content  gt         lt div class  modal-header  gt           lt ng-container  ngTemplateOutlet  header  gt  lt  ng-container gt           lt button class  close  data-dismiss  modal  type  button  aria-label  Close   click   close    gt    lt  button gt         lt  div gt         lt div class  modal-body  gt           lt ng-container  ngTemplateOutlet  body  gt  lt  ng-container gt         lt  div gt         lt div class  modal-footer  gt           lt ng-container  ngTemplateOutlet  footer  gt  lt  ng-container gt         lt  div gt       lt  div gt     lt  div gt   lt  div gt    modal component ts          Stephen Paul https   stackoverflow com a 40144809 2013580     zurfyx https   stackoverflow com a 46949848 2013580     import   Component  OnDestroy  ContentChild  TemplateRef   from   angular core     Component     selector   app-modal     templateUrl   modal component html     styleUrls    modal component scss       export class ModalComponent implements OnDestroy      ContentChild  header   header  TemplateRef lt any gt      ContentChild  body   body  TemplateRef lt any gt      ContentChild  footer   footer  TemplateRef lt any gt      public visible   false    public visibleAnimate   false     ngOnDestroy            Prevent modal from not executing its closing actions if the user navigated away  for example         through a link       this close           open    void       document body style overflow    hidden        this visible   true      setTimeout      gt  this visibleAnimate   true  200          close    void       document body style overflow    auto        this visibleAnimate   false      setTimeout      gt  this visible   false  100          onContainerClicked event  MouseEvent   void       if    lt HTMLElement gt event target  classList contains  modal            this close                  modal module ts  import   NgModule   from   angular core   import   CommonModule   from   angular common    import   ModalComponent   from    modal component     NgModule     imports        CommonModule         exports   ModalComponent     declarations   ModalComponent     providers         export class ModalModule

User · Answer

Here s a pretty decent example of how you can use the Bootstrap modal within an Angular2 app on GitHub   The gist of it is that you can wrap the bootstrap html and jquery initialization in a component  I ve created a reusable modal component that allows you to trigger an open using a template variable    lt button type  button  class  btn btn-default   click   modal open    gt Open me  lt  button gt    lt modal  modal gt       lt modal-header  show-close   true  gt           lt h4 class  modal-title  gt I m a modal  lt  h4 gt       lt  modal-header gt       lt modal-body gt          Hello World       lt  modal-body gt       lt modal-footer  show-default-buttons   true  gt  lt  modal-footer gt   lt  modal gt    You just need to install the npm package and register the modal module in your app module   import   Ng2Bs3ModalModule   from  ng2-bs3-modal ng2-bs3-modal     NgModule       imports   Ng2Bs3ModalModule     export class MyAppModule

User · Answer

This is a simple approach that does not depend on jquery or any other library except Angular 2  The component below  errorMessage ts  can be used as a child view of any other component   It is simply a bootstrap modal that is always open or shown   It s visibility is governed by the ngIf statement   errorMessage ts  import   Component   from   angular core    Component       selector   app-error-message       templateUrl     app common errorMessage html      export class ErrorMessage       private ErrorMsg  string      public ErrorMessageIsVisible  boolean       showErrorMessage msg  string                this ErrorMsg   msg          this ErrorMessageIsVisible   true             hideErrorMsg                 this ErrorMessageIsVisible   false            errorMessage html   lt div  ngIf  ErrorMessageIsVisible  class  modal fade show in danger  id  myModal  role  dialog  gt       lt div class  modal-dialog  gt            lt div class  modal-content  gt               lt div class  modal-header  gt                   lt button type  button  class  close  data-dismiss  modal  gt  amp times  lt  button gt                   lt h4 class  modal-title  gt Error lt  h4 gt               lt  div gt               lt div class  modal-body  gt                   lt p gt   ErrorMsg   lt  p gt               lt  div gt               lt div class  modal-footer  gt                   lt button type  button  class  btn btn-default   click   hideErrorMsg    gt Close lt  button gt               lt  div gt           lt  div gt       lt  div gt   lt  div gt    This is an example parent control  some non-relevant code has been omitted for brevity    parent ts  import   Component  ViewChild   from   angular core   import   NgForm   from   angular common   import  Router  RouteSegment  OnActivate  ROUTER DIRECTIVES   from   angular router   import   OnInit   from   angular core   import   Observable   from  rxjs Observable      Component       selector   app-application-detail       templateUrl     app permissions applicationDetail html       directives   ROUTER DIRECTIVES  ErrorMessage      Note ErrorMessage is a directive    export class ApplicationDetail implements OnActivate        ViewChild ErrorMessage  errorMsg  ErrorMessage      ErrorMessage is a ViewChild           yada yada       onSubmit                 let result   this permissionsService SaveApplication this Application  subscribe x   gt                        x Error   true              x Message    This is a dummy error message                if  x Error                    this errorMsg showErrorMessage x Message                             else                   this router navigate    applicationsIndex                                          parent html   lt app-error-message gt  lt  app-error-message gt     your html

User · Answer

Here is my full implementation of modal bootstrap angular2 component   I assume that in your main index html file  with  lt html gt  and  lt body gt  tags  at the bottom of  lt body gt  tag you have      lt script src  assets js jquery-2 1 1 js  gt  lt  script gt     lt script src  assets js bootstrap min js  gt  lt  script gt    modal component ts   import   Component  Input  Output  ElementRef  EventEmitter  AfterViewInit   from   angular core    declare var    any    this is very importnant  to work this line  this modalEl modal  show    - don t do this  becouse this owerride jQuery which was changed by bootstrap  included in main html-body template   let     require                 node modules jquery dist jquery min js      Component     selector   modal     templateUrl     modal html      export class Modal implements AfterViewInit         Input   title string       Input   showClose boolean   true       Output   onClose  EventEmitter lt any gt    new EventEmitter         modalEl   null      id  string   uniqueId  modal          constructor private  rootNode  ElementRef          open             this modalEl modal  show               close             this modalEl modal  hide               closeInternal        close modal when click on times button in up-right corner         this onClose next null      emit event         this close               ngAfterViewInit             this modalEl     this  rootNode nativeElement  find  div modal               has selector            return   this  rootNode nativeElement  find selector  length           let modal id  number   0  export function uniqueId prefix  string   string       return prefix     modal id      modal html    lt div class  modal inmodal fade  id    modal id    tabindex  -1  role  dialog   aria-hidden  true   thisModal gt       lt div class  modal-dialog  gt           lt div class  modal-content  gt               lt div class  modal-header   ngClass     hide     has  mhead      title     gt                   lt button  ngIf  showClose  type  button  class  close   click   closeInternal    gt  lt span aria-hidden  true  gt  amp times  lt  span gt  lt span class  sr-only  gt Close lt  span gt  lt  button gt                   lt ng-content select  mhead  gt  lt  ng-content gt                   lt h4  ngIf  title  class  modal-title  gt    title    lt  h4 gt               lt  div gt               lt div class  modal-body  gt                   lt ng-content gt  lt  ng-content gt               lt  div gt                lt div class  modal-footer   ngClass     hide    has  mfoot       gt                   lt ng-content select  mfoot  gt  lt  ng-content gt               lt  div gt           lt  div gt       lt  div gt   lt  div gt    And example of usage in client Editor component  client-edit-component ts   import   Component   from   angular core   import   ClientService   from    client service   import   Modal   from     common     Component     selector   client-edit     directives    Modal      templateUrl     client-edit html     providers    ClientService      export class ClientEdit         modal   null       constructor private  ClientService  ClientService          bindModal modal   this  modal modal        open client            this  modal open            console log  client               close             this  modal close               client-edit html    lt modal  title    Some standard title    showClose   true   onClose   close     editModal gt    bindModal editModal          lt mhead gt Som non-standart title lt  mhead gt      Some contents      lt mfoot gt  lt button calss  btn   click   close    gt Close lt  button gt  lt  mfoot gt   lt  modal gt    Ofcourse title  showClose   lt mhead gt  and  lt mfoot gt  ar optional parameters tags

User · Answer

I use ngx-bootstrap for my project   You can find the demo here  The github is here  How to use    Install ngx-bootstrap Import to your module       RECOMMENDED  doesn t work with system js  import   ModalModule   from  ngx-bootstrap modal      or import   ModalModule   from  ngx-bootstrap     NgModule     imports   ModalModule forRoot           export class AppModule         Simple static modal     lt button type  button  class  btn btn-primary   click   staticModal show    gt Static modal lt  button gt   lt div class  modal fade  bsModal  staticModal  bs-modal   config    backdrop   static    tabindex  -1  role  dialog  aria-labelledby  mySmallModalLabel  aria-hidden  true  gt   lt div class  modal-dialog modal-sm  gt      lt div class  modal-content  gt         lt div class  modal-header  gt            lt h4 class  modal-title pull-left  gt Static modal lt  h4 gt            lt button type  button  class  close pull-right  aria-label  Close   click   staticModal hide    gt            lt span aria-hidden  true  gt  amp times  lt  span gt            lt  button gt         lt  div gt         lt div class  modal-body  gt           This is static modal  backdrop click will not close it           Click  lt b gt  amp times  lt  b gt  to close modal         lt  div gt      lt  div gt   lt  div gt   lt  div gt

User · Answer

Angular 7   NgBootstrap  A simple way of opening modal from main component and passing result back to it  is what I wanted  I created a step-by-step tutorial which includes creating a new project from scratch  installing ngbootstrap and creation of Modal  You can either clone it or follow the guide    Hope this helps new to Angular    https   github com wkaczurba modal-demo  Details   modal-simple template  modal-simple component html     lt ng-template  content let-modal gt     lt div class  modal-header  gt       lt h4 class  modal-title  id  modal-basic-title  gt Are you sure  lt  h4 gt       lt button type  button  class  close  aria-label  Close   click   modal dismiss  Cross click    gt         lt span aria-hidden  true  gt  amp times  lt  span gt       lt  button gt     lt  div gt     lt div class  modal-body  gt       lt p gt You have not finished reading my code  Are you sure you want to close  lt  p gt     lt  div gt     lt div class  modal-footer  gt       lt button type  button  class  btn btn-outline-dark   click   modal close  yes    gt Yes lt  button gt       lt button type  button  class  btn btn-outline-dark   click   modal close  no    gt No lt  button gt     lt  div gt   lt  ng-template gt    The modal-simple component ts   import   Component  OnInit  ViewChild  Output  EventEmitter   from   angular core   import   NgbModal   from   ng-bootstrap ng-bootstrap     Component     selector   app-modal-simple     templateUrl     modal-simple component html     styleUrls      modal-simple component css      export class ModalSimpleComponent implements OnInit      ViewChild  content   content     Output   result   EventEmitter lt string gt    new EventEmitter       constructor private modalService   NgbModal         open         this modalService open this content   ariaLabelledBy   modal-simple-title           result then  result    gt    console log result as string   this result emit result               reason    gt    console log reason as string   this result emit reason            ngOnInit              Demo of it  app component html  - simple way of dealing with return event     lt app-modal-simple  mymodal  result   onModalClose  event   gt  lt  app-modal-simple gt   lt button  click   mymodal open    gt Open modal lt  button gt    lt p gt  Result is    modalCloseResult     lt  p gt    app component ts - onModalClosed is executed once modal is closed    Component     selector   app-root     templateUrl     app component html     styleUrls      app component css      export class AppComponent     modalCloseResult   string    title    modal-demo      onModalClose reason   string        this modalCloseResult   reason              Cheers

[modal-dialog] Angular 2.0 and Modal Dialog

Examples related to angular

[modal-dialog] Angular 2.0 and Modal Dialog

Examples related to modal-dialog

Examples related to angular