docs(core): in template syntax guide, make SVG example more clear (#31356)

add e2e test for SVG template example
fix template syntax example app
- linting errors
- runtime exceptions
- template type errors
- deprecated type casting
- deprecated currency pipe example

Relates to #30559

PR Close #31356

aio/content/examples/template-syntax/src/app/hero-form.component.ts

@@ -1,5 +1,5 @@
 import { Component, Input, ViewChild } from '@angular/core';
-import { NgForm }                      from '@angular/forms';
+import { NgForm } from '@angular/forms';
 
 import { Hero } from './hero';
 
@@ -15,10 +15,11 @@ export class HeroFormComponent {
   @Input() hero: Hero;
   @ViewChild('heroForm', {static: false}) form: NgForm;
 
+  // tslint:disable-next-line:variable-name
   private _submitMessage = '';
 
   get submitMessage() {
-    if (!this.form.valid) {
+    if (this.form && !this.form.valid) {
       this._submitMessage = '';
     }
     return this._submitMessage;