Skip to main content

How to create directive in angular 2 -- Limit the length of a string using angular 2/ionic 2

How to create directive in angular 2 -- Limit the length of a string using angular 2/ionic 2

 In angular2 it will look like:

import {Directive, Input} from '@angular/core';

@Directive({
  selector: '[limit-to]',
  host: {
    '(keypress)': '_onKeypress($event)',
  }
})
export class LimitToDirective {
  @Input('limit-to') limitTo; 
  _onKeypress(e) {
     const limit = +this.limitTo;
     if (e.target.value.length === limit) e.preventDefault();
  }
}
Don't forget to register directive in NgModule sth like:
@NgModule({
  imports: [ BrowserModule ],
  declarations: [ App, LimitToDirective ],  //keep this in declaration only
  bootstrap: [ App ]
})
export class AppModule {}
And then use it like:

<input limit-to="4" type="number" placeholder="enter first 4 digits: 09XX">

https://plnkr.co/edit/sgMubU0p8Z5BPzAIKsf4?p=preview

 Confirm Directive
https://plnkr.co/edit/KMfnzrmSx0ywKp6ztaNN?p=preview

Comments

Post a Comment

Popular posts from this blog

Error: ios-deploy was not found. Please download, build and install version 1.9.0 or greater from https://github.com/phonegap/ios-deploy into your path, or do 'npm install -g ios-deploy' solution this solved the issue sudo npm install -g ios-deploy -unsafe-perm

Error: ios-deploy was not found. Please download, build and install version 1.9.0 or greater from https://github.com/phonegap/ios-deploy into your path, or do 'npm install -g ios-deploy' solution this solved the issue sudo npm install -g ios-deploy -unsafe-perm
7 comments
Read more

How to revoke code from github?

How to revoke code from github? https://stackoverflow.com/questions/6655052/is-there-a-way-to-rollback-my-last-push-to-git Since you are the only user: git reset --hard HEAD@{1} git push -f git reset --hard HEAD@{1} ( basically, go back one commit, force push to the repo, then go back again - remove the last step if you don't care about the commit ) Without doing any changes to your local repo, you can also do something like: git push -f origin <sha_of_previous_commit>:master
Post a Comment
Read more

preg expression regular expression details and introduction

preg expression regular expression details and introduction Useful regex examples Reference: http://www.catswhocode.com/blog/15-php-regular-expressions-for-web-developers REGULAR EXPRESSIONS SYNTAX Regular Expression Will match… foo The string “foo” ^foo “foo” at the start of a string foo$ “foo” at the end of a string ^foo$ “foo” when it is alone on a string [abc] a, b, or c [a-z] Any lowercase letter [^A-Z] Any character that is not a uppercase letter (gif|jpg) Matches either “gif” or “jpg” [a-z]+ One or more lowercase letters [0-9.-] Аny number, dot, or minus sign ^[a-zA-Z0-9_]{1,}$ Any word of at least one letter, number or _ ([wx])([yz]) wy, wz, xy, or xz [^A-Za-z0-9] Any symbol (not a number or a letter) ([A-Z]{3}|[0-9]{4}) Matches three letters or four numbers PHP REGULAR EXPRESSION FUNCTIONS Function Description preg_match() The preg_match() function searches string for pattern, returning true if pattern exists, and false otherwise. preg_match_
Post a Comment
Read more