docs: use inject() and bootstrapApplication in dialog, snack-bar, and bottom-sheet docs (#32839)

Author: yogeshwaran-c

src/cdk/dialog/dialog.md

@@ -50,9 +50,11 @@ in which they are contained. When closing, an optional result value can be provi
 value is forwarded as the result of the `closed` Observable.
 
 ```ts
+import {inject} from '@angular/core';
+
 @Component({/* ... */})
 export class YourDialog {
-  constructor(public dialogRef: DialogRef<string>) {}
+  dialogRef = inject<DialogRef<string>>(DialogRef);
 
   closeDialog() {
     this.dialogRef.close('Pizza!');
@@ -117,14 +119,14 @@ class MyDialogContainer extends CdkDialogContainer {}
 
 ### Specifying global configuration defaults
 Default dialog options can be specified by providing an instance of `DialogConfig` for
-`DEFAULT_DIALOG_CONFIG` in your application's root module.
+`DEFAULT_DIALOG_CONFIG` in your app config.
 
 ```ts
-@NgModule({
+bootstrapApplication(MyApp, {
   providers: [
     {provide: DEFAULT_DIALOG_CONFIG, useValue: {hasBackdrop: false}}
   ]
-})
+});
 ```
 
 ### Sharing data with the Dialog component.
@@ -139,15 +141,15 @@ const dialogRef = dialog.open(YourDialog, {
 Access the data in your dialog component with the `DIALOG_DATA` injection token:
 
 ```ts
-import {Component, Inject} from '@angular/core';
+import {Component, inject} from '@angular/core';
 import {DIALOG_DATA} from '@angular/cdk/dialog';
 
 @Component({
   selector: 'your-dialog',
   template: 'passed in {{ data.name }}',
 })
 export class YourDialog {
-  constructor(@Inject(DIALOG_DATA) public data: {name: string}) { }
+  data = inject<{name: string}>(DIALOG_DATA);
 }
 ```
 

src/material/bottom-sheet/bottom-sheet.md

@@ -37,15 +37,15 @@ const bottomSheetRef = bottomSheet.open(HobbitSheet, {
 Afterwards you can access the injected data using the `MAT_BOTTOM_SHEET_DATA` injection token:
 
 ```ts
-import {Component, Inject} from '@angular/core';
-import {MAT_BOTTOM_SHEET_DATA} from '../bottom-sheet';
+import {Component, inject} from '@angular/core';
+import {MAT_BOTTOM_SHEET_DATA} from '@angular/material/bottom-sheet';
 
 @Component({
   selector: 'hobbit-sheet',
   template: 'passed in {{ data.names }}',
 })
 export class HobbitSheet {
-  constructor(@Inject(MAT_BOTTOM_SHEET_DATA) public data: {names: string[]}) { }
+  data = inject<{names: string[]}>(MAT_BOTTOM_SHEET_DATA);
 }
 ```
 
@@ -54,11 +54,11 @@ Default bottom sheet options can be specified by providing an instance of `MatBo
 for `MAT_BOTTOM_SHEET_DEFAULT_OPTIONS` in your application's root module.
 
 ```ts
-@NgModule({
+bootstrapApplication(MyApp, {
   providers: [
     {provide: MAT_BOTTOM_SHEET_DEFAULT_OPTIONS, useValue: {hasBackdrop: false}}
   ]
-})
+});
 ```
 
 

src/material/dialog/dialog.md

@@ -29,9 +29,11 @@ in which they are contained. When closing, an optional result value can be provi
 value is forwarded as the result of the `afterClosed` Observable.
 
 ```ts
+import {inject} from '@angular/core';
+
 @Component({/* ... */})
 export class YourDialog {
-  constructor(public dialogRef: MatDialogRef<YourDialog>) { }
+  dialogRef = inject(MatDialogRef);
 
   closeDialog() {
     this.dialogRef.close('Pizza!');
@@ -41,14 +43,14 @@ export class YourDialog {
 
 ### Specifying global configuration defaults
 Default dialog options can be specified by providing an instance of `MatDialogConfig` for
-MAT_DIALOG_DEFAULT_OPTIONS in your application's root module.
+`MAT_DIALOG_DEFAULT_OPTIONS` in your app config.
 
 ```ts
-@NgModule({
+bootstrapApplication(MyApp, {
   providers: [
     {provide: MAT_DIALOG_DEFAULT_OPTIONS, useValue: {hasBackdrop: false}}
   ]
-})
+});
 ```
 
 ### Sharing data with the Dialog component.
@@ -64,15 +66,15 @@ let dialogRef = dialog.open(YourDialog, {
 To access the data in your dialog component, you have to use the MAT_DIALOG_DATA injection token:
 
 ```ts
-import {Component, Inject} from '@angular/core';
-import {MAT_DIALOG_DATA} from '../dialog';
+import {Component, inject} from '@angular/core';
+import {MAT_DIALOG_DATA} from '@angular/material/dialog';
 
 @Component({
   selector: 'your-dialog',
   template: 'passed in {{ data.name }}',
 })
 export class YourDialog {
-  constructor(@Inject(MAT_DIALOG_DATA) public data: {name: string}) { }
+  data = inject<{name: string}>(MAT_DIALOG_DATA);
 }
 ```
 

src/material/snack-bar/snack-bar.md

@@ -61,15 +61,15 @@ snackBar.openFromComponent(MessageArchivedComponent, {
 To access the data in your component, you have to use the `MAT_SNACK_BAR_DATA` injection token:
 
 ```ts
-import {Component, Inject} from '@angular/core';
-import {MAT_SNACK_BAR_DATA} from '../snack-bar';
+import {Component, inject} from '@angular/core';
+import {MAT_SNACK_BAR_DATA} from '@angular/material/snack-bar';
 
 @Component({
   selector: 'your-snackbar',
   template: 'passed in {{ data }}',
 })
 export class MessageArchivedComponent {
-  constructor(@Inject(MAT_SNACK_BAR_DATA) public data: string) { }
+  data = inject<string>(MAT_SNACK_BAR_DATA);
 }
 ```
 
@@ -91,11 +91,11 @@ If you want to override the default snack bar options, you can do so using the
 `MAT_SNACK_BAR_DEFAULT_OPTIONS` injection token.
 
 ```ts
-@NgModule({
+bootstrapApplication(MyApp, {
   providers: [
     {provide: MAT_SNACK_BAR_DEFAULT_OPTIONS, useValue: {duration: 2500}}
   ]
-})
+});
 ```
 
 ### Accessibility