Cleaner way to add microdata dynamic values of product in Angular

Trying to add below Microdata using Angular.

<div itemtype="https://schema.org/Product" itemscope>
  <meta itemprop="name" content="Executive Anvil" />
  <meta itemprop="description" content="Sleeker than ACME's Classic Anvil, the Executive Anvil is perfect for the business traveler looking for something to drop from a height." />
  <div itemprop="aggregateRating" itemtype="https://schema.org/AggregateRating" itemscope>
    <meta itemprop="reviewCount" content="89" />
    <meta itemprop="ratingValue" content="4.4" />
  </div>
  <div itemprop="review" itemtype="https://schema.org/Review" itemscope>
    <div itemprop="author" itemtype="https://schema.org/Person" itemscope>
      <meta itemprop="name" content="Fred Benson" />
    </div>
    <div itemprop="reviewRating" itemtype="https://schema.org/Rating" itemscope>
      <meta itemprop="ratingValue" content="4" />
      <meta itemprop="bestRating" content="5" />
    </div>
  </div>
</div>

I think we can add Element.meta tag using Meta service @angular/platform-browser

As per MetaDefinition it has itemprop & content that I can use, but how can I add this <meta> tag under div with itemtype, itemprop & itemscope attribute?

type MetaDefinition = {
    charset?: string;
    content?: string;
    httpEquiv?: string;
    id?: string;
    itemprop?: string;
    name?: string;
    property?: string;
    scheme?: string;
    url?: string;
} & {
   [prop: string]: string;
};