docs: clean up `elements` example (indentation, import order, etc) (#24840)

PR Close #24840

aio/content/examples/elements/src/app/app.component.ts

@@ -8,19 +8,15 @@ import { PopupComponent } from './popup.component';
   selector: 'app-root',
   template: `
     <input #input value="Message">
-    <button (click)="popup.showAsComponent(input.value)">
+    <button (click)="popup.showAsComponent(input.value)">Show as component</button>
-        Show as component </button>
+    <button (click)="popup.showAsElement(input.value)">Show as element</button>
-    <button (click)="popup.showAsElement(input.value)">
+  `,
-        Show as element </button>
-  `
 })
-
 export class AppComponent {
-   constructor(private injector: Injector, public popup: PopupService) {
+  constructor(injector: Injector, public popup: PopupService) {
-    // on init, convert PopupComponent to a custom element
+    // Convert `PopupComponent` to a custom element.
-    const PopupElement =
+    const PopupElement = createNgElementConstructor(PopupComponent, {injector});
-createNgElementConstructor(PopupComponent, {injector: this.injector});
+    // Register the custom element with the browser.
-    // register the custom element with the browser.
+    customElements.define('popup-element', PopupElement);
-       customElements.define('popup-element', PopupElement);
   }
 }

aio/content/examples/elements/src/app/app.module.ts

@@ -1,22 +1,22 @@
 // #docregion
+import { NgModule } from '@angular/core';
 import { BrowserModule } from '@angular/platform-browser';
 import { BrowserAnimationsModule } from '@angular/platform-browser/animations';
-import { NgModule } from '@angular/core';
 
 import { AppComponent } from './app.component';
-import { PopupService } from './popup.service';
 import { PopupComponent } from './popup.component';
+import { PopupService } from './popup.service';
 
-// include the PopupService provider,
+// Include the `PopupService` provider,
-// but exclude PopupComponent from compilation,
+// but exclude `PopupComponent` from compilation,
-// because it will be added dynamically
+// because it will be added dynamically.
 
 @NgModule({
-  declarations: [AppComponent, PopupComponent],
   imports: [BrowserModule, BrowserAnimationsModule],
   providers: [PopupService],
+  declarations: [AppComponent, PopupComponent],
   bootstrap: [AppComponent],
   entryComponents: [PopupComponent],
 })
-
+export class AppModule {
-export class AppModule {}
+}