Angular 2 component

May 08, 2021 Angular2

Describe

Components are controller classes with templates that primarily handle views of applications and logic on the page. I t is a bit code that can be used throughout the application. Components can be automatically configured and dependent on injection.

Components contain two important things: one is a view and the other is some logic.

Example

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

<!DOCTYPE html>
<html>
   <head>
      <title>Angular 2 Component</title>
      <!--Load libraries -->
      <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 tool converts TypeScript to JavaScript
            transpiler: 'typescript',

            //emitDecoratorMetadata flag used by JavaScript output to create metadata from the decorators
            typescriptOptions: { emitDecoratorMetadata: true },
            packages: {'app': {defaultExtension: 'ts'}}
         });
         System.import('/angular2/src/app/component_main')
            .then(null, console.error.bind(console));
      </script>
   </head>
   <!--When Angular calls the bootstrap function in main.ts, it reads the Component metadata, finds the 'app' selector, locates an element tag named app, and loads the application between those tags.-->
   <body>
      <app>Loading...</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.

component_main.ts

import {bootstrap} from "angular2/platform/browser";  //importing bootstrap function
import {App} from "./component_app.component"         //importing component function

bootstrap(App);

Now we're going to create a component in the TypeScript (.ts) file, and we're going to create a component and a view for that component.

component_app.component.ts

// component's metadata can be accessed using this primary Angular library
import {Component, View} from "angular2/core";

//framework recognizes @Component annotation and knows that we are trying to create a new component
@Component({
   selector: 'app'  //specifies selector for HTML element named 'app'
})

@View({
  //template property holds component's companion template that tells Angular how to render a view
  template: '<h2>Welcome to {{name}}</h2>'
})

export class App {
   name : 'Tutorialspoint!!!'
}

Output

When you run the code above, it displays the text specified in the template options defined in the component_app.component.ts file and saves the accompanying template that tells Angular how to render the view.

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 chapter, and use the app i.gt; folder above, which 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 the server root angular2_components.html folder.
Open this HTML file as http://localhost/angular2_components.html and display the output as shown below.

Angular 2 component

Table of contents

Describe

Example

Output

Cookie Consent