angular कोणीय 2.0 के साथ कोणीय 2.0 सामग्री एमडीडियलॉग का कार्य उदाहरण



material-design angular-material (1)

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

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

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

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

Plunkr : Plunkr

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

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

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

चरण 2: systemjs.config.js कॉन्फ़िगर 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: चरण 4 से घटक को declarations और entryComponents अपने NgModule सजावट के entryComponents सरणी जोड़ें:

@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

खींचने योग्य संवाद ( मैं एक MatDialog draggable / कोणीय सामग्री कैसे बना सकते हैं )

Plunkr

यह भी देखें

मैं एक पीओसी ऐप पर काम कर रहा हूं, और मैं MdDialog घटक काम करने की कोशिश कर रहा हूं। क्या किसी के पास MdDialog ओपन विधि को पास करने का एक उदाहरण है?

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

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





angular-material