title: Angular binding on dynamic (deep-)property
body: <p>I'm trying to build an Angular-app where an object is generated at runtime. The structure of that object is complete unknown, it can get any type of properties, even nested ones. Now I want Angular to use its binding-mechanism on an specific (nested) property on that object.</p>
  
  <p>Let's say the object is:</p>
  
  <pre><code>const dynamicObject={
    propA: 7,
    propB: 3,
    propC: {
      propD: 5,
      propE: 1
    }
  }
  </code></pre>
  
  <p>and I want to use "propC.propD" for binding in HTML:</p>
  
  <pre><code>&lt;input matInput [value]="dynamicObject.propC.propD"&gt;
  </code></pre>
  
  <p>Now I want to change that binded prop on runtime, let's say to "propA". Therefore I'm using the lodash-"get()"-function (<a href="https://lodash.com/docs/#get" rel="nofollow noreferrer">https://lodash.com/docs/#get</a>).</p>
  
  <p>Typescript:</p>
  
  <pre><code>const actPath='propA';
  </code></pre>
  
  <p>HTML:</p>
  
  <pre><code>&lt;input matInput [value]="_.get(dynamicObject, actPath)"&gt;
  </code></pre>
  
  <p>Which works, angular only triggers the change in that component when the value of propA changes. Problem here is that the get()-method is called the whole time, which is wasted performance.</p>
  
  <p>What also works is using square brackets ("[]") to get the property dynamic:</p>
  
  <pre><code>&lt;input matInput [value]="dynamicObject[actPath]"&gt;
  </code></pre>
  
  <p>But this isn't working for nested props like dynamicObject['propC.propD']. Maybe there is a way to compile the component later with the correct inserted path (componentFactory, etc.)?</p>
  
  <p>This is a simplified example of what I'm doing, so here it maybe seems a bit overcomplicate. 
  Someone got an idea how to achive what I need? Thanks!</p>