Introduction to components and templates Part 1: Component Metadata
May 9, 2020

Introduction to components and templates Part 1

A component controls a patch of screen called a view.

You define a component’s application logic inside a class. The logic included info about what component does to support the view.

The class interacts with the view through an API of properties and methods.


In the example code below, HeroListComponent has a heroes property that holds an array of heroes.

Its selectHero() method sets a selectedHero property when the user clicks to choose a hero from that list.

The component acquires the heroes from a service, which is a TypeScript parameter property on the constructor.

The service is provided to the component through the dependency injection system.

// src/app/hero-list.component.ts (class)

export class HeroListComponent implements OnInit {
  heroes: Hero[];
  selectedHero: Hero;

  constructor(private service: HeroService) { }

  ngOnInit() {
    this.heroes = this.service.getHeroes();

  selectHero(hero: Hero) { this.selectedHero = hero; }

Angular creates, updates, and destroys components as the user moves through the application.

Your app can take action at each moment in this lifecycle through optional lifecycle hooks, like ngOnInit().

Component Metadata

The @Component decorator identifies the class immediately below it as a component class, and specifies its metadata.

In the example code below, you can see that HeroListComponent is just a class, with no special Angular notation or syntax at all.

It’s not a component until you mark it as one with the @Component decorator.

The metadata for a component tells Angular where to get the major building blocks that it needs to create and present the component and its view.

In particular, it associates a template with the component, either directly with inline code, or by reference.

Together, the component and its template describe a view.

In addition to containing or pointing to the template, the @Component metadata configures how the component can be referenced in HTML and what services it requires.

Here’s an example of basic metadata for HeroListComponent.

// src/app/hero-list.component.ts (metadata)

  selector:    'app-hero-list',
  templateUrl: './hero-list.component.html',
  providers:  [ HeroService ]
export class HeroListComponent implements OnInit {
/* . . . */

The example above shows some of the most useful @Component configuration options:

selector: A CSS selector that tells Angular to create and insert an instance of this component wherever it finds the corresponding tag in template HTML.

For example, if an app’s HTML contains this:


then Angular inserts an instance of the HeroListComponent view between those tags.

templateUrl: The module-relative address of this component’s HTML template.

Alternatively, you can provide the HTML template inline, as the value of the template property.

This template defines the component’s host view.

providers: An array of providers for services that the component requires.

In the example, this tells Angular how to provide the HeroService instance that the component’s constructor uses to get the list of heroes to display.

Next articles in this series:

Introduction To Components And Templates Part 2: Templates And Views

Introduction To Components And Templates Part 3: Data Binding

Introduction To Components And Templates Part 4: Pipes And Directives

Credit: Angular.io


Leave a Reply

Most Read

#1 How to check if radio button is checked or not using JavaScript? #2 How to set opacity or transparency using CSS? #3 Pagination in CSS with multiple examples #4 How to make HTML form interactive and using CSS? #5 Solution to “TypeError: ‘x’ is not iterable” in Angular 9 #6 How to uninstall Cocoapods from the Mac OS?

Recently Posted

Mar 4 How to use data-* Attributes in HTML? Mar 4 The substr() method in JavaScript and how it’s different from substring() Mar 4 A complete guide to add responsive YouTube videos using HTML and CSS Mar 3 How to embed YouTube or other video links in WordPress? Mar 3 How to change the Login Logo in WordPress? Mar 3 substring() Method in JavaScript

You might also like these

Values and Types Basics in JavaScriptJavaScriptCreate a responsive pricing table using simple HTML and CSSCSSHow to Make a Simple Module with a Form and Menu Link in Drupal 7.x?Drupalinclude, include_once, require, require_once in PHPPHPThe Drupal flowDrupalSocial Media Colors: Sass VariablesMisc