YogeshChauhan . com

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 How to check if radio button is checked or not using JavaScript? #2 Solution to “TypeError: ‘x’ is not iterable” in Angular 9 #3 How to add Read More Read Less Button using JavaScript? #4 How to uninstall Cocoapods from the Mac OS? #5 How to Use SQL MAX() Function with Dates? #6 PHP Login System using PDO Part 1: Create User Registration Page

Recently Posted

Jun 16 What are Stored Procedures for SQL Server? Jun 16 What are Class Constants in PHP? Jun 15 A short basic guide on states in React Jun 15 How to define constants in PHP? Jun 15 How to define visibility for a property in PHP? Jun 15 How to use @if and @else in SCSS?

You might also like these

Arbitrary Arguments in SCSS functionsSCSSHow to add recaptcha version 3 to PHP website?PHPMake sure your links have descriptive textUI/UXHow to remove border from :visited image, link or button?CSSHow to Draw a Circle in HTML5 Using Canvas Tag?HTMLLIKE and ILIKE Operators in PostgresPostgres