title: How to set a dynamic "id" HTML attribute of an angular component?
body: <p>My problem is related to placing the same component with different parameters on the same page. In this case it is a component containing a chart from a third party Javascript library (<a href="https://d3js.org/" rel="noreferrer" title="D3JS">D3JS</a>) which needs an HTML <code>id</code> attribute to locate and modify the component's HTML contents. </p>
  
  <p>Now this <code>id</code> attribute should contain a unique string for each chart placed on the page, and if I directly set it as a string from the parent component it works just fine: </p>
  
  <p><code>&lt;my-chart id="gaugeChart0"&gt;&lt;/my-chart&gt;</code></p>
  
  <p>The reason it works is I guess, because the <code>id</code> attribute exists right at component creation time and whatever code is trying to access it can do that right away. </p>
  
  <p>However this chart is in turn embedded into a bootstrap 4 card layout, like so: </p>
  
  <pre><code>&lt;div class="row"&gt;
      &lt;div class="col-6"&gt;
          &lt;div class="card"&gt;
              &lt;div class="card-body"&gt;
                  &lt;div class="row"&gt;
                      &lt;div class="col-5"&gt;
                          &lt;my-chart id="gaugeChart0"&gt;&lt;/my-chart&gt;
                      &lt;/div&gt;
                      &lt;div class="col-7"&gt;
                          ... Some other widgets ...
                      &lt;/div&gt;
                  &lt;/div&gt;
              &lt;/div&gt;
          &lt;/div&gt;
      &lt;/div&gt;
      &lt;div class="col-6"&gt;
          &lt;div class="card"&gt;
              &lt;div class="card-body"&gt;
                  &lt;div class="row"&gt;
                      &lt;div class="col-5"&gt;
                          &lt;my-chart id="gaugeChart1"&gt;&lt;/my-chart&gt;
                      &lt;/div&gt;
                      &lt;div class="col-7"&gt;
                          ... Some other widgets ...
                      &lt;/div&gt;
                  &lt;/div&gt;
              &lt;/div&gt;
          &lt;/div&gt;
      &lt;/div&gt;
  &lt;/div&gt;
  </code></pre>
  
  <p>Now to make it more convenient (and to easily bind to click events to the whole block etc.) I would like to extract the whole part beginning with <code>&lt;div class="card"&gt;</code> into a new component. </p>
  
  <p>Let's say I call this new component <em>WidgetContainerComponent</em> which contains the chart as well as the bootstrap card layout including the other widgets defined there. </p>
  
  <p>The resulting code when using this wrapper component would be: </p>
  
  <pre><code>&lt;div class="row"&gt;
      &lt;div class="col-6"&gt;
          &lt;widget-container chartId="gaugeChart0"&gt;&lt;/widget-container&gt;
      &lt;/div&gt;
      &lt;div class="col-6"&gt;
          &lt;widget-container chartId="gaugeChart1"&gt;&lt;/widget-container&gt;
      &lt;/div&gt;
  &lt;/div&gt;
  </code></pre>
  
  <p>In order for that to work the <em>WidgetContainerComponent</em> has an input field </p>
  
  <p><code>@Input() chartId: string;</code></p>
  
  <p>that can be set. </p>
  
  <p>What I want to do then is to set the <code>id</code> attribute of the <em>MyChartComponent</em> to the string that has been set to <code>chartId</code>:</p>
  
  <pre><code>&lt;div class="card"&gt;
      &lt;div class="card-body"&gt;
          &lt;div class="row"&gt;
              &lt;div class="col-5"&gt;
                  &lt;my-chart [id]="chartId"&gt;&lt;/my-chart&gt;
              &lt;/div&gt;
              &lt;div class="col-7"&gt;
                  ... Some other widgets ...
              &lt;/div&gt;
          &lt;/div&gt;
      &lt;/div&gt;
  &lt;/div&gt;
  </code></pre>
  
  <p>But this does not work, as angular adds a prefix to the <code>id</code> attribute which results in something like <code>ng-reflect-id</code>. </p>
  
  <p>I also tried setting the attribute with <code>[attr.id]</code> as described <a href="https://www.quora.com/How-can-I-assign-dynamically-an-ID-attribute-to-an-element-in-Angular-6" rel="noreferrer">here</a> and <a href="https://stackoverflow.com/questions/23655009/how-to-set-the-id-attribute-of-a-html-element-dynamically-with-angularjs-1-x">here</a>: </p>
  
  <pre><code>&lt;div class="card"&gt;
      &lt;div class="card-body"&gt;
          &lt;div class="row"&gt;
              &lt;div class="col-5"&gt;
                  &lt;my-chart [attr.id]="chartId"&gt;&lt;/my-chart&gt;
              &lt;/div&gt;
              &lt;div class="col-7"&gt;
                  ... Some other widgets ...
              &lt;/div&gt;
          &lt;/div&gt;
      &lt;/div&gt;
  &lt;/div&gt;
  </code></pre>
  
  <p>This results in the <em>MyChartComponent</em> having a straight <code>id</code> attribute, but it seems to be only added at a later stage within the lifecycle of the component. </p>
  
  <p>I also tried to initialize the chart within the <em>MyChartComponent</em> only in <code>ngOnInit</code> and <code>ngAfterContentInit</code>, but this does not work as well. </p>
  
  <p>Any suggestions or ideas are very welcome!</p>