TCB: How can I use jQuery in Angular 2... How can I use iPhone like password input...

Hello Buddies.

First of all, in my quest to get acquainted with the all new glittery NG2, I think I was the quickest in making myself believe that NG2 won't allow jQuery to run in its playground.

But as I continued some RnD, I was amazed to see, it allows, though in the style it likes.

Now that won't stop us to open the throttle of jQuery here, as this one always remains the lovable UI library of many.

Writing this from a novice's perspective towards Angular 2 and jQuery, this might indulge you in getting started confidently.

The case study selected here comprises of the following requirements -

1. Get the password from the user.
2. Only show the entered character, while masking the earlier characters.
3. Something like iPhone password text box...

So here it goes...

Taking further the older post, additionally we install jQuery here -

npm install jquery --save

npm install @types/jquery --save-dev

In the component - pagePwd.component.ts, have the following code lines -

import {Component, ViewChild, ElementRef, AfterViewInit} from '@angular/core';

// this allows the $ to be available as in case of normal jQuery usagevar $ = require('jquery');

@Component({
  selector: 'app-pagePwd',
  providers: [],
  templateUrl: './pagePwd.component.html'})


export class CheckPwdComponent {

// this one is for replacing document ready part, that is done in script tags otherwise
ngAfterViewInit() {

    var placeholder = "";
    var originalPwd = "";
    var flag=0;

    // part 1
    $("#shownPwd").on('keydown',function(e){
      console.log(">>>>>>>>>>>>>" + e.keyCode);
      if (e.keyCode != 8 && e.keyCode != 16 && !(e.keyCode>=37 && e.keyCode<=40) && e.keyCode != 46) {
        flag++;
        if(flag>1){
          e.preventDefault();
        }
      }
    });

    // part 2 
    $('#shownPwd').bind("cut copy paste",function(e) {
      e.preventDefault();
    });

    // part 3
    $("#shownPwd").keyup(function(event){

      flag = 0;

      console.log($(this).val());
      var endChar = $(this).val().substr($(this).val().length - 1);
      if (endChar != "•") {
        originalPwd += $(this).val().substr($(this).val().length - 1);
      }
      console.log('original pwd = '+originalPwd);
      placeholder = $(this).val().replace(/./g,"•");
      $(this).val(placeholder);
      console.log($(this).val());

      if (event.keyCode == 8){
        originalPwd = originalPwd.substring(0, originalPwd.length - 1);
        console.log('after deletion, org pwd = '+originalPwd);
      }
    })

  }

}

Now have a template component as stated above - pagePwd.component.html, and include this one -

<!DOCTYPE html>
<html lang="en">
<head>

</head>
<body>
<meta charset="UTF-8">
    <title>Check PWD</title>

    <input type="text" id="shownPwd" placeholder="password">

</body>
</html>

Explanation -

Part 1:

Takes care of the long key press, and editing scenarios like arrow keys, backspace and delete keys.

Part 2:

Preventing cut copy paste.

Part 3:

Actual logic, i.e. take the latest entered character and maintain password, while replacing the earlier characters.

Do try this to experience, and please share your suggestions and thoughts for improving the same.

The main question '?'

Why ngAfterViewInit

That's because in this world of NG2, script tags are barely recognized.

So the mighty developers have provided this as a work around for document ready.

Console output -

Happy Coding buddies... take care... we will meet again with some more interesting topics soon...

TCB

How can I use jQuery in Angular 2... How can I use iPhone like password input...

No comments:

Post a Comment

Featured post

Oracle SQL Scheduled Jobs - An Interesting Approach