ng-screen-lock is a beautiful component based on angular 2+,provide lock screen ui like windows or MacOS,you can check this demo to preview.

Installation

yarn add ng-scrren-lock

or

npm install ng-screen-lock

Usage

You should import ScreenLockModule into your application like this:

imports: [
  ScreenLockModule,
  // other modules you want import...
];

we provide two modes of lock screen:

1. For panel mode, you can use ScreenLockComponent directly like this:

@Component({
  template: `
    <screen-lock [password]="'123456'" [(lock)]="lock">
      <p>The scrren will be locked if the lock property become true</p>
    </screen-lock>
  `,
})
class TestScreenLockComponent {
  lock = false;
}

2. For full screen mode, you can inject ScreenLockService like this:

@Component({
  template: `
    <button  (click)="lockScreen()">
       <p>click to lock with full screen mode</p>
    </button>
`,
})
class TestScreenLockServiceComponent {
  constructor(private screenLock: ScreenLockService) {}

  lockScreen(){
    this.screenLock.lock({ password: '123456' };
  }
}