Yogesh Chauhan's Blog

Introduction to components and templates Part 1: Component Metadata

in Angular on 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

Most Read

#1 Solution to the error “Visual Studio Code can’t be opened because Apple cannot check it for malicious software” #2 How to add Read More Read Less Button using JavaScript? #3 How to check if radio button is checked or not using JavaScript? #4 Solution to “TypeError: ‘x’ is not iterable” in Angular 9 #5 How to uninstall Cocoapods from the Mac OS? #6 PHP Login System using PDO Part 1: Create User Registration Page

Recently Posted

#Apr 8 JSON.stringify() in JavaScript #Apr 7 Middleware in NextJS #Jan 17 4 advanced ways to search Colleague #Jan 16 Colleague UI Basics: The Search Area #Jan 16 Colleague UI Basics: The Context Area #Jan 16 Colleague UI Basics: Accessing the user interface
You might also like these
SQL Left JoinSQL/MySQLHow to add a Bar Chart in Angular App?AngularHow to create a dynamic countdown using HTML and JavaScript?HTMLHow does @extend rule work in SCSS (Sass)?SCSSAn Introduction to wp-config file in WordPressWordPressHow to Draw a Text Image using JavaScript?JavaScript