Angular Zero: Component Templates and Styles

In the previous article, we discussed how to create and use Angular components. In this article, we’ll delve deeper into component templates and styles—key elements that define a component’s appearance. By mastering templates and styling techniques, we can make our components more visually appealing and user-friendly.

Component Templates

A component’s template defines how its data is rendered to the user. In Angular, templates are implemented either via external HTML files or inline HTML code. When defining a component, you can specify the template using the template property (for inline HTML) or the templateUrl property (for external HTML files) of the @Component decorator.

Using Inline Templates

You can define an inline template by embedding HTML directly into the component’s decorator. For example:

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

@Component({
  selector: 'app-inline-template',
  template: `
    <h1>Welcome to Angular</h1>
    <p>This is an example of an inline template.</p>
  `
})
export class InlineTemplateComponent {}

In this example, the template property contains a simple HTML structure, which will be rendered whenever the component is used.

Using External Templates

For complex or lengthy templates, it’s recommended to define them in separate HTML files:

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

@Component({
  selector: 'app-external-template',
  templateUrl: './external-template.component.html'
})
export class ExternalTemplateComponent {}

The corresponding external-template.component.html file might contain:

<h1>Welcome to Angular</h1>
<p>This is an example of an external template.</p>

Data Binding

Angular provides several data binding mechanisms to connect a component’s class logic with its template. These include interpolation, property binding, and event binding.

Interpolation

Interpolation displays component data within the template using double curly braces ({{ }}). For example:

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

@Component({
  selector: 'app-interpolation',
  template: `<h1>{{ title }}</h1>`
})
export class InterpolationComponent {
  title = 'Welcome to Angular interpolation!';
}

Here, {{ title }} renders the value of the title property.

Property Binding

Property binding binds a component class property to an element’s DOM property:

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

@Component({
  selector: 'app-property-binding',
  template: `<img [src]="imageUrl" alt="image" />`
})
export class PropertyBindingComponent {
  imageUrl = 'https://example.com/image.png';
}

In this example, [src] binds the imageUrl property to the <img> element’s src attribute.

Event Binding

Event binding lets you execute component methods in response to user interactions—for instance, handling button clicks:

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

@Component({
  selector: 'app-event-binding',
  template: `<button (click)="onClick()">Click Me</button>`
})
export class EventBindingComponent {
  onClick() {
    alert('Button clicked!');
  }
}

Here, clicking the button triggers the onClick() method, displaying an alert dialog.

Component Styles

Component-specific styles can be defined using the styles (for inline CSS) or styleUrls (for external CSS files) properties in the @Component decorator.

Using Inline Styles

You can embed CSS directly in the component using the styles property:

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

@Component({
  selector: 'app-inline-style',
  template: `<h1>Inline Style Example</h1>`,
  styles: [`h1 { color: blue; font-size: 20px; }`]
})
export class InlineStyleComponent {}

Using External Styles

For better maintainability, it’s recommended to place styles in external CSS files:

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

@Component({
  selector: 'app-external-style',
  templateUrl: './external-style.component.html',
  styleUrls: ['./external-style.component.css']
})
export class ExternalStyleComponent {}

The external-style.component.css file might contain:

h1 {
  color: green;
  font-size: 30px;
}

Conclusion

This chapter introduced the fundamentals of Angular component templates and styles. You learned how to define component views using both inline and external templates, and how to dynamically display data using various forms of data binding. You also explored how to apply styling—either inline or via external CSS files—to enhance component presentation. Mastering these core concepts lays a solid foundation for the next topic: component communication.

In the next article, we’ll explore effective strategies for interaction between components—stay tuned!