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.

Example

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)

@Component({
  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:


<app-hero-list></app-hero-list>

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 PHP Login System using PDO Part 1: Create User Registration Page #6 How to Use SQL MAX() Function with Dates?

Recently Posted

#Aug 15 Is PHP still good for back-end programming? #Aug 10 How to create a multisite network in WordPress? #Aug 3 How to create a circle that follows a cursor using JavaScript and CSS? #Aug 3 How to make a curtain slider using jQuery and CSS? #Aug 2 How to progressively load images and add a blurry placeholder? #Aug 1 How to create a placeholder loader (throbber) using CSS?
You might also like these
How to add new elements with swing animation using JavaScript and CSS?CSSSocial Media Colors: Sass VariablesMiscellaneousFULL OUTER JOIN in PostgresPostgresArray.from() Method in JavaScriptJavaScriptControl Scrolling with CSS Scroll SnapCSSHow to add Read More Read Less Button using JavaScript?JavaScript