docs: convert remaining @NgModule provider examples to bootstrapApplication (#32840)

(cherry picked from commit 267b658)

Author: yogeshwaran-c

src/cdk/overlay/overlay.md

@@ -97,11 +97,9 @@ The `FullscreenOverlayContainer` is an alternative to `OverlayContainer` that su
 displaying of overlay elements in
 [fullscreen mode](https://developer.mozilla.org/en-US/docs/Web/API/Element/requestFullScreen).
 
-`FullscreenOverlayContainer` can be enabled by providing it in your `NgModule`:
+`FullscreenOverlayContainer` can be enabled by providing it in your app config:
 ```ts
-@NgModule({
-  providers: [{provide: OverlayContainer, useClass: FullscreenOverlayContainer}],
-  // ...
-})
-export class MyModule { }
+bootstrapApplication(MyApp, {
+  providers: [{provide: OverlayContainer, useClass: FullscreenOverlayContainer}]
+});
 ```

src/material-experimental/README.md

@@ -30,15 +30,16 @@ component by following these steps:
    ...
    ```
 
-3. Import the `NgModule` for the component you want to use. For example, the checkbox:
+3. Import the component you want to use. For example, the checkbox:
 ```ts
-  import {MatCheckboxModule} from '@angular/material/checkbox';
+  import {Component} from '@angular/core';
+  import {MatCheckbox} from '@angular/material/checkbox';
 
-  @NgModule({
-    declarations: [MyComponent],
-    imports: [MatCheckboxModule],
+  @Component({
+    imports: [MatCheckbox],
+    // ...
   })
-  export class MyModule {}
+  export class MyComponent {}
 ```
 
 4. Use the components just as you would the normal Angular Material components. For example,

src/material/chips/chips.md

@@ -111,8 +111,8 @@ By default, chips are displayed horizontally. To stack chips vertically, apply t
 
 Use the `MAT_CHIPS_DEFAULT_OPTIONS` token to specify default options for the chips module.
 
-```html
-@NgModule({
+```ts
+bootstrapApplication(MyApp, {
   providers: [
     {
       provide: MAT_CHIPS_DEFAULT_OPTIONS,
@@ -121,7 +121,7 @@ Use the `MAT_CHIPS_DEFAULT_OPTIONS` token to specify default options for the chi
       }
     }
   ]
-})
+});
 ```
 
 ### Interaction Patterns

src/material/form-field/form-field.md

@@ -27,11 +27,11 @@ Out of the box, if you do not specify an `appearance` for the `<mat-form-field>`
 appearance for your app.
 
 ```ts
-@NgModule({
+bootstrapApplication(MyApp, {
   providers: [
     {provide: MAT_FORM_FIELD_DEFAULT_OPTIONS, useValue: {appearance: 'outline'}}
   ]
-})
+});
 ```
 
 <!-- example(form-field-appearance) -->
@@ -54,15 +54,15 @@ field control, or to `auto` to restore the default behavior.
 <!-- example(form-field-label) -->
 
 The floating label behavior can be adjusted globally by providing a value for
-`MAT_FORM_FIELD_DEFAULT_OPTIONS` in your application's root module. Like the `floatLabel` input,
+`MAT_FORM_FIELD_DEFAULT_OPTIONS` in your app config. Like the `floatLabel` input,
 the option can be either set to `always` or `auto`.
 
 ```ts
-@NgModule({
+bootstrapApplication(MyApp, {
   providers: [
     {provide: MAT_FORM_FIELD_DEFAULT_OPTIONS, useValue: {floatLabel: 'always'}}
   ]
-})
+});
 ```
 
 ### Hint labels

src/material/input/input.md

@@ -65,11 +65,11 @@ applies to all inputs. For convenience, `ShowOnDirtyErrorStateMatcher` is availa
 globally cause input errors to show when the input is dirty and invalid.
 
 ```ts
-@NgModule({
+bootstrapApplication(MyApp, {
   providers: [
     {provide: ErrorStateMatcher, useClass: ShowOnDirtyErrorStateMatcher}
   ]
-})
+});
 ```
 
 ### Auto-resizing `<textarea>` elements

src/material/select/select.md

@@ -139,11 +139,11 @@ applies to all inputs. For convenience, `ShowOnDirtyErrorStateMatcher` is availa
 globally cause input errors to show when the input is dirty and invalid.
 
 ```ts
-@NgModule({
+bootstrapApplication(MyApp, {
   providers: [
     {provide: ErrorStateMatcher, useClass: ShowOnDirtyErrorStateMatcher}
   ]
-})
+});
 ```
 
 ### Keyboard interaction

src/material/stepper/stepper.md

@@ -153,17 +153,17 @@ However, it can be overridden the same way as mentioned above.
 
 In order to use the custom step states, you must add the `displayDefaultIndicatorType` option to
 the global default stepper options which can be specified by providing a value for
-`STEPPER_GLOBAL_OPTIONS` in your application's root module.
+`STEPPER_GLOBAL_OPTIONS` in your app config.
 
 ```ts
-@NgModule({
+bootstrapApplication(MyApp, {
   providers: [
     {
       provide: STEPPER_GLOBAL_OPTIONS,
       useValue: { displayDefaultIndicatorType: false }
     }
   ]
-})
+});
 ```
 
 <!-- example(stepper-states) -->
@@ -177,14 +177,14 @@ errors via the `showError` option in the `STEPPER_GLOBAL_OPTIONS` injection toke
 will not affect steppers marked as `linear`.
 
 ```ts
-@NgModule({
+bootstrapApplication(MyApp, {
   providers: [
     {
       provide: STEPPER_GLOBAL_OPTIONS,
       useValue: { showError: true }
     }
   ]
-})
+});
 ```
 
 <!-- example(stepper-errors) -->
@@ -213,16 +213,14 @@ viewport.
 
 ### Localizing labels
 Labels used by the stepper are provided through `MatStepperIntl`. Localization of these messages
-can be done by providing a subclass with translated values in your application root module.
+can be done by providing a subclass with translated values in your app config.
 
 ```ts
-@NgModule({
-  imports: [MatStepperModule],
+bootstrapApplication(MyApp, {
   providers: [
     {provide: MatStepperIntl, useClass: MyIntl},
-  ],
-})
-export class MyApp {}
+  ]
+});
 ```
 
 <!-- example(stepper-intl) -->

src/youtube-player/README.md

@@ -8,8 +8,7 @@ File any bugs against the [angular/components repo](https://github.com/angular/c
 To install, run `ng add @angular/youtube-player`.
 
 ## Usage
-Import the component either by adding the `YouTubePlayerModule` to your app or by importing
-`YouTubePlayer` into a standalone component. Then add the `<youtube-player videoId="<your ID>"`
+Import `YouTubePlayer` into your component. Then add the `<youtube-player videoId="<your ID>"`
 to your template.
 
 ## Example
@@ -43,19 +42,16 @@ If you don't want it to be loaded, you can either control it on a per-component
 Or at a global level using the `YOUTUBE_PLAYER_CONFIG` injection token:
 
 ```typescript
-import {NgModule} from '@angular/core';
 import {YouTubePlayer, YOUTUBE_PLAYER_CONFIG} from '@angular/youtube-player';
 
-@NgModule({
-  imports: [YouTubePlayer],
+bootstrapApplication(YourApp, {
   providers: [{
     provide: YOUTUBE_PLAYER_CONFIG,
     useValue: {
       loadApi: false
     }
   }]
-})
-export class YourApp {}
+});
 ```
 
 ## Loading behavior
@@ -78,19 +74,16 @@ initialization, you can either pass in the `disablePlaceholder` input:
 Or set it at a global level using the `YOUTUBE_PLAYER_CONFIG` injection token:
 
 ```typescript
-import {NgModule} from '@angular/core';
 import {YouTubePlayer, YOUTUBE_PLAYER_CONFIG} from '@angular/youtube-player';
 
-@NgModule({
-  imports: [YouTubePlayer],
+bootstrapApplication(YourApp, {
   providers: [{
     provide: YOUTUBE_PLAYER_CONFIG,
     useValue: {
       disablePlaceholder: true
     }
   }]
-})
-export class YourApp {}
+});
 ```
 
 ### Placeholder image quality