Angular 2 data shows

May 08, 2021 Angular2

Describe

Display data, i.e. the property binding mechanism displays the data to the user interface.

You can display data with the help of binding controls in the UI. /b10>Angular displays the data by using interpolation and other binding properties, such as the Angular component properties that are bound to the HTML template.

Example

The following example describes in Angular 2:

<!DOCTYPE html>
<html>
  <head>
    <title>Angular 2 Data Display</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/datadisplay_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.

datadisplay_main.ts

import {bootstrap} from "angular2/platform/browser"
import {MyTemplate} from "./datadisplay_app.component"

bootstrap(MyTemplate);

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

datadisplay_app.component.ts

import {Component, View} from "angular2/core";

@Component({
   selector: 'my-app'
})

@View({
  template: `
    <h2>Showing data using component properties with interpolation</h2>
    <h3>Player Name:{{player}}</h3>
    <h3>He is famous in: {{sport}}</h3><br>

    <h2>Showing data using constructor or variable initialization</h2>
    <h3>India capital is: {{capital}}</h3><br>

    <h2>Showing data using array property with NgFor</h2>
    <h3>My favorite fruit is: {{myfruit}}</h3>
    <p>List of Fruits:</p>
    <ul>
       <li *ngFor="#fruit of fruits">
          {{ fruit }}
       </li>
    </ul>
    `
})

export class MyTemplate {
   player: 'M.S. Dhoni ';
   sport:'Cricket';

capital: string;
constructor() {
   this.capital = 'New Delhi';
}

fruits = ['Apple', 'Orange', 'Mango', 'Grapes'];
   myfruit = this.fruits[1];
}

@Component is an decorator that uses configuration objects to create components.
The selector creates an instance of the component where the tags in the parent HTML are found.
@view contains a template that tells Angular how to render the view.
Export specifies that components are available outside the file.

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

Angular 2 data shows

Table of contents

Describe

Example

Output

Cookie Consent