CODEWITHSUNDEEP
angularangular-directiveangular-library
Iraklis Bekiaris
Iraklis Bekiaris

Reputation: 1221

Cannot import directive from angular library

I have developed this Directive inside my lib

@Directive({
    selector: '[layoutHeaderTitle]',
    standalone: true
})
export class HeaderDirective {

    constructor(
        readonly tpl: TemplateRef<any>,
        private readonly headerService: HeaderService) {
        this.headerService.headerTitleTpl = tpl;
    }

    ngOnDestroy(): void {
        console.log('DESTROY');
        this.headerService.clear();
    }

}

Here is the lib folder structure

enter image description here

Here is the public-api.ts

export * from "./src/layout.component";
export * from "./src/layout.module";
export * from "./src/header/header.component";
export * from "./src/header/header.directive";
export * from "./src/header/header.service";

here is the layout.module.ts

@NgModule({
  declarations: [
    LayoutComponent,
    SideNavComponent,
    HeaderComponent,
    HeaderDirective
  ],
  imports: [
    RouterModule,
    BrowserAnimationsModule,
    BrowserModule,
    CommonModule
  ],
  exports: [
    LayoutComponent,
    HeaderComponent,
    HeaderDirective
  ],
})
export class LayoutModule { }

here is the app.modules.ts

@NgModule({
  declarations: [
    AppComponent
  ],
  imports: [
    CommonModule,
    BrowserModule,
    AppRoutingModule,
    LayoutModule
  ],
  bootstrap: [AppComponent]
})
export class AppModule { }

PROBLEM:

When I use it to my project like this:

<div [layoutHeaderTitle]>
    title
</div>

I get an error

Can't bind to 'layoutHeaderTitle' since it isn't a known property of 'div'.

Upvotes: 2

Views: 1726

Answers (1)

heaxyh
heaxyh

Reputation: 623

Your directive is standalone. So you need to import in the component where you use it. Or remove the standalone flag. Here is an example. Also, I suggest using your selector without the brackets on the div.

Upvotes: 2

Related Questions