title: How can I define a conditional value for this Angular attribute defined into my HTML?
body: <p>I am working on an Angular app using PrimeNG. I am asking if I can conditionally add a PrimeNG component attribute based on the value of a property. Into my HTML page I have something like this:</p>
  <pre><code>&lt;span [ngClass]=&quot;{'isMobileCalendar' : (isMobile2 | async)}&quot;&gt;
      &lt;p-calendar monthNavigator=&quot;true&quot; 
                  yearRange=&quot;1990:2060&quot; 
                  yearNavigator=&quot;true&quot; 
                  formControlName=&quot;date&quot;
                  [touchUI]=&quot;true&quot;
                  [style]=&quot;{'width':'85%'}&quot;&gt;
      &lt;/p-calendar&gt;     
  &lt;/span&gt;
  </code></pre>
  <p>As I can see at the moment I have this attribute set to true: <strong>[touchUI]=&quot;true&quot;</strong>. I also have this <strong>(isMobile2 | async)</strong> variable defined in my Angular component and obtained using the |async.</p>
  <p>I need to implement the following behavior:</p>
  <ul>
  <li>If <strong>(isMobile2 | async)</strong> value is <strong>true</strong> --&gt; set: <strong>[touchUI]=&quot;true&quot;</strong></li>
  <li>If <strong>(isMobile2 | async)</strong> value is <strong>false</strong> --&gt; set: <strong>[touchUI]=&quot;false&quot;</strong></li>
  </ul>
  <p>Is it possible to implement this behavior inline instead to use <strong>ngIf</strong> and define twice <strong>p-calendar</strong> components (based on the value of <strong>isMobile2 | async</strong> value)? If it could be done inline it will be nice and neat</p>