mirror of
https://github.com/angular/angular.git
synced 2026-09-14 13:54:52 +08:00
Joe Martin (Crowdstaffing)
42289f25c6
The purpose of the changes is to clean all markdown to match a single pedantic style.
* To ensure all changes in style are properly separated.
* To ensure all styled content aligns to nearest 4-character-tab.
* To ensure all code blocks use the Angular `<code-example>` or `<code-tab>` elements.
* To ensure all markdown exists outside of html tags.
* To ensure all images use the Angular style for `<img>` elements.
* To ensure that all smart punctuation is replaced or removed.
```text
’, ’, “, ”, –, —, …
```
* To ensure all content does not conflict with the following reserved characters.
```text
@, $, *, &, #, |, <, >,
```
* To ensure all content displays using html entities.
The following changes were made to files in the following directory.
```text
aio/content
```
The target files were markdown files.
The list of excluded files:
```text
.browserslistrc, .css, .conf, .editorconfig, .gitignore, .html, .js, .json, .sh, .svg, .ts, .txt, .xlf,
```
PR Close #45325
32 lines
1.0 KiB
Markdown
32 lines
1.0 KiB
Markdown
# SVG as templates
|
|
|
|
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.
|
|
Use these features to dynamically generate interactive graphics.
|
|
|
|
<div class="alert is-helpful">
|
|
|
|
See the <live-example name="template-syntax"></live-example> for a working example containing the code snippets in this guide.
|
|
|
|
</div>
|
|
|
|
## SVG syntax example
|
|
|
|
The following example shows the syntax for using an SVG as a template.
|
|
|
|
<code-example header="src/app/svg.component.ts" path="template-syntax/src/app/svg.component.ts"></code-example>
|
|
|
|
To see property and event binding in action, add the following code to your `svg.component.svg` file:
|
|
|
|
<code-example header="src/app/svg.component.svg" path="template-syntax/src/app/svg.component.svg"></code-example>
|
|
|
|
The example given uses a `click()` event binding and the property binding syntax \(`[attr.fill]="fillColor"`\).
|
|
|
|
<!-- links -->
|
|
|
|
<!-- external links -->
|
|
|
|
<!-- end links -->
|
|
|
|
@reviewed 2022-02-28
|