Custom Angular 2 directive not working

13,327

You need to export TimeDeltaDirective from your TimeModule and then import TimeModule in your AuthModule because your LoginComponent is decalred there, and that's where you want to use your directive. This way, TimeDeltaDirective will be available for use in LoginComponent, as well as in other declared components of AuthModule. So, it should be something like this:

AuthModule

@NgModule({
    imports: [
        BrowserModule,
        FormsModule,
        authRouting,
        TimeModule
    ],
    declarations: [
        AuthComponent,
        LoginComponent,
        SignupComponent,
        LogoutComponent
    ],
    providers: [
        AuthGuard,
        AuthService
    ],
    bootstrap: [ LoginComponent ]
})

TimeModule

@NgModule({
    declarations: [
        ReadableDatePipe,
        TimeDeltaDirective
    ],
    exports: [
        TimeDeltaDirective
    ]
})
Share:
13,327
CodeWarrior
Author by

CodeWarrior

Updated on July 18, 2022

Comments

  • CodeWarrior
    CodeWarrior over 1 year

    Error
    Template parse errors:
    Can't bind to 'time-delta' since it isn't a known property of 'p'.

    Solution in documentation
    I have to add the Directive to declarations array. I've done this already.

    Now my architecture: I have three Modules:

    • AppModule (root)
    • TimeModule (should be a helper module later with some directives)
    • AuthModule (Login, Sign up components and so on)

    The AppModule:

    @NgModule({
        imports: [
            TimeModule,
            BrowserModule,
            FormsModule,
            AuthModule,
            routing,
        ],
        declarations: [
            AppComponent
        ],
        providers: [
            appRoutingProviders
        ],
        bootstrap: [AppComponent]
    })
    

    AuthModule:

    @NgModule({
        imports: [
            BrowserModule,
            FormsModule,
            authRouting
        ],
        declarations: [
            AuthComponent,
            LoginComponent,
            SignupComponent,
            LogoutComponent
        ],
        providers: [
            AuthGuard,
            AuthService
        ],
        bootstrap: [ LoginComponent ]
    })
    

    TimeModule:

    @NgModule({
        declarations: [
            ReadableDatePipe,
            TimeDeltaDirective
        ]
    })
    

    And now I am trying to use my TimeDeltaDirective in a view of LoginComponent. And I already tried to add the directive to the other declarations arrays as well, but this won't work either.

    I am thankful for any support! Thanks

    TimeDeltaDirective:

    import { Directive, ElementRef, Input, Renderer } from '@angular/core';
    
    @Directive({ selector: '[time-delta]' })
    export class TimeDeltaDirective {
        constructor(renderer: Renderer, el: ElementRef) {
            function getTimeDelta(date: Date) {
                var now = new Date();
                return (now.getTime() - date.getTime()) / 1000;
            }
    
            this.delta = getTimeDelta(new Date(this.date));
        }
    
        @Input('date') date: string;
        delta: number;
    }
    

    usage in LoginComponent (example):

    @Component({
        selector: 'login',
        template: `
        <p date="2016-09-28 00:00:00" [time-delta]>{{delta}}</p>
      `
    })