docs: standardize component decorator placeholders in markdown

Updates `@Component({ ... })` to `@Component({/*...*/})` across
documentation examples for consistency and clearer formatting.

Author: MeAkib

adev/src/content/best-practices/style-guide.md

@@ -197,7 +197,7 @@ ensures that the value set by Angular is not overwritten.
 
 ```ts
 @Component({
-  /* ... */
+  /*...*/
 })
 export class UserProfile {
   readonly userId = input();
@@ -211,7 +211,7 @@ advice applies to output properties and queries, but not input properties.
 
 ```ts
 @Component({
-  /* ... */
+  /*...*/
 })
 export class UserProfile {
   @Output() readonly userSaved = new EventEmitter<void>();
@@ -276,7 +276,7 @@ then delegate to more specific behaviors based on the event details:
 
 ```ts
 @Component({
-  /* ... */
+  /*...*/
 })
 class RichText {
   handleKeydown(event: KeyboardEvent) {
@@ -323,7 +323,7 @@ your class, import and `implement` these interfaces to ensure that the methods a
 import {Component, OnInit} from '@angular/core';
 
 @Component({
-  /* ... */
+  /*...*/
 })
 export class UserProfile implements OnInit {
   // The `OnInit` interface ensures this method is named correctly.

adev/src/content/guide/components/anatomy-of-components.md

@@ -97,8 +97,8 @@ You show a component by creating a matching HTML element in the template of _oth
 export class ProfilePhoto { }
 
 @Component({
-imports: [ProfilePhoto],
-template: `<profile-photo />`
+  imports: [ProfilePhoto],
+  template: `<profile-photo />`
 })
 export class UserProfile { }
 ```

adev/src/content/guide/components/dom-apis.md

@@ -7,7 +7,9 @@ directly interact with a component's DOM. Components can inject ElementRef to ge
 component's host element:
 
 ```ts
-@Component({...})
+@Component({
+  /*...*/
+})
 export class ProfilePhoto {
   constructor() {
     const elementRef = inject(ElementRef);
@@ -23,7 +25,9 @@ You can use Angular's `afterEveryRender` and `afterNextRender` functions to regi
 callback** that runs when Angular has finished rendering the page.
 
 ```ts
-@Component({...})
+@Component({
+  /*...*/
+})
 export class ProfilePhoto {
   constructor() {
     const elementRef = inject(ElementRef);

adev/src/content/guide/components/inheritance.md

@@ -12,7 +12,9 @@ export class ListboxBase {
   value: string;
 }
 
-@Component({ ... })
+@Component({
+  /*...*/
+})
 export class CustomListbox extends ListboxBase {
   // CustomListbox inherits the `value` property.
 }
@@ -70,12 +72,16 @@ and their own.
 If a base class injects dependencies as constructor parameters, the child class must explicitly class these dependencies to `super`.
 
 ```ts
-@Component({ ... })
+@Component({
+  /*...*/
+})
 export class ListboxBase {
-  constructor(private element: ElementRef) { }
+  constructor(private element: ElementRef) {}
 }
 
-@Component({ ... })
+@Component({
+  /*...*/
+})
 export class CustomListbox extends ListboxBase {
   constructor(element: ElementRef) {
     super(element);
@@ -90,15 +96,19 @@ implements `ngOnInit` _overrides_ the base class's implementation. If you want t
 class's lifecycle method, explicitly call the method with `super`:
 
 ```ts
-@Component({ ... })
+@Component({
+  /*...*/
+})
 export class ListboxBase {
   protected isInitialized = false;
   ngOnInit() {
     this.isInitialized = true;
   }
 }
 
-@Component({ ... })
+@Component({
+  /*...*/
+})
 export class CustomListbox extends ListboxBase {
   override ngOnInit() {
     super.ngOnInit();

adev/src/content/guide/components/inputs.md

@@ -294,7 +294,9 @@ TIP: While the Angular team recommends using the signal-based `input` function f
 You can alternatively declare component inputs by adding the `@Input` decorator to a property:
 
 ```ts {highlight:[3]}
-@Component({...})
+@Component({
+  /*...*/
+})
 export class CustomSlider {
   @Input() value = 0;
 }
@@ -315,7 +317,9 @@ The `@Input` decorator accepts a config object that lets you change the way that
 You can specify the `required` option to enforce that a given input must always have a value.
 
 ```ts {highlight:[3]}
-@Component({...})
+@Component({
+  /*...*/
+})
 export class CustomSlider {
   @Input({required: true}) value = 0;
 }
@@ -346,7 +350,9 @@ function trimString(value: string | undefined) {
 You can specify the `alias` option to change the name of an input in templates.
 
 ```ts {highlight:[3]}
-@Component({...})
+@Component({
+  /*...*/
+})
 export class CustomSlider {
   @Input({alias: 'sliderValue'}) value = 0;
 }

adev/src/content/guide/components/lifecycle.md

@@ -256,7 +256,9 @@ next phase.
 ```ts
 import {Component, ElementRef, afterNextRender} from '@angular/core';
 
-@Component({...})
+@Component({
+  /*...*/
+})
 export class UserProfile {
   private prevPadding = 0;
   private elementHeight = 0;
@@ -281,7 +283,7 @@ export class UserProfile {
         if (didWrite) {
           this.elementHeight = nativeElement.getBoundingClientRect().height;
         }
-      }
+      },
     });
   }
 }

adev/src/content/guide/components/programmatic-rendering.md

@@ -20,10 +20,10 @@ chunks automatically and loaded only when necessary, based on the configured tri
 template.
 
 ```angular-ts
-@Component({ ... })
+@Component({/*...*/})
 export class AdminBio { /* ... */ }
 
-@Component({ ... })
+@Component({/*...*/})
 export class StandardBio { /* ... */ }
 
 @Component({

adev/src/content/guide/components/queries.md

@@ -150,7 +150,7 @@ In some cases, especially with `viewChild`, you know with certainty that a speci
 
 ```ts
 @Component({
-  /* ... */
+  /*...*/
 })
 export class CustomCard {
   header = viewChild.required(CustomCardHeader);

adev/src/content/guide/di/overview.md

@@ -96,7 +96,9 @@ export class Navbar {
 You can inject dependencies during construction of a component, directive, or service. The call to [`inject`](/api/core/inject) can appear in either the `constructor` or in a field initializer. Here are some common examples:
 
 ```ts
-@Component({...})
+@Component({
+  /*...*/
+})
 export class MyComponent {
   // ✅ In class field initializer
   private service = inject(MyService);

adev/src/content/guide/forms/reactive-forms.md

@@ -451,7 +451,7 @@ import {
 } from '@angular/forms';
 
 @Component({
-  /* ... */
+  /*...*/
 })
 export class UnifiedEventsBasicComponent {
   form = new FormGroup({
@@ -601,7 +601,9 @@ When updating form controls programmatically, you have precise control over how
 By default `emitEvent: true`, any change to a control emits events through the `valueChanges` and `statusChanges` observables. Setting `emitEvent: false` suppresses these emissions, which is useful when setting values programmatically without triggering reactive behavior like auto-save, avoiding circular updates between controls, or performing bulk updates where events should emit only once at the end.
 
 ```ts
-@Component({/* ... */})
+@Component({
+  /* ... */
+})
 export class BlogPostEditor {
   postForm = new FormGroup({
     title: new FormControl(''),
@@ -610,16 +612,15 @@ export class BlogPostEditor {
 
   constructor() {
     // Auto-save draft every time user types
-    this.postForm.valueChanges.subscribe(formValue => {
+    this.postForm.valueChanges.subscribe((formValue) => {
       this.autosaveDraft(formValue);
     });
   }
 
   loadExistingDraft(savedDraft: {title: string; content: string}) {
     // Restore draft without triggering auto-save
-    this.postForm.setValue(savedDraft, { emitEvent: false });
+    this.postForm.setValue(savedDraft, {emitEvent: false});
   }
-
 }
 ```