16e3d7e96e
BREAKING CHANGES: - `ShadowDomStrategy` was removed. To specify the encapsulation of a component use `@View(encapsulation: ViewEncapsulation.NONE | ViewEncapsulation.EMULATED | ViewEncapsulation.NATIVE)` - The default encapsulation strategy is now `ViewEncapsulation.EMULATED` if a component contains styles and `ViewEncapsulation.NONE` if it does not. Before this was always `NONE`. - `ViewLoader` now returns the template as a string and the styles as a separate array
97 lines
2.1 KiB
TypeScript
97 lines
2.1 KiB
TypeScript
import {bootstrap, ElementRef, ComponentRef, Component, View} from 'angular2/bootstrap';
|
|
import {
|
|
MdDialog,
|
|
MdDialogRef,
|
|
MdDialogConfig
|
|
} from 'angular2_material/src/components/dialog/dialog';
|
|
import {UrlResolver} from 'angular2/src/services/url_resolver';
|
|
import {commonDemoSetup, DemoUrlResolver} from '../demo_common';
|
|
import {bind} from 'angular2/di';
|
|
import {isPresent} from 'angular2/src/facade/lang';
|
|
|
|
|
|
@Component({
|
|
selector: 'demo-app',
|
|
viewInjector: [MdDialog],
|
|
})
|
|
@View({
|
|
templateUrl: './demo_app.html',
|
|
directives: [],
|
|
})
|
|
class DemoApp {
|
|
dialog: MdDialog;
|
|
elementRef: ElementRef;
|
|
dialogRef: MdDialogRef;
|
|
dialogConfig: MdDialogConfig;
|
|
lastResult: string;
|
|
|
|
constructor(mdDialog: MdDialog, elementRef: ElementRef) {
|
|
this.dialog = mdDialog;
|
|
this.elementRef = elementRef;
|
|
this.dialogConfig = new MdDialogConfig();
|
|
|
|
this.dialogConfig.width = '60%';
|
|
this.dialogConfig.height = '60%';
|
|
this.lastResult = '';
|
|
}
|
|
|
|
open() {
|
|
if (isPresent(this.dialogRef)) {
|
|
return;
|
|
}
|
|
|
|
this.dialog.open(SimpleDialogComponent, this.elementRef, this.dialogConfig)
|
|
.then(ref => {
|
|
this.dialogRef = ref;
|
|
ref.instance.numCoconuts = 777;
|
|
|
|
ref.whenClosed.then(result => {
|
|
this.dialogRef = null;
|
|
this.lastResult = result;
|
|
});
|
|
});
|
|
}
|
|
|
|
close() {
|
|
this.dialogRef.close();
|
|
}
|
|
}
|
|
|
|
@Component({
|
|
selector: 'simple-dialog',
|
|
properties: ['numCoconuts'],
|
|
})
|
|
@View({
|
|
template: `
|
|
<h2>This is the dialog content</h2>
|
|
<p>There are {{numCoconuts}} coconuts.</p>
|
|
<p>Return: <input (input)="updateValue($event)"></p>
|
|
<button type="button" (click)="done()">Done</button>
|
|
`
|
|
})
|
|
class SimpleDialogComponent {
|
|
numCoconuts: number;
|
|
dialogRef: MdDialogRef;
|
|
toReturn: string;
|
|
|
|
constructor(dialogRef: MdDialogRef) {
|
|
this.numCoconuts = 0;
|
|
this.dialogRef = dialogRef;
|
|
this.toReturn = '';
|
|
}
|
|
|
|
updateValue(event) {
|
|
this.toReturn = event.target.value;
|
|
}
|
|
|
|
done() {
|
|
this.dialogRef.close(this.toReturn);
|
|
}
|
|
}
|
|
|
|
|
|
export function main() {
|
|
commonDemoSetup();
|
|
bootstrap(DemoApp, [bind(UrlResolver).toValue(new DemoUrlResolver())]);
|
|
}
|