{"id":59705,"date":"2018-05-02T17:18:41","date_gmt":"2018-05-02T11:48:41","guid":{"rendered":"https:\/\/www.vskills.in\/certification\/tutorial\/?p=59705"},"modified":"2024-04-12T14:20:45","modified_gmt":"2024-04-12T08:50:45","slug":"angular-displaying-data","status":"publish","type":"page","link":"https:\/\/www.vskills.in\/certification\/tutorial\/angular-displaying-data\/","title":{"rendered":"Angular Displaying Data"},"content":{"rendered":"

Angular Displaying Data<\/h1>\n

You can display data by binding controls in an HTML template to properties of an Angular component. In this page, you’ll create a component with a list of heroes. You’ll display the list of hero names and conditionally show a message below the list.<\/p>\n

Showing component properties with interpolation<\/p>\n

The easiest way to display a component property is to bind the property name through interpolation. With interpolation, you put the property name in the view template, enclosed in double curly braces: {{myHero}}.<\/p>\n

 <\/p>\n

Follow the setup instructions for creating a new project named displaying-data. Then modify the app.component.ts file by changing the template and the body of the component. When you’re done, it should look like this:<\/p>\n

 <\/p>\n

src\/app\/app.component.ts<\/u><\/p>\n

import { Component } from ‘@angular\/core’;<\/p>\n

 <\/p>\n

@Component({<\/p>\n

selector: ‘my-app’,<\/p>\n

template: `<\/p>\n

<h1>{{title}}<\/h1><\/p>\n

<h2>My favorite hero is: {{myHero}}<\/h2><\/p>\n

`<\/p>\n

})<\/p>\n

export class AppComponent {<\/p>\n

title = ‘Tour of Heroes’;<\/p>\n

myHero = ‘Windstorm’;<\/p>\n

}<\/p>\n

 <\/p>\n

You added two properties to the formerly empty component: title and myHero. The revised template displays the two component properties using double curly brace interpolation:<\/p>\n

 <\/p>\n

src\/app\/app.component.ts (template)<\/u><\/p>\n

template: `<\/p>\n

<h1>{{title}}<\/h1><\/p>\n

<h2>My favorite hero is: {{myHero}}<\/h2><\/p>\n

`<\/p>\n

The template is a multi-line string within ECMAScript 2015 backticks (`). The backtick (`)\u2014which is not the same character as a single quote (‘)\u2014allows you to compose a string over several lines, which makes the HTML more readable.<\/p>\n

Angular automatically pulls the value of the title and myHero properties from the component and inserts those values into the browser. Angular updates the display when these properties change.<\/p>\n

Template inline or template file?<\/span><\/strong><\/p>\n

You can store your component’s template in one of two places. You can define it inline using the template property, or you can define the template in a separate HTML file and link to it in the component metadata using the @Component decorator’s templateUrl property.<\/p>\n

The choice between inline and separate HTML is a matter of taste, circumstances, and organization policy. Here the app uses inline HTML because the template is small and the demo is simpler without the additional HTML file.<\/p>\n

In either style, the template data bindings have the same access to the component’s properties.<\/p>\n

IT Professionals, Web Developers, Web Programmers, IT students can Apply for the certification course to move ahead in their careers.<\/strong><\/p>\n

\"\"<\/a><\/p>\n