angular - How to configure a mdl-dialog in the declarative way -

i'm trying use mdl-dialog component showed here: http://mseemann.io/angular2-mdl/dialogs-declarative

but compiler says:

can't bind 'mdl-dialog-config' since isn't known property of 'mdl-dialog'.

1. if 'mdl-dialog' angular component , has 'mdl-dialog-config' input, verify part of module.
2. if 'mdl-dialog' web component add "custom_elements_schema" '@ngmodule.schemas' of component suppress message.

my full component is:

  import { component, input, oninit, viewcontainerref } '@angular/core';   import { domsanitizer } '@angular/platform-browser';   import { router, activatedroute, params } '@angular/router';    import { orderitem } '../models/orderitem';   import { sizerunbox } '../models/sizerunbox';   import { customer } '../models/customer';    import { collectiondataservice } '../services/collectiondata.service';    import { mdldialogoutletservice, mdldialogcomponent, mdldialogreference } 'angular2-mdl';    export interface orderitemwithsizerunboxes extends orderitem {      sizerunboxes: sizerunbox[];   }    @component({     selector: 'ordercart',     templateurl: 'app/ordercart/ordercart.component.html',     styleurls: ['app/ordercart/ordercart.component.css']   })   export class ordercart implements oninit {      ordercart: orderitemwithsizerunboxes[];      ordercartsizerunboxes: sizerunbox[];      from: string = "";      raworderdate: date = new date();      orderdate: string = "";      customers: customer[] = [];       constructor(            private route: activatedroute,            private router: router,            private sanitizer: domsanitizer,            private collectiondataservice: collectiondataservice,            private dilalogouletservice: mdldialogoutletservice,            private viewcontainerref: viewcontainerref         ) {          this.dilalogouletservice.setdefaultviewcontainerref(this.viewcontainerref);      }       ngoninit() {         this.orderdate = this.raworderdate.toisostring().slice(0,10);          this.route.params.foreach((params: params) => {            this.from = params['from'];         });          this.ordercart = <orderitemwithsizerunboxes[]>this.collectiondataservice.getordercart();         this.ordercartsizerunboxes = this.collectiondataservice.getordercartsizerrunboxes();         this.ordercart.map(orderitem => {               orderitem.imagesrc = this.sanitizer.bypasssecuritytrustresourceurl("/template/images/"+orderitem.itemid+".jpg");               orderitem.sizerunboxes = this.ordercartsizerunboxes.filter(sritem => sritem.orderitemid === orderitem.idorderitems);            });          this.collectiondataservice.            getcustomers()            .then(customers => this.customers = customers);      }   } 

and template put:

<button #sendorderbutton (click)="sendorderdialog.show()" mdl-button mdl-button-type="icon" mdl-ripple>         <mdl-icon>send</mdl-icon>      </button>      <mdl-dialog #sendorderdialog  [mdl-dialog-config]="{            clickoutsidetoclose: true,            styles:{'width': '300px'},            ismodal:true,            openfrom: sendorderbutton,            entertransitionduration: 400,            leavetransitionduration: 400}">      // ...      </mdl-dialog> 

with template outlet in body element of app.

if remove configuration:

<button #sendorderbutton (click)="sendorderdialog.show()" mdl-button mdl-button-type="icon" mdl-ripple>         <mdl-icon>send</mdl-icon>      </button>      <mdl-dialog #sendorderdialog> 

the dialog starts work.

following michael's example here, tried import these classes in component:

  import { mdldialogcomponent } '../../node_modules/angular2-mdl/components/dialog/index';   import { mdldialogreference } '../../node_modules/angular2-mdl/components/dialog/mdl-dialog.service'; 

but error persists. missing?

edit here app.module:

import { ngmodule, locale_id } '@angular/core';   import { browsermodule } '@angular/platform-browser';   import { formsmodule, reactiveformsmodule } '@angular/forms';   import { httpmodule } '@angular/http';    import { mdlmodule } 'angular2-mdl';   import { mdlpopovermodule } '@angular2-mdl-ext/popover';   import { mdlselectmodule } '@angular2-mdl-ext/select';    import './rxjs-extensions';    import { appcomponent } './app.component';   import { mainpagecomponent } './mainpage/mainpage.component';   import { viewercomponent } './viewer/viewer.component';   import { productdetails } './productdetails/productdetails.component';   import { newitem } './newitem/newitem.component';   import { ordercart } './ordercart/ordercart.component';   import { statistics } './statistics/statistics.component';    import { approutingmodule } './app.routes';    import { collectiondataservice } './services/collectiondata.service';   import { customersearchpipe } './pipes/customer-search.pipe';   import { ordersearchpipe } './pipes/order-search.pipe';    import { inmemorywebapimodule } 'angular-in-memory-web-api';   import { inmemorydataservice } './services/in-memory-data.service';    import { highlightdirective } './highlight.directive';   import { hammergesturesdirective } './hammergestures.directive';     @ngmodule({      imports: [         browsermodule,         formsmodule,         reactiveformsmodule,         approutingmodule,         mdlmodule,         mdlpopovermodule,         mdlselectmodule,         httpmodule,         inmemorywebapimodule.forroot(inmemorydataservice),      ],      declarations: [         appcomponent,         mainpagecomponent,         viewercomponent,         productdetails,         newitem,         ordercart,         statistics,         customersearchpipe,         ordersearchpipe,         highlightdirective,         hammergesturesdirective,      ],      providers: [         { provide: locale_id, usevalue: "it-it" },         collectiondataservice      ],      bootstrap: [ appcomponent ]   })   export class appmodule { } 

question solved upgrading angular2-mdl module version 2.4.0.