docs: add new getting started guide (#27684)

PR Close #27684

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

@@ -0,0 +1,15 @@
+import { Component, OnInit } from '@angular/core';
+
+@Component({
+  selector: 'app-cart',
+  templateUrl: './cart.component.html',
+  styleUrls: ['./cart.component.css']
+})
+export class CartComponent implements OnInit {
+
+  constructor() { }
+
+  ngOnInit() {
+  }
+
+}

aio/content/examples/getting-started/src/app/cart/cart.component.2.html

@@ -0,0 +1,15 @@
+<!-- #docplaster -->
+<!-- #docregion prices -->
+<h3>Cart</h3>
+<!-- #enddocregion prices -->
+
+<p>
+  <a routerLink="/shipping">Shipping Prices</a>
+</p>
+<!-- #docregion prices -->
+
+<div class="cart-item" *ngFor="let item of items">
+  <span>{{ item.name }} </span>
+  <span>{{ item.price | currency }}</span>
+</div>
+<!-- #enddocregion prices -->

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

@@ -0,0 +1,21 @@
+// #docplaster
+// #docregion imports
+import { Component } from '@angular/core';
+import { CartService } from '../cart.service';
+// #enddocregion imports
+
+@Component({
+  selector: 'app-cart',
+  templateUrl: './cart.component.html',
+  styleUrls: ['./cart.component.css']
+})
+// #docregion inject-cart, items, submit
+export class CartComponent {
+// #enddocregion inject-cart
+  items;
+// #docregion inject-cart
+
+  constructor(
+    private cartService: CartService
+  ) { }
+}

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

@@ -0,0 +1,21 @@
+// #docplaster
+// #docregion imports
+import { Component } from '@angular/core';
+import { CartService } from '../cart.service';
+// #enddocregion imports
+
+@Component({
+  selector: 'app-cart',
+  templateUrl: './cart.component.html',
+  styleUrls: ['./cart.component.css']
+})
+// #docregion props-services, submit
+export class CartComponent {
+  items;
+
+constructor(
+    private cartService: CartService
+  ) {
+    this.items = this.cartService.getItems();
+  }
+}

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

@@ -0,0 +1,28 @@
+<!-- #docplaster -->
+<!-- #docregion checkout-form-1, checkout-form-2 -->
+<h3>Cart</h3>
+
+<p>
+  <a routerLink="/shipping">Shipping Prices</a>
+</p>
+
+<div class="cart-item" *ngFor="let item of items">
+  <span>{{ item.name }} </span>
+  <span>{{ item.price | currency }}</span>
+</div>
+
+<form [formGroup]="checkoutForm" (ngSubmit)="onSubmit(checkoutForm.value)">
+<!-- #enddocregion checkout-form-1 -->  
+  <div>
+    <label>Name</label>
+    <input type="text" formControlName="name">
+  </div>
+
+  <div>
+    <label>Address</label>
+    <input type="text" formControlName="address">
+  </div>
+
+  <button class="button" type="submit">Purchase</button>
+<!-- #docregion checkout-form-1 -->  
+</form>

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

@@ -0,0 +1,40 @@
+// #docplaster
+// #docregion imports
+import { Component } from '@angular/core';
+import { FormBuilder } from '@angular/forms';
+
+import { CartService } from '../cart.service';
+// #enddocregion imports
+
+@Component({
+  selector: 'app-cart',
+  templateUrl: './cart.component.html',
+  styleUrls: ['./cart.component.css']
+})
+// #docregion props-services, submit
+export class CartComponent {
+  items;
+  checkoutForm;
+
+  constructor(
+    private cartService: CartService,
+    private formBuilder: FormBuilder,
+    ) {
+      this.items = this.cartService.getItems();
+
+      this.checkoutForm = this.formBuilder.group({
+        name: '',
+        address: ''
+      });
+  }
+
+  // #enddocregion props-services
+  onSubmit(customerData) {
+    // Process checkout data here
+    console.warn('Your order has been submitted', customerData);
+
+    this.items = this.cartService.clearCart();
+    this.checkoutForm.reset();
+  }
+  // #docregion props-services
+}