I'm trying to use a mdl-dialog with my component as showed here: http://mseemann.io/angular2-mdl/dialogs-declarative
but the compiler says:
Can't bind to 'mdl-dialog-config' since it isn't a known property of 'mdl-dialog'.
- If 'mdl-dialog' is an Angular component and it has 'mdl-dialog-config' input, then verify that it is part of this module.
- If 'mdl-dialog' is a Web Component then add "CUSTOM_ELEMENTS_SCHEMA" to the '@NgModule.schemas' of this component to suppress this message.
My full component is:
import { Component, Input, OnInit, ViewContainerRef } from '@angular/core';
import { DomSanitizer } from '@angular/platform-browser';
import { Router, ActivatedRoute, Params } from '@angular/router';
import { OrderItem } from '../models/OrderItem';
import { SizerunBox } from '../models/SizerunBox';
import { Customer } from '../models/Customer';
import { CollectionDataService } from '../services/CollectionData.service';
import { MdlDialogOutletService, MdlDialogComponent, MdlDialogReference } from '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 into template I 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 the template outlet in the body element of the app.
If I remove the 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 to work.
Following Michael's example here, I tried to import these classes in my component:
import { MdlDialogComponent } from '../../node_modules/angular2-mdl/components/dialog/index';
import { MdlDialogReference } from '../../node_modules/angular2-mdl/components/dialog/mdl-dialog.service';
but the error persists. What am I missing?
EDIT Here my app.module:
import { NgModule, LOCALE_ID } from '@angular/core';
import { BrowserModule } from '@angular/platform-browser';
import { FormsModule, ReactiveFormsModule } from '@angular/forms';
import { HttpModule } from '@angular/http';
import { MdlModule } from 'angular2-mdl';
import { MdlPopoverModule } from '@angular2-mdl-ext/popover';
import { MdlSelectModule } from '@angular2-mdl-ext/select';
import './rxjs-extensions';
import { AppComponent } from './app.component';
import { MainpageComponent } from './mainpage/mainpage.component';
import { ViewerComponent } from './viewer/viewer.component';
import { ProductDetails } from './productdetails/productdetails.component';
import { NewItem } from './newitem/newitem.component';
import { OrderCart } from './ordercart/ordercart.component';
import { Statistics } from './statistics/statistics.component';
import { AppRoutingModule } from './app.routes';
import { CollectionDataService } from './services/CollectionData.service';
import { customerSearchPipe } from './pipes/customer-search.pipe';
import { orderSearchPipe } from './pipes/order-search.pipe';
import { InMemoryWebApiModule } from 'angular-in-memory-web-api';
import { InMemoryDataService } from './services/in-memory-data.service';
import { HighlightDirective } from './highlight.directive';
import { HammerGesturesDirective } from './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 to version 2.4.0.