Angular Templates and Styles

Click to share! ⬇️

Angular performs it’s magic by the interaction of a component class instance and its user-facing template. The template is an important part of an Angular component, and in fact is absolutely necessary in order for the component to work. You can not omit the template file or definition. In Angular, the component acts as the controller or viewmodel, while the template represents the view itself. Additionally, Angular applications are styled with standard CSS. Developers can apply everything they know about CSS stylesheets, selectors, flexbox, css grid, the box model, and more directly to Angular applications. In this tutorial, we’ll learn a little bit more of how this works.

External Template File

As we have started with Angular, we have seen how the templateUrl property works. Every component must have a template in order to work in Angular. In the virtual-machines.component.ts file below, the templateUrl property is highlighted showing that the virtual-machines.component.html html file is the file that is responsible for providing the template for this component.

import { Component, OnInit } from '@angular/core';

@Component({
  selector: 'app-virtual-machines',
  templateUrl: './virtual-machines.component.html',
  styleUrls: ['./virtual-machines.component.css']
})
export class VirtualMachinesComponent implements OnInit {

  constructor() { }

  ngOnInit() {
  }

}

Inline Angular Templates

By default, an external file is referenced for the template file of a component. In addition to this approach, developers may also make use of inline templates. What this means is that instead of pointing to an external html file, you can embed html markup right in the Typescript file itself. There are two ways to do this.

Single Line Approach

Right now, the external virtual-machines.component.html html file has this markup.

<app-virtual-machine></app-virtual-machine>
<hr>
<app-virtual-machine></app-virtual-machine>

Instead of having this markup here, we can embed it in the virtual-machines.component.ts file and forget making use of virtual-machines.component.html altogether. Here is how we can update the virtual-machines.component.ts to reflect this. Note that templateUrl has been changed to just template.

import { Component, OnInit } from '@angular/core';

@Component({
  selector: 'app-virtual-machines',
  template: '<app-virtual-machine></app-virtual-machine><hr><app-virtual-machine></app-virtual-machine>',
  styleUrls: ['./virtual-machines.component.css']
})
export class VirtualMachinesComponent implements OnInit {

  constructor() { }

  ngOnInit() {
  }

}

html in typescript
With ng serve running, visiting the Angular app in the browser shows that we still have two instances of the <app-virtual-machine> just like before. So we can see this approach does work.

Multi Line using Backtics

If you have a fair amount of markup for the template, it may be cumbersome to put it all on one line. A nicer way might be to use backtics instead of single quotes. This way you can place the markup using a more friendly style.

import { Component, OnInit } from '@angular/core';

@Component({
  selector: 'app-virtual-machines',

  template: `
  <app-virtual-machine></app-virtual-machine>
  <hr>
  <app-virtual-machine></app-virtual-machine>
  <hr>
  <app-virtual-machine></app-virtual-machine>`,

  styleUrls: ['./virtual-machines.component.css']
})
export class VirtualMachinesComponent implements OnInit {

  constructor() { }

  ngOnInit() {
  }

}

angular template using backtics
Note that we even added another instance of an JavaScript Template Expressions which make the multi line approach possible.

If you have just a small amount of markup, it might be convenient to make use of the inline approach of angular templates. On the other hand, having an external file keeps a nice separation of concerns and keeps the Typescript and the HTML in their own domain. Whichever approach you take, you need to have at least a Template to have a valid angular component.

How To Style Angular Components

Just like we saw with the template and the ability to point to an external HTML file, so too can you reference an individual CSS file for any styles you want to apply to a component. Below we see that the styleUrls property references the virtual-machines.component.css css file.

import { Component, OnInit } from '@angular/core';

@Component({
  selector: 'app-virtual-machines',
  templateUrl: './virtual-machines.component.html',
  styleUrls: ['./virtual-machines.component.css']
})
export class VirtualMachinesComponent implements OnInit {

  constructor() { }

  ngOnInit() {
  }

}

First though, let’s change the class assignments in app.component.html.

<div class="jumbotron">
  <div class="alert alert-info">
    <app-virtual-machines></app-virtual-machines>
  </div>
</div>

This is the result we get. We are able to use simple class names because recall we had already included Bootstrap in our project.
angular component style change

Component Stylesheet

Now, let’s say you want to be a bit more granular in the styling of your components. You can start by applying the bootstrap classes like we already have, and now we can further refine the look by using that external virtual-machines.component.css file.

* {
    color: darkgreen;
}

Now we see a combination of the Bootstrap class styles, and our own color definition.
angular css style per component

More about styleUrls and styles

You might have noticed that the styleUrls property actually holds an array, unlike the templateUrl property which is a single string value. This means that if you like, you can reference more than one stylesheet. In addition to that, you could also use a styles property like so.

import { Component, OnInit } from '@angular/core';

@Component({
  selector: 'app-virtual-machines',
  templateUrl: './virtual-machines.component.html',
  // styleUrls: ['./virtual-machines.component.css'],
  styles: [
    `* {
      color: darkgray;
     }`
  ]
})
export class VirtualMachinesComponent implements OnInit {

  constructor() { }

  ngOnInit() {
  }

}

With this addition, the component is now showing the darkgray color instead of the darkgreen. Why? This is because the inline style is now taking precedence.
angular style property example

Just like with the template approach, you can choose whether to use inline styles with the styles property or external styles by using the styleUrls. My preference for CSS Styling is to make use of the external stylesheet approach. If you have just a very small amount of CSS code, the inline approach will work just fine however.

Click to share! ⬇️