|<- [[The component template]]|[[Using other components in a component]] ->|

<code>
// inline template
@Component ({
  selector: 'media-tracker-app',
  template: '<h1>My app</h1>',
})
// ou
  template: `
              <h1>My App</h1>
              <p>now width multiline HTML</p>
            `,
</code>

Ou mettre dans du html séparé (la propriété devient templateUrl) :

<code>
@Component ({
  selector: 'media-tracker-app',
  templateUrl: 'app/app.component.html',
})
</code>

<code>
// app/app.component.html
<h1>My App</h1>
</code>

Ajout de CSS

<code>
@Component ({
  selector: 'media-tracker-app',
  template: 'app/app.component.html',
  styles:  [`
              h1 {
                color: blue;
              }
            `,[`
              p {
                color: black;
              }
            `],
})
</code>

Pour le mettre ailleurs (aussi changement d'URL):

<code>
@Component ({
  selector: 'media-tracker-app',
  templateUrl: 'app/app.component.html',
  styleUrl: ['app/app.component.css'],
})
</code>

note: angular se charge de modifier les sélecteurs CSS pour cibler les éléments de l'application.