docs: enhance what is angular section spacing (#43241)

PR Close #43241

aio/content/examples/what-is-angular/src/app/hello-world-bindings/hello-world-bindings.component.html

@@ -1,7 +1,15 @@
 <!-- #docregion event-binding -->
-<button (click)="sayMessage()" [disabled]="canClick">Trigger alert message</button>
+<button
+  [disabled]="canClick"
+  (click)="sayMessage()">
+  Trigger alert message
+</button>
 <!-- #enddocregion -->
 <!-- #docregion bindings -->
-<p [id]="sayHelloId" [style.color]="fontColor">You can set my color in the component!</p>
+<p
+  [id]="sayHelloId"
+  [style.color]="fontColor">
+  You can set my color in the component!
+</p>
 <!-- #enddocregion -->
-<p>My color is {{ fontColor }}</p>
+<p>My color is {{ fontColor }}</p>

aio/content/examples/what-is-angular/src/app/hello-world-bindings/hello-world-bindings.component.ts

@@ -5,13 +5,15 @@ import { Component } from '@angular/core';
   templateUrl: './hello-world-bindings.component.html'
 })
 export class HelloWorldBindingsComponent {
-    fontColor = 'blue';
-    sayHelloId = 1;
-    canClick = false;
-    message = 'Hello, World';
+  fontColor = 'blue';
+  sayHelloId = 1;
+  canClick = false;
+  message = 'Hello, World';
+
 // #docregion method
-    sayMessage() {
-        alert(this.message);
-    }
+  sayMessage() {
+    alert(this.message);
+  }
 // #enddocregion
+
 }

aio/content/examples/what-is-angular/src/app/hello-world-di/hello-world-di.component.html

@@ -1,3 +1,5 @@
 <h2>Hello World: Dependency Injection</h2>
+
 <button (click)="onLogMe()">Log me!</button>
-<p>Be sure to open the console to view the output!</p>
+
+<p>Be sure to open the console to view the output!</p>

aio/content/examples/what-is-angular/src/app/hello-world-di/hello-world-di.component.ts

@@ -8,8 +8,7 @@ import { Logger } from '../logger.service';
 export class HelloWorldDependencyInjectionComponent  {
   count = 0;
 
-  constructor(private logger: Logger) {
-  }
+  constructor(private logger: Logger) { }
 
   onLogMe() {
     this.logger.writeCount(this.count);

aio/content/examples/what-is-angular/src/app/hello-world-ngif/hello-world-ngif.component.html

@@ -1,9 +1,13 @@
 <h2>Hello World: ngIf!</h2>
+
 <button (click)="onEditClick()">Make text editable!</button>
+
 <div *ngIf="canEdit; else noEdit">
     <p>You can edit the following paragraph.</p>
 </div>
+
 <ng-template #noEdit>
     <p>The following paragraph is read only. Try clicking the button!</p>
 </ng-template>
+
 <p [contentEditable]="canEdit">{{ message }}</p>

aio/content/examples/what-is-angular/src/app/hello-world-ngif/hello-world-ngif.component.ts

@@ -2,9 +2,9 @@
 import { Component } from '@angular/core';
 
 @Component({
-    selector: 'hello-world-ngif',
-    templateUrl: './hello-world-ngif.component.html'
-  })
+  selector: 'hello-world-ngif',
+  templateUrl: './hello-world-ngif.component.html'
+})
 export class HelloWorldNgIfComponent {
   message = 'I\'m read only!';
   canEdit = false;

aio/content/examples/what-is-angular/src/app/hello-world/hello-world.component.ts

@@ -7,7 +7,7 @@ import { Component } from '@angular/core';
   template: `
     <h2>Hello World</h2>
     <p>This is my first component!</p>
-    `,
+  `
 })
 export class HelloWorldComponent {
   // The code in this class drives the component's behavior.