docs: fix code style (#45527)

I have removed unnecessary code from the components & i initialize the
form in OnInit function (life cycle). I think initilization of forms and
getting data from service must be done inside ngOnInit.

PR Close #45527

aio/content/examples/getting-started/src/app/product-list/product-list.component.1.ts

@@ -8,7 +8,7 @@ import { products } from '../products';
 })
 export class ProductListComponent {
 
-  products = products;
+  products = [...products];
 
   share() {
     window.alert('The product has been shared!');

aio/content/examples/getting-started/src/app/product-list/product-list.component.ts

@@ -10,7 +10,7 @@ import { products } from '../products';
 // #docregion on-notify
 export class ProductListComponent {
 
-  products = products;
+  products = [...products];
 
   share() {
     window.alert('The product has been shared!');

aio/content/examples/getting-started/src/app/shipping/shipping.component.1.ts

@@ -7,6 +7,4 @@ import { Component } from '@angular/core';
 })
 export class ShippingComponent {
 
-  constructor() { }
-
 }

aio/content/examples/getting-started/src/app/shipping/shipping.component.ts

@@ -1,7 +1,8 @@
 // #docplaster
 // #docregion imports
-import { Component } from '@angular/core';
+import { Component, OnInit } from '@angular/core';
 
+import { Observable } from 'rxjs';
 import { CartService } from '../cart.service';
 // #enddocregion
 
@@ -11,15 +12,18 @@ import { CartService } from '../cart.service';
   styleUrls: ['./shipping.component.css']
 })
 // #docregion props
-export class ShippingComponent {
+export class ShippingComponent implements OnInit {
 
-  shippingCosts = this.cartService.getShippingPrices();
+  shippingCosts!: Observable<{ type: string, price: number }[]>;
 // #enddocregion props
 
 // #docregion inject-cart-service
   constructor(private cartService: CartService) { }
 // #enddocregion inject-cart-service
+// #docregion props
 
+  ngOnInit(): void {
+    this.shippingCosts =  this.cartService.getShippingPrices();
+  }
 
-// #docregion props
 }

aio/content/start/start-data.md

@@ -266,7 +266,8 @@ This section guides you through modifying the `ShippingComponent` to retrieve sh
 
     <code-example header="src/app/shipping/shipping.component.ts" path="getting-started/src/app/shipping/shipping.component.ts" region="inject-cart-service"></code-example>
 
-1.  Define a `shippingCosts` property that sets the `shippingCosts` property using the `getShippingPrices()` method from the `CartService`.
+1. Define a `shippingCosts` property that sets the `shippingCosts` property using the `getShippingPrices()` method from the `CartService`.
+   Initialize the `shippingCosts` property inside `ngOnInit()` method.
 
     <code-example header="src/app/shipping/shipping.component.ts" path="getting-started/src/app/shipping/shipping.component.ts" region="props"></code-example>