Angular two modal box pop-up modes

Before we start our blog, we need to install Ngx-bootstrap-modal first.

NPM Install Ngx-bootstrap-modal--save

Then import the bootstrap style sheet in index.html

<link href= "Https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0-beta/css/bootstrap.min.css" rel= "stylesheet" >

Otherwise our modal frame effect will be difficult to see you want to vomit one, pop-up way One (this method comes from Https://github.com/cipchk/ngx-bootstrap-modal) 1.alert bullet Frame (1) Demo Directory

--------App.component.ts

--------app.component.html

--------App.module.ts

--------Detail (folder)

------------detail.component.ts

------------detail.component.html (2) Demo Code

App.module.ts import the necessary bootstrapmodalmodule and modalmodule, then register them

App.module.ts
Import {browsermodule} from ' @angular/platform-browser ';
Import {Ngmodule} from ' @angular/core ';

This modal box only needs to import the following two import
{bootstrapmodalmodule} from ' Ngx-bootstrap-modal ';
Import {Modalmodule} from ' Ngx-bootstrap/modal ';

Import {AppComponent} from './app.component ';
Import {detailcomponent} from './detail/detail.component ';

@NgModule ({
  declarations: [
    AppComponent,
    detailcomponent
  ],
  imports: [
    Browsermodule,
    bootstrapmodalmodule
  ],
  providers: [],
  entrycomponents: [
    Detailcomponent
  ],
  bootstrap: [AppComponent]
})
export class Appmodule {}

app.component.html Create a button that pops the modal box

<div class= "Container" >
  <div class= "Row" >
    <button type= "button" class= "Btn btn-primary" ( Click) = "Showalert ()" >alert modal frame </button>
  </div> 
</div>

App.component.ts write the action of this button Showalert ()

Import {Component} from ' @angular/core ';
Import {Dialogservice} from "Ngx-bootstrap-modal";
Import {detailcomponent} from './detail/detail.component '


@Component ({
  selector: ' App-root ',
  Templateurl: './app.component.html ',
  styleurls: ['./app.component.css ']
})
Export class AppComponent {
   title = ' app ';
   Constructor (public dialogservice:dialogservice) {
    }   
   Showalert () {
        This.dialogService.addDialog ( Detailcomponent, {title: ' Alert title! ', message: ' Alert message!!! '}}

Detail.component.html writing the layout of the Alert bullet box

<div class= "Modal-dialog" >
    <div class= "modal-content" >
        <div class= "Modal-header" >
            <button type= "button" class= "Close" (click) = "Close ()" >x</button>
            
Detail.component.ts Create a modal box component, we need to create a component and then boot it up by Ngx-bootstrap-model help

For this component you need to inherit Dialogcomponent<t, the T1> class, which contains two parameters:

The type of the modal box to which the external parameter is passed.

The T1 modal box returns a value type.

Therefore, Dialogservice should be the parameter of a constructor for dialogcomponent.


Import {Component} from ' @angular/core ';
Import {dialogcomponent, dialogservice} from ' Ngx-bootstrap-modal ';

Export interface Alertmodel {
  title:string;
  message:string;
}

@Component ({
  selector: ' Alert ',
  templateurl: './detail.component.html ',
  styleurls: ['./ Detail.component.css ']
})
Export class Detailcomponent extends Dialogcomponent<alertmodel, null> Implements Alertmodel {
  title:string;
  message:string;
  Constructor (Dialogservice:dialogservice) {
    super (Dialogservice);
  }
}
 
2.confirm Bullet Frame 
(1) Demo catalogue--------App.component.ts

--------app.component.html

--------App.module.ts

--------Confirm (folder)

------------confirm.component.ts

------------confirm.component.html

 
(2) Demo CodeApp.module.ts import the necessary bootstrapmodalmodule and Modalmodule, and then register them, these are the same as the alert bullets, because these are methods one pop-up way


App.module.ts
Import {browsermodule} from ' @angular/platform-browser ';
Import {Ngmodule} from ' @angular/core ';

This modal box only needs to be imported into the following import
{bootstrapmodalmodule} from ' Ngx-bootstrap-modal ';

Import {AppComponent} from './app.component ';
Import {detailcomponent} from './detail/detail.component ';

@NgModule ({
  declarations: [
    AppComponent,
    detailcomponent
  ],
  imports: [
    Browsermodule,
    bootstrapmodalmodule
  ],
  providers: [],
  entrycomponents: [
    Detailcomponent
  ],
  bootstrap: [AppComponent]
})
export class Appmodule {}
 

app.component.html Create a button that pops the modal box


<div class= "Container" >
  <div class= "Row" >
    <button type= "button" class= "Btn btn-primary" ( Click) = "Showconfirm ()" >modal modal frame </button>
  </div> 
</div>
App.component.ts write the action of this button showconfirm ()

Import {Component} from ' @angular/core ';
Import {Dialogservice} from "Ngx-bootstrap-modal";
Import {confirmcomponent} from './confirm/confirm.component '

@Component ({
  selector: ' App-root ',
  Templateurl: './app.component.html ',
  styleurls: ['./app.component.css ']
})
Export class AppComponent {
   title = ' app ';
   Constructor (public dialogservice:dialogservice) {
    }
   showconfirm () {
        This.dialogService.addDialog ( Confirmcomponent, {
            title: ' Confirmation ',
            message: ' Bla bla '
        })
            . Subscribe ((isconfirmed) = {
                
            });
    }
}
 

Confirm.component.html writing the layout of a Confirm bullet box


<div class= "Modal-dialog" >
    <div class= "modal-content" >
        <div class= "Modal-header" >
            <button type= "button" class= "Close" (click) = "Close ()" >x</button>
            
 
Confirm.component.ts Creating modal Box components

Import {Component} from ' @angular/core ';
Import {dialogcomponent, dialogservice} from ' Ngx-bootstrap-modal ';

Export interface Confirmmodel {
  title:string;
  Message:any;
}

@Component ({
  selector: ' Confirm ',
  templateurl: './confirm.component.html ',
  styleurls: ['./ Confirm.component.css ']
})
Export class Confirmcomponent extends Dialogcomponent<confirmmodel, Boolean > Implements Confirmmodel {
  title:string;
  Message:any;
  Constructor (Dialogservice:dialogservice) {
    super (Dialogservice);
  }
  Confirm () {
    //On Click confirm button We set dialog result as true,
    //Ten we can get dialog result from Cal Ler Code
    This.close (TRUE);
  }
  Cancel () {
    this.close (false);
  }
}
 
3. Built-in bullet frame 
(1) Demo catalogue 
--------App.component.ts
--------app.component.html
--------App.module.ts
(2) Demo Code


The built-in bullet box also includes alert confirm prompt three forms, with some built-in styles

App.module.ts


Import {Browsermodule} from ' @angular/platform-browser ';
Import {Ngmodule} from ' @angular/core ';

Import {Bootstrapmodalmodule} from ' Ngx-bootstrap-modal ';
Import {Modalmodule} from ' Ngx-bootstrap/modal ';

Import {AppComponent} from './app.component ';

@NgModule ({
  declarations: [
    AppComponent
  ],
  imports: [
    browsermodule,
    Bootstrapmodalmodule,
    modalmodule.forroot ()
  ],
  providers: [],
  bootstrap: [AppComponent]
})
Export class Appmodule {}
App.component.html is simple, just a button.


<div class= "Container" >
  <div class= "Row" >
    <button type= "button" class= "Btn Btn-default" ( Click) = "show ()" > Built-in </button>
  </div> 
</div>
App.component.ts is very simple, even the layout of the components do not have to write, the introduction of some parameters such as icon icons, size sizes, etc.


Import {Component} from ' @angular/core ';
Import {dialogservice, builtinoptions} from "Ngx-bootstrap-modal";

@Component ({
  selector: ' App-root ',
  templateurl: './app.component.html ',
  styleurls: ['./ App.component.css ']
})
Export class AppComponent {
   title = ' app ';

   Constructor (public dialogservice:dialogservice) {
    }
    Show () {
      This.dialogService.show (< builtinoptions>{
          content: ' Save success ',
          icon: ' Success ',
          size: ' SM ',
          showcancelbutton:false
      })
    }
}
 
two, pop-up mode two (this method from Https://valor-software.com/ngx-bootstrap/#/modals)

Or the same way, install Ngx-bootstrap-modal First, and then import the bootstrap style sheet 1.demo catalog

--------App.component.ts
--------app.component.html
--------App.module.ts
2.demo Code

App.module.ts import the appropriate modules and register them

App.module.ts
Import {browsermodule} from ' @angular/platform-browser ';
Import {Ngmodule} from ' @angular/core ';

Import {Modalmodule} from ' Ngx-bootstrap/modal ';
Import {AppComponent} from './app.component ';


@NgModule ({
declarations: [
AppComponent
],
imports: [
browsermodule,
modalmodu Le.forroot ()
],
providers: [],
entrycomponents: [
],
bootstrap: [AppComponent ]
})
export class Appmodule {}
App.component.ts
Import {component,templateref} from ' @angular/core ';

Import {Bsmodalservice} from ' Ngx-bootstrap/modal ';
Import {bsmodalref} from ' Ngx-bootstrap/modal/modal-options.class ';

@Component ({
  selector: ' App-root ',
  templateurl: './app.component.html ',
  styleurls: ['./ App.component.css ']
})
Export class AppComponent {
   title = ' app ';
   public modalref:bsmodalref;
   Constructor (private Modalservice:bsmodalservice) {
    }
    Showsecond (template:templateref<any>) {// The incoming is a component
        This.modalref = this.modalService.show (template,{class: ' Modal-lg '});// Show it here through the Show method inside the Bsmodalservice

   };
 
App.component.html


<div class= "container" > <div class= "Row" > <button type= "button" class= "Btn BTN-SUCC
ESS "(click) =" Showsecond (Template) "> Second popup </button> </div> </div> <!--component of the second popup method-- <template #Template > <div class= "Modal-header tips-modal-header" > 
 
third, the final effect


We put all of the above frames together, and that's how it works.