docs: add docs for prompt output

alQlagin · Feb 13, 2020 · ae6e459 · ae6e459
1 parent d31fc90
commit ae6e459
Show file tree

Hide file tree

Showing 3 changed files with 12 additions and 2 deletions.
diff --git a/README.md b/README.md
@@ -36,6 +36,15 @@ Positioning of install panel is your choice. Component does not add any css or b
 </ngx-pwa-install>
 ```
 
+To handle when your content will be shown use `prompt` output. This may be useful for animation state
+```typescript
+<ngx-pwa-install #pwa (prompt)="showPanel=true">
+    <div [@animatePanel]="showPanel" class="pwa-install-panel" (click)="pwa.install()">
+       Click to install
+    </div>
+</ngx-pwa-install>
+```
+
 To import only component outside of root module import module without `.forRoot()`
 
 ```typescript

diff --git a/projects/ngx-pwa-install-demo/src/app/app.component.html b/projects/ngx-pwa-install-demo/src/app/app.component.html
@@ -77,6 +77,7 @@
         </a>
         on the saved event. It will show a modal dialog, asking the user to to add your app to their home screen.
       </p>
+      <p>Output <strong>(prompt)</strong> will be fired when beforeinstallpromopt event happened. This can be useful for animations </p>
     </mat-card-content>
   </mat-card>
 </div>

diff --git a/projects/ngx-pwa-install-demo/src/app/app.component.ts b/projects/ngx-pwa-install-demo/src/app/app.component.ts
@@ -49,8 +49,8 @@ export class AppComponent implements OnInit {
   `;
 
   panelExampleText = `
-  <ngx-pwa-install #pwa>
-    <div class="pwa-install-panel">
+  <ngx-pwa-install #pwa (prompt)="showPanel=true">
+    <div class="pwa-install-panel" [@pwaPanelAnimation]="showPanel">
       <mat-card>
         You can install this application to your device
         <button mat-raised-button