devtools/src/app/demo-app/todo/home/todos.component.html - main - githubmirror/angular

devtools/src/app/demo-app/todo/home/todos.component.html

49 строк2 KB

Aleksander Bodurri

fix(devtools): highlight SVG and directive hosts correctly

07 июл 2026, 20:18

07 июл 2026, 20:1856847dc

<a [routerLink]="">Home</a>
<p>{{ 'Sample text processed by a pipe' | sample }}</p>
<section class="todoapp">
  <header class="header">
    <h1 id="demo-app-title">{{ title }}</h1>
    <input
      (keydown.enter)="addTodo(input)"
      #input
      class="new-todo"
      placeholder="What needs to be done?"
      autofocus
    />
  </header>
  <section class="main">
    <input id="toggle-all" class="toggle-all" type="checkbox" />
    <label for="toggle-all">Mark all as complete</label>
    <!--  {{slowBinding}}-->
    <ul class="todo-list">
      <!-- These are here just to show the structure of the list items -->
      <!-- List items should get the class `editing` when editing and `completed` when marked as completed -->
      @for (todo of todos | todosFilter: filterValue; track $index) {
        <app-todo
          appTooltip
          [todo]="todo"
          (delete)="onDelete($event)"
          (update)="onChange($event)"
        />
      }
    </ul>
  </section>
  <!-- This footer should hidden by default and shown when there are todos -->
  <footer class="footer">
    <!-- This should be `0 items left` by default -->
    <span class="todo-count"
      ><strong>{{ itemsLeft }}</strong> item left</span
    >
    <!-- Remove this if you don't implement routing -->
    <!-- Hidden if no completed items are left ↓ -->
    <button class="clear-completed" (click)="clearCompleted()">Clear completed</button>
  </footer>
</section>

<svg width="180" height="80" viewBox="0 0 180 80" aria-label="SVG component highlighter demo">
  <foreignObject appSvgDemo x="10" y="10" width="160" height="60">
    <div xmlns="http://www.w3.org/1999/xhtml">SVG component highlighter demo</div>
  </foreignObject>
</svg>

<recursive-component />