Template

A component has a template, which describes how the component is rendered on the page.

@Component({
  selector: 'talk-cmp',
  template: `
    {{talk.title}} {{talk.speaker}}
    {{talk.rating | formatRating}}
    <watch-button [talk]="talk"></watch-button>
    <rate-button [talk]="talk"></rate-button>
  `
})
class TalkCmp {}

 

You can define the template inline, as shown in the preceding code, or externally using templateUrl. In addition to the template, a component can define styles using the styles and styleUrls properties.

@Component({
  selector: 'talk-cmp',
  template: `
    {{talk.title}} {{talk.speaker}}
    {{talk.rating | formatRating}}
    <watch-button [talk]="talk"></watch-button>
    <rate-button [talk]="talk"></rate-button>
  `,
  styles: [`
    watch-button {
      margin: 10px;
    }
  `]
})
class TalkCmp {}

By default the styles are encapsulated, so the margin defined in the preceding code won't affect any other component...