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

You may need an appropriate loader to handle this file type. Typescript
when i run npm i got this error. how to fix this?
Angular2 add nativeElement to component's prototype
Property 'value' does not exist on type 'ElementRef'
Getting all routes from current module - Angular 2
Ionic 2 Cache issue with tabs application
Set selected option by default on angular template
Downloading Redux State into an Angular 2 component and then iterating over its result
How to push on FormArray without FormBuilder on Angular 2
Angular 2, Uncaught Type Error: Cannot read property 'Injectable' of undefined
Set width to an Angular2-modal window
identityserver4 angular client, from where come the call to this endpoint
Angular2 translation after subscribing to service
Kendo UI - Texfield not showing in MultiSelect when Value is 0
InvalidPipeArgument for pipe 'DatePipe'
Native Element in angular 2

Categories

HOME
node.js
sails.js
magento-1.9
screensaver
unix
netlogo
asp-classic
informix
aws-codepipeline
reactor-netty
ais
ejb
url-rewriting
visio
angularjs-ng-route
fix
tablesorter
recurly
clang-format
ajaxform
stackdriver
mysql-error-1064
ssrs-2016
apache-samza
phylogeny
filenames
ext4
wijmo5
pi4j
c#-to-f#
jung
appery.io
sequences
get-eventlog
database-theory
codeigniter-2
nn
sqlcmd
card-flip
meta-tags
sphero-api
android-auto
lift
960.gs
xilinx-edk
gemfile
cics
zlib
rt
exports-loader
wso2-appm
strconv
opscenter
dispy
android-gson
kubernetes-health-check
visual-c++-2013
rpath
pdfobject
swig-template
dart-polymer
deferred-loading
display-bugs
iis-8.5
stl-format
phpinfo
cts
ng-template
traffic-simulation
javascript-globalize
gridsplitter
django-pipeline
window-position
fluid-layout
aloha-editor
acronym
wunderlist
mashape
gliffy
zend-http-client
arbitrary-precision
hasp
teamcity-7.1
linq-to-lucene
freetextbox
postfix-operator
jbossws
imagecreatefrompng
xadisk
static-array
nsinteger
nested-queries
memory-profiling
pasteboard
continuations
raw-ethernet
showmodaldialog
itsm
projective-geometry
microsoft.build
comdlg32
flashlite

Resources

Encrypt Message



code
soft
python
ios
c
html
jquery
cloud
mobile