Angular 2 metadata

May 08, 2021 Angular2

Describe

Metadata tells Angular how to handle a class.

Metadata is a way to process classes. /b10> Consider that you have a component called MyComponent, which will be a class until you tell Angular that it is a component. /b11> You can use metadata to tell Angular MyComponent that it is a component that can be attached to TypeScript using the decorator.

Example

The following example describes the use of metadata in Angle 2:

<!DOCTYPE html>
<html>
   <head>
      <title>Angular 2 Metadata</title>
      <script src="https://atts.w3cschool.cn/attachments/tuploads/angular2/es6-shim.min.js"></script>
      <script src="https://atts.w3cschool.cn/attachments/tuploads/angular2/system-polyfills.js"></script>
      <script src="https://atts.w3cschool.cn/attachments/tuploads/angular2/angular2-polyfills.js"></script>
      <script src="https://atts.w3cschool.cn/attachments/tuploads/angular2/system.js"></script>
      <script src="https://atts.w3cschool.cn/attachments/tuploads/angular2/typescript.js"></script>
      <script src="https://atts.w3cschool.cn/attachments/tuploads/angular2/Rx.js"></script>
      <script src="https://atts.w3cschool.cn/attachments/tuploads/angular2/angular2.dev.js"></script>
      <script>
         System.config({
           transpiler: 'typescript',
           typescriptOptions: { emitDecoratorMetadata: true },
           packages: {'app': {defaultExtension: 'ts'}}
         });
         System.import('/angular2/src/app/metadata_main')
            .then(null, console.error.bind(console));
      </script>
   </head>
   <body>
      <my-app>Loading...</my-app>
   </body>
</html>

The above code includes the following configuration options:

You can configure the index file .html typescript version. /b10> SystemJS converts TypeScript to JavaScript before running the application using the transpiler option.
If you don't translate to JavaScript before you run your application, you may see compiler warnings and errors hidden in your browser.
When the emitDecorator Metadata option is set, TypeScript generates metadata for each class of code. /b10> If you do not specify this option, a large amount of unused metadata is generated, which affects the file size and the application runtime.
Angular 2 contains packages from the app folder, Chinese will have a .ts extension.
Next, it loads the main component file from the app folder. /b10> If the primary component file is not found, it displays an error in the console.
When Angula called the boot function in main.ts, it reads the Company metadata, finds the "app" selector, locates an element label named app, and loads the application between them.

To run the code, you need to save the following TypeScript (.ts) file under the app folder.

metadata_main.ts

import {bootstrap} from "angular2/platform/browser"    //importing bootstrap function
import {MyTemplate} from "./metadata_app.component"    //importing component function

bootstrap(MyTemplate);

Now we'll create a component in the TypeScript (.ts) file, as follows:

metadata_app.component.ts

import {Component} from "angular2/core";
import {ItemComponent} from './item-list.component';

@Component({
    selector: 'my-app',
    template: `<my-list></my-list>`,
    directives:[ItemComponent]
})
export class MyTemplate {}

@Component is an decorator that uses configuration objects to create components and their views.
The selector creates an instance of the component where the tags in the parent HTML are found.
Instruction Decorator is used to represent an array of components or instructions.

The following TypeScript (.ts) file shows a list of items on the output.

item-list.component.ts

import {Component} from "angular2/core";

@Component({
   selector:'my-list',
   template:`<h2>List of Fruits</h2>
   <ul>
      <li *ngFor="#myItem of itemList">{{myItem.name}}</li>
   </ul>
   `
})
export class ItemComponent{
   public itemList = [
      {name:"Apple"},
      {name:"Orange"},
      {name:"Grapes"},
   ];
}

The template tells Angular how to display the components.
The ngFor instruction is used to loop the list of items in an array of itemList objects.

Output

Let's take the following steps to see how the code above works:

Save the HTML code above as an index .html file, as we created in the Development Environment section, and use the application folder above that contains the .ts file.
Open the terminal window and enter the following command:
```
npm start
```
Later, the browser tab should open and display the output, as shown below.

Alternatively, you can run this file in other ways:

Save the HTML code above as a file in your server root angular2_metadata.html folder.
Open this HTML file as http://localhost/angular2_metadata.html and display the output as shown below.

Angular 2 metadata

Table of contents

Describe

Example

Output

Cookie Consent