https://github.com/yasu-s/ng-ie11-number-sample
Angular IE11 number directive sample
https://github.com/yasu-s/ng-ie11-number-sample
angular directive ie11
Last synced: 3 months ago
JSON representation
Angular IE11 number directive sample
- Host: GitHub
- URL: https://github.com/yasu-s/ng-ie11-number-sample
- Owner: yasu-s
- License: mit
- Created: 2018-09-14T06:07:18.000Z (almost 8 years ago)
- Default Branch: master
- Last Pushed: 2018-10-01T12:30:13.000Z (almost 8 years ago)
- Last Synced: 2025-04-04T05:41:54.349Z (over 1 year ago)
- Topics: angular, directive, ie11
- Language: TypeScript
- Size: 99.6 KB
- Stars: 2
- Watchers: 1
- Forks: 0
- Open Issues: 0
-
Metadata Files:
- Readme: README.md
- License: LICENSE
Awesome Lists containing this project
README
# Overview
This is a sample number input directive compatible with IE11.
# System requirements
* Node.js 8.9.x
* TypeScript 2.9.x
* Angular 6.1.x
# Operation check
## 1. Download Sample
```
git clone git@github.com:yasu-s/ng-ie11-number-sample.git
```
## 2. Installing packages
```
cd ng-ie11-number-sample
npm install
```
## 3. Launch sample application
```
npm start
```
## 4. Execution result
# Sample source
## src/app/custom-number.directive.ts
```typescript
import { Directive, ElementRef, HostListener } from '@angular/core';
@Directive({
selector: 'input[customNumber]'
})
export class CustomNumberDirective {
/** input */
private inputElement: HTMLInputElement;
/**
* CustomNumberDirective
* @param elementRef
*/
constructor(private elementRef: ElementRef) {
if (!this.elementRef || !this.elementRef.nativeElement) return;
this.inputElement = this.elementRef.nativeElement;
}
/**
* Enter numerical value only.
* @param event KeyboardEvent
*/
@HostListener('keypress', ['$event'])
onKeyPress(event: KeyboardEvent) {
if (!/^\d*$/.test(event.key))
event.preventDefault();
}
/**
* Convert to numerical value when focus is off.
*/
@HostListener('blur')
onBlur(): void {
if (!this.inputElement) return;
const value = this.inputElement.value;
if (value === null || value === '') return;
const num = Number(value);
if (!isNaN(num))
this.inputElement.value = num.toString();
}
}
```
## src/app/app.component.ts
```typescript
@Component({
selector: 'app-root',
template: `
IE11 Number Directive Sample
- type=text: - {{ text1 }}
- type=number: - {{ num1 }}
- type=number+customNumber: - {{ num2 }}
`
})
export class AppComponent {
text1: string;
num1: number;
num2: number;
}
```