title: Enable/Disable Link/Button with [routerLink] based on Router Config data
body: <p>I have the following route configuration:</p>
  
  <pre><code>export const AppRoutes: Routes = [
    {
      path: 'secure', component: SecureInformationComponent, data: { permission: 'view_secure_information'}
    }
  ]
  </code></pre>
  
  <p>Is it possible that every element which is using the routerLink directive is going to be disabled/enabled whether the user has the permission 'view_secure_information'? Such as:</p>
  
  <pre><code>&lt;a [routerLink]="['secure']"&gt;Go to secure area of the application&lt;/a&gt;
  </code></pre>
  
  <p>The only possible solution which came to my mind is to implement a CanActivate guard which does the check based on data within the route. 
  But I also have to add on every [routerLink] attached anchor or button which navigates to this secure route another directive which does the same check and disables/enables the element such as:</p>
  
  <pre><code>&lt;a [routerLink]=['secure']" *hasPermission="view_secure_information"&gt;Go to secure area of the application&lt;/a&gt;
  </code></pre>
  
  <p>Although this works I would have redundant code and the checks are quite decentralized.</p>