title: Angular - Is it possible to dynamically add attributes on button click
body: <p><strong>What I'm using</strong></p>
  
  <ul>
  <li>Angular</li>
  </ul>
  
  <p><strong>What I'm trying to do</strong></p>
  
  <ul>
  <li>I have a list. When I hit a button, I want to append some custom attributes to a certain HTML element </li>
  </ul>
  
  <p><strong>What I have</strong></p>
  
  <ul>
  <li><p>My HTML List</p></li>
  <li><p>A button hooked up to a click event</p></li>
  </ul>
  
  <p><strong>What I'm not sure how to do</strong></p>
  
  <ul>
  <li>When I click the button the follow attributes are added to my 'container' div:</li>
  </ul>
  
  
  
  <p>[phantomOp]="myItems" [myOper]="oper"</p>
  
  <p><strong>HTML</strong></p>
  
  <pre><code>&lt;div class="container"&gt;
    &lt;ul&gt;
      &lt;li&gt; Albums &lt;/li&gt;
      &lt;li&gt; Dates &lt;/li&gt;
      &lt;/ul&gt;
  &lt;/div&gt;
  
  &lt;button (click)="addContainerAttributes"&gt; Add Container Attributes &lt;/button&gt;
  </code></pre>
  
  <p><strong>What I would like the HTML to look like after a button click</strong></p>
  
  <pre><code>&lt;div class="container" [phantomOp]="myItems" [myOper]="oper"&gt;
    &lt;ul&gt;
      &lt;li&gt; Albums &lt;/li&gt;
      &lt;li&gt; Dates &lt;/li&gt;
    &lt;/ul&gt;
  &lt;/div&gt;
  </code></pre>
  
  <p><strong>TS</strong></p>
  
  <pre><code>addContainerAttributes(){
    // Not entirely sure what to put here
  }
  </code></pre>