title: how to dynamically add property for a html tag based on some condition in angular 4 using typescript
body: <p>I want to add the property of mat-accordion "displayMode" based on the value given for a variable in app component. </p>
  
  <p>I am using ng-if to make it. But Im getting error.</p>
  
  <pre><code>&lt;mat-accordion class="accord-align" *ngIf="displayType" then displayMode="{{displayType}}" &gt;&lt;br/&gt;
  &lt;&lt;Some tags and text here&gt;&gt;&lt;br/&gt;
  &lt;/mat-accordion&amp;gt;&lt;br/&gt;
  </code></pre>
  
  <p>If I provide like this *ngIf="displayType" then displayMode="{{displayType}}", then its showing error saying </p>
  
  <pre><code>compiler.es5.js:1694 Uncaught Error: Template parse errors:&lt;&gt;&lt;br/&gt;
  Parser Error: Bindings cannot contain assignments at column 30 in [displayType then displayMode={{displayType}}] in ng:///AppModule/AccordionComponent.html@1:38 ("&amp;lt;div id="divi-align"&amp;gt; &lt;br/&gt;
    &amp;lt;mat-accordion class="accord-align" [ERROR -&amp;gt;]*ngIf="displayType then displayMode={{displayType}}" &amp;gt;
      &amp;lt;mat-expansion-panel  class="panel1-align""): ng:///AppModule/AccordionComponent.html@1:38&lt;br/&gt;
  Can't bind to '*ngIf' since it isn't a known property of 'mat-accordion'.&lt;br/&gt;
  1. If 'mat-accordion' is an Angular component and it has '*ngIf' input, then verify that it is part of this module.&lt;br/&gt;
  2. If 'mat-accordion' is a Web Component then add 'CUSTOM_ELEMENTS_SCHEMA' to the '@NgModule.schemas' of this component to suppress this message.&lt;br/&gt;
  3. To allow any property add 'NO_ERRORS_SCHEMA' to the '@NgModule.schemas' of this component. ("&amp;lt;div id="divi-align"&amp;gt;
    &amp;lt;mat-accordion class="accord-align" [ERROR -&amp;gt;]*ngIf="displayType then displayMode={{displayType}}" &amp;gt;
      &amp;lt;mat-expansion-panel  class="panel1-align""): ng:///AppModule/AccordionComponent.html@1:38&lt;br/&gt;
  </code></pre>