"Fossies" - the Fresh Open Source Software Archive  

Source code changes of the file "src/lib/dialog/dialog.md" between
material2-7.3.4.tar.gz and material2-7.3.5.tar.gz

About: material2 offers Material Design components for Angular.

dialog.md  (material2-7.3.4):dialog.md  (material2-7.3.5)
skipping to change at line 55 skipping to change at line 55
```ts ```ts
@NgModule({ @NgModule({
providers: [ providers: [
{provide: MAT_DIALOG_DEFAULT_OPTIONS, useValue: {hasBackdrop: false}} {provide: MAT_DIALOG_DEFAULT_OPTIONS, useValue: {hasBackdrop: false}}
] ]
}) })
``` ```
### Sharing data with the Dialog component. ### Sharing data with the Dialog component.
If you want to share data with your dialog, you can use the `data` option to pas If you want to share data with your dialog, you can use the `data`
s information to the dialog component. option to pass information to the dialog component.
```ts ```ts
let dialogRef = dialog.open(YourDialog, { let dialogRef = dialog.open(YourDialog, {
data: { name: 'austin' }, data: { name: 'austin' },
}); });
``` ```
To access the data in your dialog component, you have to use the MAT_DIALOG_DATA injection token: To access the data in your dialog component, you have to use the MAT_DIALOG_DATA injection token:
```ts ```ts
skipping to change at line 83 skipping to change at line 84
export class YourDialog { export class YourDialog {
constructor(@Inject(MAT_DIALOG_DATA) public data: any) { } constructor(@Inject(MAT_DIALOG_DATA) public data: any) { }
} }
``` ```
<!-- example(dialog-data) --> <!-- example(dialog-data) -->
### Dialog content ### Dialog content
Several directives are available to make it easier to structure your dialog cont ent: Several directives are available to make it easier to structure your dialog cont ent:
| Name | Description | Name | Description
| |
|-----------------------|------------------------------------------------------- |------------------------|------------------------------------------------------
--------------------------------------------------------| ---------------------------------------------------------|
| `mat-dialog-title` | \[Attr] Dialog title, applied to a heading element (e .g., `<h1>`, `<h2>`) | | `mat-dialog-title` | \[Attr] Dialog title, applied to a heading element (e .g., `<h1>`, `<h2>`) |
| `<mat-dialog-content>` | Primary scrollable content of the dialog | `<mat-dialog-content>` | Primary scrollable content of the dialog.
| |
| `<mat-dialog-actions>` | Container for action buttons at the bottom of the dia | `<mat-dialog-actions>` | Container for action buttons at the bottom of the dia
log | log. Button alignment can be controlled via the `align` attribute which can be s
et to `end` and `center`. |
| `mat-dialog-close` | \[Attr] Added to a `<button>`, makes the button close the dialog with an optional result from the bound value.| | `mat-dialog-close` | \[Attr] Added to a `<button>`, makes the button close the dialog with an optional result from the bound value.|
For example: For example:
```html ```html
<h2 mat-dialog-title>Delete all</h2> <h2 mat-dialog-title>Delete all</h2>
<mat-dialog-content>Are you sure?</mat-dialog-content> <mat-dialog-content>Are you sure?</mat-dialog-content>
<mat-dialog-actions> <mat-dialog-actions>
<button mat-button mat-dialog-close>No</button> <button mat-button mat-dialog-close>No</button>
<!-- The mat-dialog-close directive optionally accepts a value as a result for the dialog. --> <!-- The mat-dialog-close directive optionally accepts a value as a result for the dialog. -->
<button mat-button [mat-dialog-close]="true">Yes</button> <button mat-button [mat-dialog-close]="true">Yes</button>
 End of changes. 3 change blocks. 
10 lines changed or deleted 11 lines changed or added

Home  |  About  |  Features  |  All  |  Newest  |  Dox  |  Diffs  |  RSS Feeds  |  Screenshots  |  Comments  |  Imprint  |  Privacy  |  HTTP(S)