Angular 2 template

May 08, 2021 Angular2

Describe

A view of a component can be defined by using a template that tells Angular how to display the component. The template describes how components are rendered on the page.

Example

The following example describes how to use a template in Angle 2:

<!DOCTYPE html>
<html>
   <head>
      <title>Angular 2 Template</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/template_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.

template_main.ts

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

bootstrap(MyTemplate);

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.

template_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: 'my-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 the world of {{val}}</h2>'
})

export class MyTemplate {
   val : 'Tutorialspoint!!!'
}

Output

When you run the above code, it displays the text specified in the template options defined in the template_app.component.ts file, and saves the accompanying template of the component, how the view is rendered.

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 the server root angular2_templates.html folder.
Open this HTML file as http://localhost/angular2_templates.html and display the output as shown below.

Angular 2 template

Table of contents

Describe

Example

Output

Cookie Consent