Angular 6 numberonly directive not working

Question

I have created a directive from https://www.davebennett.tech/angular-4-input-numbers-directive/ so that I can restrict users to input only digits in phone number. In src/app/app.sharerd.module.ts file, I did the below code to import the directive:

import { NumberOnlyDirective } from './number.directive';
declarations: [..., ..., NumberOnlyDirective], ...
export class SharedModule { }

Now, under /src/ folder I have created folders named modules/auth/component/.

Under auth.module.ts within the /src/auth/ folder, I have done the following:

import { NgModule } from '@angular/core';
import { SharedModule } from '../../app/app.shared.module';
...
...

Now, in the signup.html under /src/auth/component/:

<input type="text" name="phone" myNumberOnly ... > ...
...

I can still enter characters / special chars etc into the text box however, I did not see any error in console/cli.

Answer 1

When you are using custom directive/pipe in a shared module, you need to exports it also.

Basically in your tutorial, he created the directive and declared it in the app module. But in your example, you put your directive in a shared module, so you need to put your directive in the declarations bracket but also in the exports.

shared.module.ts :

@NgModule({
    /* ... */
    declarations: [YourDirective],
    exports: [YourDirective]
    /* ... */
})