Angular 4 - Structural directive Can't bind to X since it isn't a known property of Y

import { CredantialsStorageService } from './_services/credantials-storage.service';
import { Directive, Input, TemplateRef, ViewContainerRef } from '@angular/core';
import { some } from 'lodash';

@Directive({
  selector: '[accessRoles]'
})
export class AccessRolesDirective {
  constructor(
    private templateRef: TemplateRef<any>,
    private viewContainer: ViewContainerRef,
    private readonly credantials: CredantialsStorageService) { }
  
  @Input() set accessRoles(roles: [string]) {
    let isValidArrayWithRoles = roles != null && Array.isArray(roles) && roles.length > 0;
    let isUserInOneOfTheRoles = isValidArrayWithRoles && 
        some(this.credantials.get().roles , role => roles.indexOf(role) > -1);

    if (isUserInOneOfTheRoles) {
      this.viewContainer.createEmbeddedView(this.templateRef);
    } else {
      this.viewContainer.clear();
    }
  }

}

  <a class="nav-item nav-link text-uppercase" routerLink="/admin" routerLinkActive="active" *accessRoles="[admin]">
          <i class="fa fa-question-circle"></i>
          <span translate>Admin</span>
        </a>