angular - कोणीय 2.0 के साथ कोणीय 2.0 सामग्री MdDialog का कार्य उदाहरण



material-design angular-material (1)

मैं POC ऐप पर काम कर रहा हूं, और मैं MdDialog घटक को काम पर लाने की कोशिश कर रहा हूं। क्या किसी के पास इस बात का एक उदाहरण है कि MdDialog ओपन मेथड को क्या पास करना है?

कोणीय 2.0: https://github.com/angular/angular

कोणीय 2 सामग्री: https://github.com/angular/material2


कोणीय v4 और @ कोणीय / सामग्री 2.0.0-beta.12 पर अद्यतन करें

md उपसर्ग को mat में बदल दिया गया था

MatDialogModule बजाय MatDialogModule आयात करें

@angular/material अब सहकर्मी निर्भरता के रूप में @angular/cdk निर्भर करती है।

रिकैप : Plunkr

सामग्री संवाद + परिशिष्ट के लिए 8 कदम

चरण 1: पैकेज स्थापित करें

npm i --save @angular/material @angular/cdk @angular/animations

चरण 2: कॉन्फ़िगर systemjs.config.js

map: {
  ...
  '@angular/animations': 'npm:@angular/animations/bundles/animations.umd.js',
  '@angular/animations/browser': 'npm:@angular/animations/bundles/animations-browser.umd.js',
  '@angular/platform-browser/animations': 'npm:@angular/platform-browser/bundles/platform-browser-animations.umd.js',
  '@angular/material': 'npm:@angular/material/bundles/material.umd.js',
  '@angular/cdk': 'https://unpkg.com/@angular/cdk/bundles/cdk.umd.js',
  '@angular/cdk/a11y': 'https://unpkg.com/@angular/cdk/bundles/cdk-a11y.umd.js',
  '@angular/cdk/bidi': 'https://unpkg.com/@angular/cdk/bundles/cdk-bidi.umd.js',
  '@angular/cdk/coercion': 'https://unpkg.com/@angular/cdk/bundles/cdk-coercion.umd.js',
  '@angular/cdk/collections': 'https://unpkg.com/@angular/cdk/bundles/cdk-collections.umd.js',
  '@angular/cdk/keycodes': 'https://unpkg.com/@angular/cdk/bundles/cdk-keycodes.umd.js',
  '@angular/cdk/observers': 'https://unpkg.com/@angular/cdk/bundles/cdk-observers.umd.js',
  '@angular/cdk/overlay': 'https://unpkg.com/@angular/cdk/bundles/cdk-overlay.umd.js',
  '@angular/cdk/platform': 'https://unpkg.com/@angular/cdk/bundles/cdk-platform.umd.js',
  '@angular/cdk/portal': 'https://unpkg.com/@angular/cdk/bundles/cdk-portal.umd.js',
  '@angular/cdk/rxjs': 'https://unpkg.com/@angular/cdk/bundles/cdk-rxjs.umd.js',
  '@angular/cdk/scrolling': 'https://unpkg.com/@angular/cdk/bundles/cdk-scrolling.umd.js',
  '@angular/cdk/table': 'https://unpkg.com/@angular/cdk/bundles/cdk-table.umd.js',
  '@angular/cdk/stepper': 'https://unpkg.com/@angular/cdk/bundles/cdk-stepper.umd.js',
},

चरण 3: अपने मॉड्यूल में MatDialogModule आयात करें

import { MatDialogModule } from '@angular/material';
import { BrowserAnimationsModule } from '@angular/platform-browser/animations';

@NgModule({
  imports: [ 
    BrowserModule,
    BrowserAnimationsModule, <== required
    MatDialogModule <== here
  ],
  declarations: [ AppComponent],
  bootstrap: [ AppComponent ]
})
export class AppModule {}

चरण 4: वांछित संवाद घटक बनाएं जैसे:

@Component({
  selector: 'your-dialog-selector',
  template: `
  <h2>Hi! I am modal dialog!</h2>
  <button mat-raised-button (click)="dialogRef.close()">Close dialog</button>`
})
export class DialogComponent {
  constructor(public dialogRef: MdDialogRef<DialogComponent>) { }
}

चरण 5: घटक को अपने NgModule डेकोरेटर की declarations और entryComponents सरणियों के लिए चरण 4 से जोड़ें:

@NgModule({
  imports: [ BrowserModule, MatDialogModule ],
  declarations: [ AppComponent, DialogComponent ],
  entryComponents: [ DialogComponent ],
  bootstrap: [ AppComponent ]
})
export class AppModule {}

चरण 6: अपने घटक में इसका उपयोग करें:

@Component({
  selector: 'my-app',
  template: `<button mat-raised-button (click)="openDialog()">Open dialog</button>`,
})
export class App {

  constructor(public dialog: MatDialog) { }

  openDialog(key) {
    let dialogRef = this.dialog.open(DialogComponent);
  }
}

चरण 7 वांछित विषय चुनें:

<link href="https://unpkg.com/@angular/material/prebuilt-themes/deeppurple-amber.css" 
  rel="stylesheet">

अन्य विषय आप here पा सकते हैं

चरण 8

यदि आप मोडल के लिए डेटा पास करना चाहते हैं तो निम्नलिखित ( Plunker ) का उपयोग करें:

dialogRef.componentInstance.param1 = "test value";

अनुबंध

रूट किए गए संवाद: Plunkr

Draggable Dialog ( मैं कैसे एक MatDialog Draggable / कोणीय सामग्री बना सकता हूं )

Plunkr

यह सभी देखें





angular-material