0

I have a directive that i call using [Translation] on the element i want to translate. I have multiple components where it runs with no issues, but there is the one where it gives me the error:

"Can't bind to 'Translation' since it isn't a known property of 'textarea'."

on the line

<textarea [Translation] id="commentTxt" [(ngModel)]="commentTxt" name="commentTxt"
placeholder="Description..." rows="2" class="form-control"></textarea>

if i remove the [Translation] and compile with --live-reload, it compiles sucessfully. If after i add, save and reload, the [Translation] the web-app just works even though the error still shows on the terminal.

I have the translation service declared on a global scope on:

@NgModule({   declarations: [
    ...
    Translation,
    ...   ],

I have been running in circles with no idea of what might be causing this besides typo's and foolproofed if by copy->pasting working elements.

What other probable causes are there that may cause the error given above ?

Mario Figueiredo
  • 232
  • 3
  • 9

1 Answers1

0

Directives/Components can't be defined globally (unlike providers). If component A wants to use directive B, then the module that declares A must import the module that declares and exports B.

Make sure that your directive is both declared in your module and exported:

@NgModule({ declarations: [Translation], exports: [Translation]  })

Also your feature module must of course import the given module:

@NgModule({ imports: [ModuleThatIncludesTranslationDirective]  })

If that does not help, it could also be the definition of your directive:

For structural directives you use *Translation, for attribute directives [Translation]. There is a good post on this topic already, so I won't go into further detail.

code-gorilla
  • 2,231
  • 1
  • 6
  • 21
  • It is already declared and working in every component throughout the app except on this one. Im also not using feature modules. – Mario Figueiredo Oct 28 '20 at 20:46
  • Is the module that declares the Translation directive the same that declares your component? If not, does the module that declares your component also import the module that declares Translation? There is nothing like a global declaration of components/declarations in Angular, this exists only for services. – code-gorilla Oct 28 '20 at 20:52
  • I meant global as in, importing all the components in the app module and declaring the Translation service there aswell. What baffles me is that, if i remove the html line where i "call" the directive, the app works, and then if i add it there, it keeps working untill i stop it and try to recompile everything. – Mario Figueiredo Oct 28 '20 at 23:36