title: Applying client side permissions in Angular 2
body: <p>I'm creating a simple Angular 2 app in which I'm required to apply client-side permissions 
  (needless to say permissions have also been applied on the server side, but hiding components which the user shouldn't see is necessary.)</p>
  
  <p>I'm not yet familiar with everything Angular has to offer,
  so I'd love to know what way would be acceptable in order to achieve such functionality.</p>
  
  <p>Or if possible, I'd love to receive some comments about the approach I've taken below:</p>
  
  <p>Once the user logs in, he receives a list of permissions that he has, for example: </p>
  
  <ul>
  <li>READ_POSTS</li>
  <li>EDIT_POSTS</li>
  <li>READ_USERS</li>
  <li>EDIT_USERS</li>
  </ul>
  
  <p>These for example, will determine if the user should see edit buttons around the app.</p>
  
  <p>Then I created a directive (basically a replica of <code>*ngIf</code>) that checks if the user has permissions against the <code>UserService</code> which holds the list of permissions the user has.</p>
  
  <p>This is basically what the directive does:</p>
  
  <pre><code>if (hasPermissions) {
    this.viewContainer.createEmbeddedView(this.templateRef);
  }
  else {
    this.viewContainer.clear();
  }
  </code></pre>
  
  <p>And it's used as follows:</p>
  
  <pre><code>&lt;div id="someContainer"&gt;
    &lt;a *myPermissionDirective="'EDIT_POSTS'"&gt;Edit Post&lt;/a&gt;
  &lt;/div&gt;
  </code></pre>
  
  <p>My main problem with this approach is that it seems to get ugly with generic components that contain some elements that <strong>should</strong> be displayed and some that <strong>shouldn't</strong>. </p>
  
  <p>For example, imagine a component called <code>listComponent</code> which we use to display lists, 
  and we'd use it to display a list of users with the ability to edit them, according to the permissions you have: (currently, you can't edit other admin users)</p>
  
  <ul>
  <li>User 1 edit-></li>
  <li>Admin 1 [shouldn't display edit]</li>
  <li>User 2 edit-></li>
  <li>User 3 edit-></li>
  </ul>
  
  <p>In a non generic list component, for example <code>UserListComponent</code> maybe we could refer to user specific permissions, but since we're using a generic ones, how would we know which of these is relevant?:
  EDIT_POSTS, EDIT_USERS, EDIT_ADMIN_USERS, EDIT_ARTICLE, EDIT_SYSTEM_SETTINGS etc'</p>
  
  <p>Thanks in advance.</p>