how to work PatternLock using angular 13

Question

How to draw a pattern lock using angular 13 with 9 dots

Vishal Yelve · Answer

Hi Vinoth, Hope this will help you. https://github.com/manekinekko/angular-screen-lock

Abhishek Yadav · Answer

Install Ionic CLI ``` $ npm install -g ionic ``` Install dependencies ``` $ cd $ npm install ``` Run the app on a real device or simulator (to see how Touch ID/ Face ID works) ``` $ ionic cordova emulate ios ``` Or, just want to see the keypad UI: ``` $ ionic serve ``` See more at [Get started with Ionic](https://ionicframework.com/getting-started/) ## Lockscreen Module In this module: - Component: KeypadPage - Service: LockscreenService - sass/modal.scss (for fullscreen modal): needs to be included in global.scss Dependencies: - TapticEngine (https://ionicframework.com/docs/native/taptic-engine) - FingerprintAIO (https://ionicframework.com/docs/native/fingerprint-aio) ### Usage Include LockscreenModule in src/app/app.module.ts ``` import { LockscreenModule } from './plugins/lockscreen/lockscreen.module'; ... @NgModule({ imports: [ BrowserModule, IonicModule.forRoot(), AppRoutingModule, LockscreenModule, ], ``` Include LockscreenService in src/app/home/home.page.ts ``` import { LockscreenService } from '../plugins/lockscreen/services/lockscreen.service'; ... showLockscreen() { const options = { passcode: CORRECT_PASSCODE, enableTouchIdFaceId: this.enableTouchIdFaceId, }; this.lockscreenService.verify(options) .then((response: any) => { const { data } = response; console.info('Response from lockscreen service: ', data); if (data.type === 'dismiss') { this.isCorrect = data.data; } else { this.isCorrect = false; } }) } ```

Vishal Yelve · Answer

https://stackblitz.com/edit/angular-8-lock-screen?file=README.md

vinoth kumar · Answer

Hi Dharmdev, Thanks for ur response.I work pattern lock in angular.but u send the code in ionic .is it possible? Thanks in Advance

vinoth kumar · Answer

Property 'getContext' does not exist on type '{ sceneFunc: () => void; }' Hi Vishal, Thanks for ur response.but it will get the output partially.when i solve the above issue .i will not able to connect more than two dots. original code: const ctx: any = this.getContext(); in my code it will not work my code: // const canvas = document.getElementById('lock'); // const ctx: any = canvas.getContext('2d'); in this code i will connect only two dots. Any suggession Thanks in advance

vinoth kumar · Answer

Hi Vishal, THanks for ur response .But i need pattern lock not a lock screen.Here i have attached the scrrenshot for ur reference.Thanks in avvance

how to work PatternLock using angular 13

Insert Link

Embed YouTube Video

Table Options

Insert Image

Answers (6)