docs: Use ngOnInit to fetch data from services in the getting started guide (#32273)

Call data services inside ngOnInit interface implementation of components.

closes #32048

PR Close #32273

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

@@ -1,6 +1,6 @@
 // #docplaster
 // #docregion imports
-import { Component } from '@angular/core';
+import { Component, OnInit } from '@angular/core';
 import { CartService } from '../cart.service';
 // #enddocregion imports
 
@@ -10,12 +10,14 @@ import { CartService } from '../cart.service';
   styleUrls: ['./cart.component.css']
 })
 // #docregion props-services, submit
-export class CartComponent {
+export class CartComponent implements OnInit {
   items;
 
   constructor(
     private cartService: CartService
-  ) {
+  ) { }
+
+  ngOnInit() {
     this.items = this.cartService.getItems();
   }
 }

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

@@ -1,6 +1,6 @@
 // #docplaster
 // #docregion imports
-import { Component } from '@angular/core';
+import { Component, OnInit } from '@angular/core';
 
 import { CartService } from '../cart.service';
 // #enddocregion
@@ -11,7 +11,7 @@ import { CartService } from '../cart.service';
   styleUrls: ['./shipping.component.css']
 })
 // #docregion props, ctor
-export class ShippingComponent {
+export class ShippingComponent implements OnInit {
   shippingCosts;
 // #enddocregion props
 
@@ -19,10 +19,12 @@ export class ShippingComponent {
   constructor(
     private cartService: CartService
   ) {
-// #enddocregion inject-cart-service
-    this.shippingCosts = this.cartService.getShippingPrices();
-// #docregion inject-cart-service
   }
 // #enddocregion inject-cart-service
+
+  ngOnInit() {
+    this.shippingCosts = this.cartService.getShippingPrices();
+  }
+
 // #docregion props
 }