title: Angular [hidden] doesn't work
body: <p>I have userPermission() function that works correctly, but component app-chat that depends on it always shows, even if userPermission() return false.</p>
  
  <p>home.ts file</p>
  
  <pre><code>async userPermission(channel, channelId) {
      if (channel === undefined) {
          return false;
      } else if (channelId &amp;&amp; channel.status === 'open') {
          return true;
      } else if (channelId &amp;&amp; channel.status === 'private' &amp;&amp; await this.inChannel(channelId)) {
          console.log('private have permission');
          return true;
      } else {
          return false;
      }
  }
  </code></pre>
  
  <p>home.html file:</p>
  
  <pre><code>&lt;app-chat [hidden]="!userPermission(channel, channelId) | async" [channelId]="channelId" [channel]="channel"&gt;&lt;/app-chat&gt;
  </code></pre>
  
  <p>I also wrote</p>
  
  <pre><code>[hidden] {
    display: none;
  }
  </code></pre>
  
  <p>But this doesn't work.</p>