{"id":59658,"date":"2018-05-02T16:50:47","date_gmt":"2018-05-02T11:20:47","guid":{"rendered":"https:\/\/www.vskills.in\/certification\/tutorial\/?p=59658"},"modified":"2024-04-12T14:13:21","modified_gmt":"2024-04-12T08:43:21","slug":"angular-component-template-and-data-binding","status":"publish","type":"page","link":"https:\/\/www.vskills.in\/certification\/tutorial\/angular-component-template-and-data-binding\/","title":{"rendered":"Angular Component, Template and Data Binding"},"content":{"rendered":"

Angular Component, Template and Data Binding<\/h1>\n

A component controls a patch of screen called a view. For example, individual components define and control each of the following views :<\/p>\n

The app root with the navigation links.
\nThe list of heroes.
\nThe hero editor.<\/p>\n

You define a component’s application logic\u2014what it does to support the view\u2014inside a class. The class interacts with the view through an API of properties and methods.<\/p>\n

The @Component decorator identifies the class immediately below it as a component class, and specifies its metadata. In the example code below, you can see that HeroListComponent is just a class, with no special Angular notation or syntax at all. It’s not a component until you mark it as one with the @Component decorator.<\/p>\n

The metadata for a component tells Angular where to get the major building blocks it needs to create and present the component and its view. In particular, it associates a template with the component, either directly with inline code, or by reference. Together, the component and its template describe a view.<\/p>\n

In addition to containing or pointing to the template, the @Component metadata configures, for example, how the component can be referenced in HTML and what services it requires.<\/p>\n

Template<\/strong>
\nThe Angular application manages what the user sees and can do, achieving this through the interaction of a component class instance (the component) and its user-facing template.<\/p>\n

You may be familiar with the component\/template duality from your experience with model-view-controller (MVC) or model-view-viewmodel (MVVM). In Angular, the component plays the part of the controller\/viewmodel, and the template represents the view.<\/p>\n

HTML is the language of the Angular template. Almost all HTML syntax is valid template syntax. The <script> element is a notable exception; it is forbidden, eliminating the risk of script injection attacks. In practice, <script> is ignored and a warning appears in the browser console. See the Security page for details.<\/p>\n

Some legal HTML doesn’t make much sense in a template. The <html>, <body>, and <base> elements have no useful role. Pretty much everything else is fair game.<\/p>\n

You can extend the HTML vocabulary of your templates with components and directives that appear as new elements and attributes. In the following sections, you’ll learn how to get and set DOM (Document Object Model) values dynamically through data binding.<\/p>\n

Interpolation ( {{…}} )<\/strong><\/p>\n

You met the double-curly braces of interpolation, {{ and }}, early in your Angular education.
\nsrc\/app\/app.component.html<\/p>\n

<p>My current hero is {{currentHero.name}}<\/p><\/p>\n

You use interpolation to weave calculated strings into the text between HTML element tags and within attribute assignments.
\nsrc\/app\/app.component.html<\/p>\n

<h3>
\n{{title}}
\n<img src=”{{heroImageUrl}}” style=”height:30px”>
\n<\/h3><\/p>\n

The text between the braces is often the name of a component property. Angular replaces that name with the string value of the corresponding component property. In the example above, Angular evaluates the title and heroImageUrl properties and “fills in the blanks”, first displaying a bold application title and then a heroic image.<\/p>\n

IT Professionals, Web Developers, web programmers, IT students can use the below links to be updated on Angular 4<\/p>\n