Angular - SVG as Templates

---

---

Scalable Vector Graphics, in short SVG, is used to create vector-based graphics in XML format. XML is a markup language like HTML that stores and transfers data on the web.

SVG provides a framework for creating rich graphics with declarative programming. Angular template can be applied to the SVG to create dynamic graphics with minimal effort.

In this chapter, we will understand how to create SVG as an Angular Template.

Creating SVG as a Template

Let us create a simple bar chart in SVG format and use it in our template and then update the bar chart dynamically through template input variables.

Step 1: Create a new application using angular CLI as shown below −

$ ng new my-app

Step 2: Create a component, chart using angular CLI as shown below −

$ ng generate component chart 
CREATE src/app/chart/chart.component.css (0 bytes)
CREATE src/app/chart/chart.component.html (20 bytes)
CREATE src/app/chart/chart.component.spec.ts (552 bytes)
CREATE src/app/chart/chart.component.ts (198 bytes)

Step 3: Next, open the component template file, chart.component.html and add a static bar chart in SVG.

<svg class="chart" width="420" height="150">
   <title id="title">Bar chart</title>
   <desc id="desc">Fruits count</desc>
   <g class="bar">
      <rect width="50" height="19"></rect>
      <text x="55" y="9.5" dy=".35em">5 Apples</text>
   </g>
   <g class="bar">
      <rect width="100" height="19" y="20"></rect>
      <text x="105" y="28" dy=".35em">10 Orange</text>
   </g>
   <g class="bar">
      <rect width="40" height="19" y="40"></rect>
      <text x="45" y="48" dy=".35em">2 Lemons</text>
  </g>
</svg>

Step 4: Next, open the component's style file, chart.component.css and add below css to style the SVG bar chart.

.bar {
   fill: red;
   height: 21px;
   transition: fill .3s ease;
   cursor: pointer;
   font-family: Helvetica, sans-serif;
}
.bar text {
   color: black;
}
.bar:hover,
.bar:focus {
   fill: black;
}
.bar:hover text,
.bar:focus text {
   fill: red;

Step 5: Next, open the app component template, app.component.html and add our chart component.

<app-chart />

Step 6: Run the application and check whether the chart is rendered properly.

Step 7: Next, create an interface, Fruit to hold the chart data.

$ ng generate interface Fruit
CREATE src/app/fruit.ts (27 bytes)

Step 8: Update the interface with name and count value.

export interface Fruit {
   name: string;
   count: number;
}

Step 9: Import fruit interface in the chart component.

import { Fruit } from '../fruit'

Step 10: Add sample fruit data in the chart component.

fruits : Fruit[] = [
   {
      name: 'Apple',
      count: 10
   },
   {
      name: 'Orange',
      count: 20
   },
   {
      name: 'Lemon',
      count: 5
   }
]

Step 11: The complete listing of the component is as follows:

import { Component } from '@angular/core';
import { Fruit } from '../fruit'

@Component({
   selector: 'app-chart',
   templateUrl: './chart.component.html',
   styleUrls: ['./chart.component.css']
})
export class ChartComponent {
   fruits : Fruit[] = [
   {
      name: 'Apple',
      count: 10
   },
   {
      name: 'Orange',
      count: 20
   },
   {
      name: 'Lemon',
      count: 5
   }
   ]
}

Step 12: Next, open the component's template file and update the bar chart to use the fruit template variable from the component as shown below −

<svg class="chart" width="420" height="150">
   <g class="bar" *ngFor="let fruit of fruits; let i = index;">
      <rect [attr.width]="fruit.count * 10" height="19" [attr.y]="0 + (i * 20)"></rect>
      <text [attr.x]="fruit.count * 10 + 5" [attr.y]="10 + (i * 20)" dy=".35em">
         {{ fruit.count }} {{ fruit.name }}
      </text>
   </g>
</svg>

Here,

• ngFor (structural directive) is used to loop over the fruits.

• Attribute binding ([attr.width], [attr.x] & [attr-y]) is used along with template statement to dynamically add each bar in the chart based on the fruits template variable

• fruit.count * 10 is a template statement, which sets the width of the bar based on the fruit count

• 0 + (i * 20) is another template statement, which sets the y position of the bar in the chart.

• fruit.count * 10 + 5 is another template statement, which sets x position of the text at the end of the bar in the chart.

• 10 + (i * 20) is another template statement, which sets the y position of the text at the end of the bar in the chart.

Step 13: Run the application and check whether the chart is rendered properly.

Summary

SVG graphics can be done easily through angular templates. We can combine it with form programming to dynamically set the style of the bar chart and extend the bar chart to support another type of chart as well. SVG chart is just an example of how SVG can be created/manipulated in angular template. It can be used to create advanced SVG graphics like maps, SVG-based animation, etc.