angular


How do I pass input parameters for a component when using mdl custom dialog?


Here is the tutorial code to create a custom dialog from the official angular-mdl website.
let pDialog = this.dialogService.showCustomDialog({
component: LoginDialogComponent,
providers: [{provide: TEST_VALUE, useValue: 'Just an example'}],
isModal: true,
styles: {'width': '350px'},
clickOutsideToClose: true
});
Now, if I add some #Input() parameters to LoginDialogComponent, e.g. #Input() requireCaptcha: boolean;
How can I pass parameters there?
You can't use #Input in your case because this would require an element where you can pass your requireCaptcha value.
The intention is to use the providers Array to pass values to your dialog component. First of all create an InjectionToken:
export const REQUIERE_CAPTCHA = new InjectionToken<boolean>('requireCaptcha');
Then in your showCustomDialog method use:
let pDialog = this.dialogService.showCustomDialog({
component: LoginDialogComponent,
providers: [{provide: REQUIERE_CAPTCHA, useValue: true}],
isModal: true,
styles: {'width': '350px'},
clickOutsideToClose: true
});
Now you can access the REQUIERE_CAPTCHA in your dialog component:
constructor(
private dialog: MdlDialogReference,
#Inject( REQUIERE_CAPTCHA) requireCaptcha: boolean) {
console.log(requireCaptcha);
}

Related Links

Angular2 terrible performance with ngFor assigning variable to “index”
nav.popToRoot() showing blank screen
Anguler2 js: getting no compatible version found : #types/node#^5.8.0
Angular 2 xi18n cannot resolve template path outside of component directory
Angular 2 - Uncaught (in promise): ReferenceError: System is not defined
update routes dynamically in angular2 app
Resolving Multiple Pieces of Data using Resolve Guard in Angular 2
Angular 2 disable form button from ts?
ng2-charts - Can't bind to 'datasets' since it isn't a known property of 'base-chart'
Angular 2 not showing correctly values in input
Webpack resolve.modulesDirectories doesn't seem to work
Text editors in angular2
Where can i find the latest ionic-angular2 version in a plunker that uses #Ngmodule?
How to manually lazy load a module?
Angular2 Prevent route change if any changes made in the view
Angular2 pass data from component to root component, without child component

Categories

HOME
coldfusion
entities
g2o
linux-device-driver
animate.css
uiviewcontroller
google-vr
access-control
ninja
snapshot
m3u8
unity3d-unet
denial-of-service
ietf-netmod-yang
spring-boot-actuator
4d-database
konvajs
twitter-streaming-api
mysql-error-1064
react-apollo
actionlink
github-api
akka-stream
ebcdic
ireport
povray
mahapps.metro
radius
jqassistant
side-effects
choropleth
induction
pam
lightgallery
tail-recursion
winrt-xaml
envelope
fpu
azure-sql-server
itunes-store
autocorrect
bandwidth
oltp
sceditor
embedded-javascript
slug
apple-search-ads
gyp
cpio
gio
nested-function
dde
display-bugs
qtquick2
arithmetic-expressions
typing
classname
data-connections
sos
splash-screen
httpful
velocity.js
busy-waiting
angularjs-ng-options
unique-constraint
aloha-editor
bpopup
protection
childviewcontroller
google-client
ontouchevent
ncbi
hashbytes
resin
control-center
kooboo
pixate
chaplinjs
println
jquery-ui-selectable
readelf
set-theory
dotfuscator
capability
addr2line
primefaces-extensions
.lrc
google-doodle
ubuntu-9.10
cocos2d-python
iphone-sdk-4.1
openflashchart2
context-sensitive-help
widechar
oracle8i
google-notebook
o3d

Resources

Mobile Apps Dev
Database Users
javascript
java
csharp
php
android
MS Developer
developer works
python
ios
c
html
jquery
RDBMS discuss
Cloud Virtualization
Database Dev&Adm
javascript
java
csharp
php
python
android
jquery
ruby
ios
html
Mobile App
Mobile App
Mobile App