Angular 6 structural directive

0
votes

I have tried about as simple a structural directive with Angular 6 as you can. I created a project and then generated a new directive. The directive was added to the declations section of the @NgModule. Added the directive to the of the app.component.html but I keep getting

Can't bind to 'appHasPermission' since it isn't a known property of 'div'. ("> > ]*appHasPermission="good">

app.component.html

<div *appHasPermission="good">
  <h1>Hello</h1>
</div>

directive

import {Directive, Input, TemplateRef, ViewContainerRef} from '@angular/core';

@Directive({
  selector: '[appHasPermission]'
})
export class HasPermissionDirective {

  @Input() set permissionName(name: any) {
    this.viewContainerRef.createEmbeddedView(this.templateRef);
  }

  constructor(private templateRef: TemplateRef<any>, private viewContainerRef: ViewContainerRef) { }

}

and the module

import { BrowserModule } from '@angular/platform-browser';
import { NgModule } from '@angular/core';

import { AppComponent } from './app.component';
import { HasPermissionDirective } from './has-permission.directive';

@NgModule({
  declarations: [
    AppComponent,
    HasPermissionDirective
  ],
  imports: [
    BrowserModule
  ],
  providers: [],
  bootstrap: [AppComponent]
})
export class AppModule { }

I have looked at tutorials and video and they so exactly what I have done. It has to be something obvious. Any ideas?

1
angularangular-directive

1 Answers

1
votes

There are a couple of ways you can leverage to fix your issue:

1) Change @Input name:

@Input() set appHasPermission(name: any) {
  ...
}

2) Define @Input alias:

@Input('appHasPermission') set permissionName(name: any) {
  ...
}