https://github.com/nitin27may/ngdirectives
A npm package which has collection of directives , it will change the appearance or behavior of html elements.
https://github.com/nitin27may/ngdirectives
angular directive module npm npm-package typescript
Last synced: 11 months ago
JSON representation
A npm package which has collection of directives , it will change the appearance or behavior of html elements.
- Host: GitHub
- URL: https://github.com/nitin27may/ngdirectives
- Owner: nitin27may
- License: mit
- Created: 2020-06-16T03:33:57.000Z (about 6 years ago)
- Default Branch: master
- Last Pushed: 2022-06-03T03:15:43.000Z (about 4 years ago)
- Last Synced: 2024-12-18T07:56:28.631Z (over 1 year ago)
- Topics: angular, directive, module, npm, npm-package, typescript
- Language: TypeScript
- Homepage: https://www.npmjs.com/package/ng-directives
- Size: 605 KB
- Stars: 0
- Watchers: 2
- Forks: 0
- Open Issues: 3
-
Metadata Files:
- Readme: README.md
- License: LICENSE
Awesome Lists containing this project
README
# NgDirectives
A collection of `directives` which will change the appearance or behavior of html elements. We have considered common scenarios, created directives for it and bundled all directives as NPM package. This library is Ivy Compatible and is tested against an Angular 8, 9 app.
* It is developed using `Angular >=9.0.0` and its newly introduced `ng g library` schematics.
* This library is part of NgDirectives project and it is generated with [Angular CLI](https://github.com/angular/angular-cli) version 9.0.6.
* Library location: `projects/ng-directives` directory of this repository.
## Directive List
| selector | Description |
| ------------------| :---------------------------------------------: |
| `ngDirNumberOnly` | Allow only number in input (on type and paste) |
## Examples/Demo
* A simple Example can be found under `src/app` directory of this repository.
## Installation
`npm i ng-directives`
## Usage
1) Register the `NgDirectivesModule` in your app module.
> `import { NgDirectivesModule } from "ng-directives";`
```typescript
import { BrowserModule } from "@angular/platform-browser";
import { NgModule } from "@angular/core";
import { AppRoutingModule } from "./app-routing.module";
import { AppComponent } from "./app.component";
import { NgDirectivesModule } from "ng-directives";
@NgModule({
declarations: [AppComponent],
imports: [BrowserModule, AppRoutingModule, NgDirectivesModule],
providers: [],
bootstrap: [AppComponent],
})
export class AppModule {}
```
2) Use the directive `(NgDirectives)` in your component.
```typescript
import { Component } from "@angular/core";
@Component({
selector: "ng-dir-root",
template: `
Age
`,
styleUrls: ['./app.component.css']
})
export class AppComponent {
}
```
## Running the example in local env
* `npm i`
* Run `ng serve` for a dev server and running the demo app. Navigate to `http://localhost:4200/`. The app will automatically reload if you change any of the source files.
## Build the NgDirectives module
Run `ng build NgDirectives` to build the library. The build artifacts will be stored in the `dist/ng-directives` directory. Use the `--prod` flag for a production build.
## Credits
I want to thanks entire [Angular](https://angular.io) team for creating this awesome framework.