docs: align code in `product-example.component.*.ts` files (#42155)

This commit aligns the code in `product-alerts.component.ts` with
[product-alerts.component.1.ts][1], since both files are supposed to
represent the same component in different points in time. It also makes
the necessary changes in the respective templates.

This is a follow-up to #41999.

[1]: e86a1d3441/aio/content/examples/getting-started/src/app/product-alerts/product-alerts.component.1.ts (L18)

PR Close #42155

aio/content/examples/getting-started/src/app/product-alerts/product-alerts.component.1.html

@@ -1,3 +1,3 @@
-<p *ngIf="product.price > 700">
+<p *ngIf="product && product.price > 700">
   <button>Notify Me</button>
 </p>

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

@@ -1,3 +1,3 @@
-<p *ngIf="product.price > 700">
+<p *ngIf="product && product.price > 700">
   <button (click)="notify.emit()">Notify Me</button>
 </p>

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

@@ -13,6 +13,6 @@ import { Product } from '../products';
 })
 // #docregion input-output
 export class ProductAlertsComponent {
-  @Input() product!: Product;
+  @Input() product: Product|undefined;
   @Output() notify = new EventEmitter();
 }