title: Angular2 function call from html element with no load event (or similiar)
body: <p>I am new to Angular and have run into a problem that seems to have a javascript work around but they aren't very elegant.</p>
  
  <p>I have a model with an array property. I ngfor the list property to build some html selection options. This is all working nicely. The problem comes when I am trying to set default value...the html elements don't have a load event.</p>
  
  <p>I tried numerous html elements and they don't appear to have a load event either but I certainly could be doing it wrong. </p>
  
  <p>I have seen a solution to put javascript tag right after the html and I could do that but I was really looking for a more elegant way in Angular.</p>
  
  <p>I saw this <a href="https://stackoverflow.com/questions/42066490/call-a-component-method-from-html-in-angular2">SO post</a> and thought that was my answer but there is a warning given that I agree with and thus it doesn't appear to be a good solution.
  Regardless I tried it just to see if it would work and I got:</p>
  
  <p>Failed to execute 'setAttribute' on 'Element': '{{loadDefaults()}}' is not a valid attribute name</p>
  
  <pre><code>&lt;span {{loadDefaults()}} &gt;&lt;/span&gt;
  </code></pre>
  
  <p><strong>So how can I fire an AS2 function in the component to load the default values?</strong></p>
  
  <p>HTML (btw this is NOT a full page load so there is no body tag):</p>
  
  <pre><code>&lt;tr&gt;
     &lt;td *ngFor="let loc of locOptions;"&gt;
        &lt;span&gt;{{loc.text}}&lt;/span&gt;
        &lt;input type="radio" name="radiogroup" [value]="loc.value" (change)="onSelectionChange(loc.value)"&gt;
    &lt;/td&gt;
  &lt;/tr&gt;
  </code></pre>
  
  <hr>
  
  <p>Edit</p>
  
  <p>I thought perhaps mistakenly that ngoninit would fire too soon...before the html elements are rendered.</p>
  
  <p>So perhaps what is being suggested is that I add a boolean is default to the model and bind THAT as the element is rendered.</p>