refactor(docs-infra): fix template eslint issues in aio examples (#44557)

the aio examples have various eslint issues regarding template rules, those
are currently turned off and TODO comments have been added to them in the
examples eslintrc, fix such issues and remove the respective TODO comments

this also includes examples refactoring to use buttons for better accessibility,
this change tries to make the smallest amound of changes to the examples' behaviors
and designs/UI

PR Close #44557
This commit is contained in:
Dario Piotrowicz
2021-12-23 11:28:40 +01:00
committed by Dylan Hunn
parent 226fac67bd
commit 5498a35789
70 changed files with 501 additions and 307 deletions
+3 -3
View File
@@ -89,14 +89,14 @@ This example from the `HeroListComponent` template uses three of these forms.
<code-example path="architecture/src/app/hero-list.component.1.html" header="src/app/hero-list.component.html (binding)" region="binding"></code-example>
* The `{{hero.name}}` [*interpolation*](guide/interpolation)
displays the component's `hero.name` property value within the `<li>` element.
* The `[hero]` [*property binding*](guide/property-binding) passes the value of
`selectedHero` from the parent `HeroListComponent` to the `hero` property of the child `HeroDetailComponent`.
* The `(click)` [*event binding*](guide/user-input#binding-to-user-input-events) calls the component's `selectHero` method when the user clicks a hero's name.
* The `{{hero.name}}` [*interpolation*](guide/interpolation)
displays the component's `hero.name` property value within the `<button>` element.
Two-way data binding (used mainly in [template-driven forms](guide/forms))
combines property and event binding in a single notation.
Here's an example from the `HeroDetailComponent` template that uses two-way data binding with the `ngModel` directive.
+1 -1
View File
@@ -237,7 +237,7 @@ The following table summarizes the targets for the different binding types.
Directive&nbsp;property
</td>
<td>
<code>src</code>, <code>hero</code>, and <code>ngClass</code> in the following:
<code>alt</code>, <code>src</code>, <code>hero</code>, and <code>ngClass</code> in the following:
<code-example path="template-syntax/src/app/app.component.html" region="property-binding-syntax-1"></code-example>
<!-- For more information, see [Property Binding](guide/property-binding). -->
</td>