## How to install demo SkyId in new project Angular?
### `1. Install dependencies :`

**Note: this is a one-way operation. Once you `eject`, you can't go back!**

* ~  run :
                            
 npm install skyid-sdk-web

 npm install jquery // version 3.7.0



### `2.In your components import the Jquery and the SDK Web :`
       

     //@ts-ignore
        import * as  $  from 'jquery' ; 
     //@ts-ignore
        import * as skyid_imp from '../assets/skyid_impl_v1.js'; //Location of 'skyid_impl_v1.js' file

      ...


                        
### `3.copy the code bellow inside the ngAfterView(){...} lifecycle Hook:`


       ngAfterViewInit(): void {
     skyid_imp.initViewComponent()
      // init SDK
    skyid_imp.skyid_fa_remote_sdk_initialization()

    $( document ).ready(function() {
    $("#skyid_fa_document_container").show(500);

    $( "#skyid_da_smart_ocr_button" ).click(function() {
            skyid_imp.skyid_fa_auth_request_smart_ocr();
            $("#skyid_da_smart_ocr_button").prop('disabled', true);
            $("#skyid_da_smart_ocr_button").html("extraction d'information en cours ...");
    });

    $( "#skyid_fa_next" ).click(function() {
        $( "#skyid_fa_start_button" ).show()
      skyid_imp.show_matching_step();
    });

    $( "#skyid_fa_start_button" ).click(function() {
              // start SDK face analysis
              skyid_imp.start_face_scan() ;
                   $( "#skyid_fa_start_button" ).hide();
                   $( "#msg" ).html("Scanne de visage en cours ....");
     });

    });

    const fileSelector = document.getElementById('file-upload');
    fileSelector!.addEventListener('change', (event) => {
      if(event.target instanceof HTMLInputElement) {
      const myimage: File | null = event.target.files ? event.target.files[0] : null;
      if(myimage) {
           skyid_imp.readImage(myimage);
      }
    }

    });


    // demo call
    skyid_imp.skyid_fa_auth_request_smart_ocr_recover("1671122267893033679")
    }

                        
### `4.Copy the HTML code :`
                            
<div class="wrapper">
  <div id="skyid_fa_document_container">
          
    <div id="skyid_document_browser">
        <label For="file-upload" class="custom-file-upload" id="doc_file_label">
             Charger votre document ici
        </label>
        <input id="file-upload" type="file" value="" accept="image/png, image/jpeg"/>
        <button   id="skyid_da_smart_ocr_button" class="button-36" role="button">Extraire les information de document</button>
        <button   id="skyid_fa_next" class="button-36" role="button">Suivant</button>
        <br/><br/>
        <img id="doc_img" src='../assets/no-img-placeholder.png' width="640px" height="480px" alt=""/>
        <p id="extracted_feilds"></p>
    </div>
    <div id="liveness_frame">
        <div id="skyid_liveness" ></div>
        <br/><br/>
        <button   id="skyid_fa_start_button" class="button-36" role="button">Démarrer</button>
        <br/>
        <div id="msg"></div>
        
    </div>
  </div>
  
  

                        
### `5.Add CSS style:`
                            

     html, body {
    height: 100%;
    width: 100%;
    margin: 0;
    background-color: #f5f5f5;
    display: table;
    }

    footer {
    background-color: black;
    font-size:12px;
    display: table-row;
    padding: 20px;
    height: 0;
    font-family: Arial, Helvetica, sans-serif;
    }

    .column {
    float: left;
    padding: 20px;
    }

    /* Clear floats after the columns */
    .row:after {
    content: "";
    display: table;
    clear: both;
    }
    .button-36 {
    background-image: linear-gradient(92.88deg, #455EB5 9.16%, #5643CC 43.89%, #673FD7 64.72%);
    border-radius: 8px;
    border-style: none;
    box-sizing: border-box;
    color: #FFFFFF;
    cursor: pointer;
    flex-shrink: 0;
    font-family: "Inter UI","SF Pro Display",-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,Oxygen,Ubuntu,Cantarell,"Open Sans","Helvetica Neue",sans-serif;
    font-size: 16px;
    font-weight: 500;
    height: 4rem;
    padding: 0 1.6rem;
    text-align: center;
    text-shadow: rgba(0, 0, 0, 0.25) 0 3px 8px;
    transition: all .5s;
    user-select: none;
    -webkit-user-select: none;
    touch-action: manipulation;
    }

    .button-36:hover {
    box-shadow: rgba(80, 63, 205, 0.5) 0 1px 30px;
    transition-duration: .1s;
    }

    @media (min-width: 768px) {
    .button-36 {
     padding: 0 2.6rem;
     }
     }

     input[type="file"] {
    display: none;
    }

     .custom-file-upload {
     border: 1px solid #ccc;
     background-image: linear-gradient(92.88deg, #455EB5 9.16%, #5643CC 43.89%, #673FD7 64.72%);
     border-radius: 8px;
     color: #FFFFFF;
    flex-shrink: 0;
    font-family: "Inter UI","SF Pro Display",-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,Oxygen,Ubuntu,Cantarell,"Open Sans","Helvetica Neue",sans-serif;
    display: inline-block;
    padding: 6px 12px;
    cursor: pointer;
    }

    .custom-file-upload:hover {
    box-shadow: rgba(80, 63, 205, 0.5) 0 1px 30px;
    transition-duration: .1s;
    }

    #skyid_fa_document_container{
      margin: auto;
    width: 90%;
    text-align: center;
    }
    #skyid_da_smart_ocr_button, #skyid_fa_next,#skyid_fa_document_container,#skyid_fa_start_button{
      display: none;
    }
    #extracted_feilds{
      display:none;
    border: 2px solid #000;
    overflow: scroll;
    }
    #liveness_frame{
    display: none;
    text-align: center;
    }
    #skyid_liveness{
    display: flex;
    justify-content: center;
    }




# SkyidAngularDemo

This project was generated with [Angular CLI](https://github.com/angular/angular-cli) version 15.1.5.

## Development server

Run `ng serve` for a dev server. Navigate to `http://localhost:4200/`. The application will automatically reload if you change any of the source files.

## Code scaffolding

Run `ng generate component component-name` to generate a new component. You can also use `ng generate directive|pipe|service|class|guard|interface|enum|module`.

## Build

Run `ng build` to build the project. The build artifacts will be stored in the `dist/` directory.

## Running unit tests

Run `ng test` to execute the unit tests via [Karma](https://karma-runner.github.io).

## Running end-to-end tests

Run `ng e2e` to execute the end-to-end tests via a platform of your choice. To use this command, you need to first add a package that implements end-to-end testing capabilities.

## Further help

To get more help on the Angular CLI use `ng help` or go check out the [Angular CLI Overview and Command Reference](https://angular.io/cli) page.
