> For the complete documentation index, see [llms.txt](https://openai.gitbook.io/code-cheatsheets/llms.txt). Markdown versions of documentation pages are available by appending `.md` to page URLs; this page is available as [Markdown](https://openai.gitbook.io/code-cheatsheets/js/all/angular/html.md).

# HTML

## Interpolation

```markup
<div> {{title}} </div>
<div> {{title | uppercase }} </div>
```

`| uppercase` = a pipe

## Two way binding

In app.module.ts and added to import list:

```typescript
import { FormsModule } from '@angular/forms';
```

In html:

```markup
<label>name:
  <input [(ngModel)]="hero.name" placeholder="name">
</label>
```

## Loops

```markup
<ul class="heroes">
  <li *ngFor="let hero of heroes">
          {{hero.id}}
  </li>
</ul>
```

## Event Binding

OnSelect defined in ts for this component

```markup
<div (click)="onSelect(hero)">  
<button (click)="add(heroName.value); heroName.value=''">
  add
</button>
```

## If

if selectedHero exists/defined

```markup
<div *ngIf="selectedHero">
```

## Conditional Classes

```markup
[class.some-css-class]="some-condition"
<li [class.selected]="hero === selectedHero"> hi </li>
```

## Property Binding(used with [@Input](/code-cheatsheets/js/all/angular/html.md#input) )

```markup
<component [hero]="selectedHero"> </component>
```