Custom Angular 2 directive not working

Question!

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>
  `
})


Answers

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
    ]
})


As per the comment It's passed as a table. - assuming the table is the variable @UserInput with a single column of Value, you can use a WHERE EXISTS clause to check for the existence of that value in the user-input fields, and pull the DISTINCT Class values.

Select  Distinct Class
From    YourTable   T
Where Exists
(
    Select  *
    From    @UserInput  U
    Where   T.Value = U.Value
)

Your SQL syntax will vary, but this should point you in the right direction, syntactically.

A full example of how to implement this would be as follows:

Creating the User-defined Table Type

Create Type dbo.UserInput As Table
(
    Value   Varchar (10)
)
Go

Creating the Stored Procedure

Create Proc dbo.spGetClassesByUserInput 
(
    @UserInput dbo.UserInput ReadOnly
)
As Begin
    Select  Distinct Class
    From    YourTable   T
    Where Exists
    (
        Select  *
        From    @UserInput  U
        Where   T.Value = U.Value
    )
End
Go

Calling the Stored Procedure with user input

Declare @Input dbo.UserInput
Insert  @Input
Values  ('A'), ('B'), ('C')

Execute dbo.spGetClassesByUserInput @Input
By : Siyual


This video can help you solving your question :)
By: admin