Angular (3) -- Components and Styles

Day 11:

Component Templates

Instead of define an html file in each component, we actually can put html code inside the typescript code, which is called in-line html.

In each component, either a templateUrl or a template should be declared, at least one of them is needed.

@Component({
  selector: 'app-servers',
  template: '<app-server></app-server><app-server></app-server>',
  styleUrls: ['./servers.component.css']
})

Or we can use back-ticks for multiply lines of html code here.

@Component({
  selector: 'app-servers',
  template: `
    <app-server></app-server>
    <app-server></app-server>`,
  styleUrls: ['./servers.component.css']
})

Styles

We can add some styles for our templates.

<div class="container">
  <div class="row">
    <div class="col-xs-12">
      <h3>I'm in the app!</h3>
      <hr>
      <app-servers></app-servers>
    </div>
  </div>
</div>

Or, we can add some style in the css file.

Or, we can add some inline styles.

styles: [`
    h3 {
      color: dodgerblue;
    }
  `]

Notice that do not add the style for the wrong file!

• Styles/styleUrls is an array, while template is always one single html.

Sometimes the hot loading does not work. Restart the server!