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

Issues with ng2-charts
Cordova media plugin is not working in marshmallow
Is Angular2 responsive out of the box?
Async call update HTML Element though Angular 4.x Service
Uncaught ReferenceError: define is not defined angular2/webpack 1
unable to find suitable angular data grid for angular 2.4.1 version?
Access process.env in environment.ts file created from the angular-cli
Cannot read property 'channels' of undefined youtube api
How to set the public path on angular 4
Using local Bootstrap3 with angular 2
Firebase: update database when no write operation happens in 5 minutes interval
Build single directive to perform both Structural & Attribute behaviour?
Angular 2 Sending data to child
AOT - Function calls are not supported Module.forRoot
subscribe to ionic page change event
Dynamic number of Promise in Angularfire2

Categories

HOME
linux-kernel
coldfusion
centos
alexa
powershell-v4.0
rabbitmq
masonry
angular-material2
wildfly
web-crawler
maven-lifecycle
python-3.6
boost
webserver
wlan
ais
cordova-plugins
jaxb
tensorboard
soundcloud
fluent-assertions
css-modules
netfilter
denial-of-service
trackjs
sdl
sirikit
polymer-1.0
robots.txt
media
qtspim
ssrs-2016
gnome
touch
indexof
actionlink
navigation-drawer
povray
sqlcedatareader
chmod
uwamp
fixtures
umbraco-mvc
filestream
uicollectionviewcell
powerdns
ngrx-effects
automated-deployment
gulp-usemin
jes
roc
evosuite
tivoli-identity-manager
django-compressor
vqmod
gyp
banking
nsoutlineview
rate
report-viewer2012
jwrapper
reportviewer2008
dex2oat
nested-forms
tizen-sdb
gethostbyname
google-roads-api
little-endian
firefox-addon-bootstrap
graphic-effects
spawn-fcgi
mime-mail
johnny-five
nameerror
spatialite
acl2
nstablecolumn
magnetometer
n-tier
spn
inter-process-communicat
scite
jwebunit
cohesion
continuations
eda
openflashchart2
open-flash-chart
language-theory
wss-3.0
loose-coupling

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