What is template in Angular?

-

Template                                                                                  



A template looks like regular HTML, except that it also contains Angular template syntax, which alters the HTML based on your application's logic and the state of application and DOM data. Your template can use data binding to coordinate the application and DOM data, pipes to transform data before it is displayed, and directives to apply application logic to what gets displayed.



For example, here is a template for the Tutorial's HeroListComponent.


<h2>Hero List</h2>

<p><em>Select a hero from the list to see details.</em></p>

<ul>

  <li *ngFor="let hero of heroes">

    <button type="button" (click)="selectHero(hero)">

      {{hero.name}}

    </button>

  </li>

</ul>


<app-hero-detail *ngIf="selectedHero" [hero]="selectedHero"></app-hero-detail>

This template uses typical HTML elements like <h2> and <p>. It also includes Angular template-syntax elements, *ngFor, {{hero.name}}, (click), [hero], and <app-hero-detail>. The template-syntax elements tell Angular how to render the HTML to the screen, using program logic and data.


The *ngFor directive tells Angular to iterate over a list.

{{hero.name}}, (click), and [hero] bind program data to and from the DOM, responding to user input. See more about data binding below.

The <app-hero-detail> element tag in the example represents a new component, HeroDetailComponent. The HeroDetailComponent defines the hero-detail portion of the rendered DOM structure specified by the HeroListComponent component.


Notice how these custom components mix with native HTML. 



https://angular.io/guide/architecture-components







Comments

Post a Comment

Popular posts from this blog

pxSubscript and pxListSubscript Properties In Pega

-
Image
  .pxSubscript   And  .pxListSubscript Property-Set                         CasePg.Stakeholderlist Param.Indexpurpose  = "Index_Stakeholderlist" Param.InsIndexedKey  =  "CIGNA-CIGNAAUTO-WORK"+CasePg.pyID local.cnt  =   .pxListSubscript Param.IndexCount = local.cnt-1 How to get index value from pagelist?  The property pxListSubscript will hold the index of the current page that you are in How to get index in a pagelist during iteration While iterating in a pagelist Example : EmployeeList To refer to page at that point: we use EmployeeList(<CURRENT> ) But how to get the index if we have to write some condition, like at index= nth position => achieve some logic. Answer : pxListSubscript Pega provides one property called pxListSubscript which is declaratively calculated and kept at each page level in a pagelist. We can use it instead of setting  a property a...
Read more

Frequently Used Date Expressions In Pega

-
Image
 Hi, In this post I will show some of the frequently used date expressions in pega. Before starting we will see some of the date subscripts used in date functions. For Ex:   If date is =  05/March/2023 yyyy = Year => 2023 YYYY => 2023 MM = Month => 03 M=> 3 MMMM  ===> March MMM ====> Mar dd = Date/day  => 05 d ===> 5 1) pxFormatDateOnly(CurrentDateTime(),"yyyyMMdd","MM/dd/yyyy")   Here, CurrentDateTime()  = 20230618T025027.005 GMT                                                                                CurrentDateTime() returns the current date and time. pxFormatDateOnly() = Format/reformat a Date Time string using a specified parameters. Output  =  06/18/2023  { which is 18 June 2023} 2)...
Read more

pyForEachCount In Pega

-
Image
pyForEachCount holds the current iteration number. You can examine (but not alter) this value in the step.                 When processing the For loop or iterating over a Value List or Page List property, the parameter param.pyForEachCount holds the current iteration number.  You can examine (but not alter) this value in the step. For example, to iterate only over the first ten  pages or values, you can exit the iteration when pyForEachCount is greater than 10. In below example we will see how we can use pyForEachCount in data transform and set value in .pxResults.
Read more