5 lines
3.0 KiB
JSON
5 lines
3.0 KiB
JSON
{
|
|
"id": "guide/svg-in-templates",
|
|
"title": "SVG as templates",
|
|
"contents": "\n\n\n<div class=\"github-links\">\n <a href=\"https://github.com/angular/angular/edit/master/aio/content/guide/svg-in-templates.md?message=docs%3A%20describe%20your%20change...\" aria-label=\"Suggest Edits\" title=\"Suggest Edits\"><i class=\"material-icons\" aria-hidden=\"true\" role=\"img\">mode_edit</i></a>\n</div>\n\n\n<div class=\"content\">\n <h1 id=\"svg-as-templates\">SVG as templates<a title=\"Link to this heading\" class=\"header-link\" aria-hidden=\"true\" href=\"guide/svg-in-templates#svg-as-templates\"><i class=\"material-icons\">link</i></a></h1>\n<p>You can use SVG files as templates in your Angular applications. When you use an SVG as the template, you are able to use directives and bindings just like with HTML templates. With these features, you can dynamically generate interactive graphics.</p>\n<div class=\"alert is-helpful\">\n<p>See the <live-example name=\"template-syntax\"></live-example> for a working example containing the code snippets in this guide.</p>\n</div>\n<h2 id=\"svg-syntax-example\">SVG syntax example<a title=\"Link to this heading\" class=\"header-link\" aria-hidden=\"true\" href=\"guide/svg-in-templates#svg-syntax-example\"><i class=\"material-icons\">link</i></a></h2>\n<p>The following example shows the syntax for using an SVG as a template.</p>\n<code-example path=\"template-syntax/src/app/svg.component.ts\" header=\"src/app/svg.component.ts\">\nimport { <a href=\"api/core/Component\" class=\"code-anchor\">Component</a> } from '@angular/core';\n\n@<a href=\"api/core/Component\" class=\"code-anchor\">Component</a>({\n selector: 'app-svg',\n templateUrl: './svg.component.svg',\n styleUrls: ['./svg.component.css']\n})\nexport class SvgComponent {\n fillColor = 'rgb(255, 0, 0)';\n\n changeColor() {\n const r = Math.floor(Math.random() * 256);\n const g = Math.floor(Math.random() * 256);\n const b = Math.floor(Math.random() * 256);\n this.fillColor = `rgb(${r}, ${g}, ${b})`;\n }\n}\n\n\n</code-example>\n<p>To see property and event binding in action, add the following code to your <code>svg.component.svg</code> file:</p>\n<code-example path=\"template-syntax/src/app/svg.component.svg\" header=\"src/app/svg.component.svg\">\n<svg>\n <g>\n <rect x=\"0\" y=\"0\" width=\"100\" height=\"100\" [attr.fill]=\"fillColor\" (click)=\"changeColor()\" />\n <text x=\"120\" y=\"50\">click the rectangle to change the fill color</text>\n </g>\n</svg>\n\n\n</code-example>\n<p>The example given uses a <code>click()</code> event binding and the property binding syntax\n(<code>[attr.fill]=\"fillColor\"</code>).</p>\n\n \n</div>\n\n<!-- links to this doc:\n - guide/template-syntax\n-->\n<!-- links from this doc:\n - api/core/Component\n - guide/svg-in-templates#svg-as-templates\n - guide/svg-in-templates#svg-syntax-example\n - https://github.com/angular/angular/edit/master/aio/content/guide/svg-in-templates.md?message=docs%3A%20describe%20your%20change...\n-->"
|
|
} |