Skip to content
GitLab
Projects Groups Topics Snippets
  • /
  • Help
    • Help
    • Support
    • Community forum
    • Submit feedback
    • Contribute to GitLab
  • Sign in
  • Angular Template Angular Template
  • Project information
    • Project information
    • Activity
    • Labels
    • Members
  • Repository
    • Repository
    • Files
    • Commits
    • Branches
    • Tags
    • Contributor statistics
    • Graph
    • Compare revisions
  • Issues 1
    • Issues 1
    • List
    • Boards
    • Service Desk
    • Milestones
  • Merge requests 0
    • Merge requests 0
  • CI/CD
    • CI/CD
    • Pipelines
    • Jobs
    • Schedules
  • Deployments
    • Deployments
    • Environments
    • Releases
  • Monitor
    • Monitor
    • Incidents
  • Analytics
    • Analytics
    • Value stream
    • CI/CD
    • Repository
  • Wiki
    • Wiki
  • Activity
  • Graph
  • Create a new issue
  • Jobs
  • Commits
  • Issue Boards
Collapse sidebar
  • IzeniIzeni
  • Angular TemplateAngular Template
  • Wiki
  • modals

modals · Changes

Page history
Update modals authored Sep 08, 2017 by Jordan Price's avatar Jordan Price
Hide whitespace changes
Inline Side-by-side
modals.md
View page @ 9426f9d2
# Modals # Outlet
## Outlet
The modal outlet is the container for our modals. Currently the outlet only supports one modal open at a time, though this could probably be adjusted to be able to support any amount of open modals if needed. The modal outlet is the container for our modals. Currently the outlet only supports one modal open at a time, though this could probably be adjusted to be able to support any amount of open modals if needed.
Somewhere in your templates (default `app.component.html`), you'll need to place the following: Somewhere in your templates (default `app.component.html`), you'll need to place the following:
...@@ -11,7 +9,7 @@ Somewhere in your templates (default `app.component.html`), you'll need to place ...@@ -11,7 +9,7 @@ Somewhere in your templates (default `app.component.html`), you'll need to place
It really shouldn't matter where this is placed at, but it's probably best to keep it in `app.component.html` at the end of the file. It really shouldn't matter where this is placed at, but it's probably best to keep it in `app.component.html` at the end of the file.
## Service # Service
The `ModalService` hooks into the outlet, and can inject any component into it with a set of options for customization. The `ModalService` hooks into the outlet, and can inject any component into it with a set of options for customization.
To open a modal, you need to have the ModalService and the component you want to open imported, and run the following: To open a modal, you need to have the ModalService and the component you want to open imported, and run the following:
...@@ -38,7 +36,7 @@ entryComponents: [ ...@@ -38,7 +36,7 @@ entryComponents: [
] ]
``` ```
## Options # Options
There are options that can be set to override default behavior. Below are the default options. You aren't limited to these options, you can add any fields you want. There are options that can be set to override default behavior. Below are the default options. You aren't limited to these options, you can add any fields you want.
``` javascript ``` javascript
...@@ -52,7 +50,7 @@ There are options that can be set to override default behavior. Below are the d ...@@ -52,7 +50,7 @@ There are options that can be set to override default behavior. Below are the d
}; };
``` ```
## Position option # Position option
By default, the modal will be placed in the center of the screen. You can override the options to place the modal anywhere you like. By default, the modal will be placed in the center of the screen. You can override the options to place the modal anywhere you like.
...@@ -66,7 +64,7 @@ By default, the modal will be placed in the center of the screen. You can overr ...@@ -66,7 +64,7 @@ By default, the modal will be placed in the center of the screen. You can overr
} }
``` ```
## Putting it all together. # Putting it all together.
Included in the template is a override-able confirm modal. Here's an example of opening the confirm modal, with no backdrop, no close button, 600px wide, in the top right, with data passed to it, and subscribing to the users selection. Included in the template is a override-able confirm modal. Here's an example of opening the confirm modal, with no backdrop, no close button, 600px wide, in the top right, with data passed to it, and subscribing to the users selection.
......
Clone repository
  • angular
  • cookbook forms
  • cookbook routing
  • data store
  • gotchas
  • Home
  • modals
  • sass with bem
  • toolbox
  • typescript
  • webpack