docs: added svg example (#30559)

Fixes #30441

PR Close #30559

aio/content/examples/template-syntax/src/app/app.module.ts

@@ -8,6 +8,7 @@ import { ClickDirective, ClickDirective2 } from './click.directive';
 import { HeroFormComponent }      from './hero-form.component';
 import { heroSwitchComponents }   from './hero-switch.components';
 import { SizerComponent }         from './sizer.component';
+import { SvgComponent }           from './svg.component';
 
 @NgModule({
   imports: [
@@ -22,7 +23,8 @@ import { SizerComponent }         from './sizer.component';
     heroSwitchComponents,
     ClickDirective,
     ClickDirective2,
-    SizerComponent
+    SizerComponent,
+    SvgComponent
   ],
   bootstrap: [ AppComponent ]
 })

aio/content/examples/template-syntax/src/app/svg.component.css

@@ -0,0 +1,4 @@
+svg {
+  display: block;
+  width: 100%;
+}

aio/content/examples/template-syntax/src/app/svg.component.svg

@@ -0,0 +1,6 @@
+<svg>
+  <g>
+    <rect x="0" y="0" width="100" height="100" [attr.fill]="fill" (click)="changeColor()" />
+    <text x="120" y="50">click the rectangle to change the fill color</text>
+  </g>
+</svg>

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

@@ -0,0 +1,17 @@
+import { Component } from '@angular/core';
+
+@Component({
+  selector: 'app-svg',
+  templateUrl: './svg.component.svg',
+  styleUrls: ['./svg.component.css']
+})
+export class SvgComponent {
+  fill = 'rgb(255, 0, 0)';
+
+  changeColor() {
+    const r = Math.floor(Math.random() * 256);
+    const g = Math.floor(Math.random() * 256);
+    const b = Math.floor(Math.random() * 256);
+    this.fill = `rgb(${r}, ${g}, ${b})`;
+  }
+}