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

Template Error on ngFor and using pipe with parameter
Angular 2: Validators.compose() vs [] [duplicate]
angular 2 -spring boot
VelocityJS in a TypeScript project throws '../node_modules/#types/velocity-animate/index.d.ts is not a module'
How to resubscribe to an observable?
Angular material 2 dynamic button toggle group form control accessor
Debug Tests in NG Test
Angular 2. Doubled custom tags
Integration Stripe Elements with angular 2
How to format phone number while typing in angular 2?
Angular: Wrap providers in a module?
Angular - getting the handle to the ng-content component in the parent
How to use ng.material.MdDialog in ES5?
Access to a variable through all the components Angular2
Trouble with Microsoft Edge, Protractor and Jasmine
Error: XHR error (404 Not Found) in Angular2 application

Categories

HOME
web
logic
google-maps
gradle
rx-java
firmware
web-crawler
umbraco7
windows-installer
ibm-mobilefirst
bootstrap-datepicker
windows-forms-designer
cordova-plugins
outlook-addin
rpres
pivot-table
worksheet-function
translate
bayesian
build-automation
image-comparison
apprtcdemo
sitefinity
jqxwidgets
messagebox
chinese-locale
angular-openlayers
fxml
inversifyjs
modeling
jquery-chosen
c#-to-f#
sequences
get-eventlog
sharethis
yamldotnet
package-name
nsdate
legacy
codeigniter-2
bootstrapping
toml
james
c#-6.0
ffi
enterprise-library-6
jquery-ui-widget-factory
safe-browsing
allegro5
monocle-scala
libtool
embedded-javascript
ms-project-server-2013
turtle-rdf
twebbrowser
gm
sharepoint-userprofile
google-plus-domains
qtquick2
amazon-mobile-analytics
jquery-ui-resizable
cts
zodb
xmlpullparser
unique-constraint
dynamic-ip
kermit
ekeventstore
childviewcontroller
custom-validators
t4-toolbox
android-view
kismet-wireless
slab
ews-managed-api
mysql-error-1093
filefield
componentkit
usleep
aglio
facade
code-metrics
syntactic-sugar
worklight-server
option
openacs
kiwi
apache-commons-exec
invalidation
graphael
where-in
c++builder-6
tandem
maskedinput
jquery-ui-selectable
camping
keymando
testdriven.net
umbraco5
endl
soaplite
blogml

Resources

Encrypt Message



code
soft
python
ios
c
html
jquery
cloud
mobile