How UI frameworks/libraries parse code in HTML tags

  angular, javascript, reactjs, svelte

I’m curious to know how frameworks such as Angular convert text in the markup to JavaScript. For example:

<h2>Products</h2>

<div *ngFor="let product of products">

  <h3>
    <a [title]="product.name + ' details'">
      {{ product.name }}
    </a>
  </h3>

</div>

How is the above processed so product.name + ' details' is converted to JavaScript code product.name, considering that in the above code product.name is coded as a string.
In a sense, I’m wondering how an HTML attribute value is parsed and converted to JavaScript code.
This question is not just about Angular but more of a general question as how JavaScript libraries/frameworks process the embedded code in HTML tags?

Source: Angular Questions

Leave a Reply

This site uses Akismet to reduce spam. Learn how your comment data is processed.