Prueba Técnica MOVISAT.

Instalar la librería

Lo primero en el proyecto principal es agregar este comando en la terminal:

npm i "ruta de archivo .tgz"

Se instalará la librería en nuestra carpeta node_modules junto con todas las otras librerías del proyecto.

Así es como se llama la librería y ya se encuentra dentro de node_modules.

Reemplazar rutas para styles y html

Luego, se deberá copiar estas 2 rutas:

La de index.html y de styles.css. Y las copiaremos en el archivo angular.json que se encuentra en el proyecto:

Modificaremos estas líneas tachadas, tal cual como muestra la imagen :

Importación de componentes

Luego, para utilizar los componentes se deben primero que todo importar en el app.component.ts principal de tu proyecto, por lo general es en src/app/

Los 3 principales componentes de esta librería son estos que dejo subrayado en verde.

Archivo HTML

Una vez importados, se debe dirigir al archivo .html principal, en este caso siendo un proyecto común sería:

El archivo app.component.html que se encuentra en la misma carpeta del archivo donde realizamos la importación de los componentes. Una vez dentro del archivo .html se debe seguir con la estructura que se muestra a continuación:

<div class="container">
  <ngx-parent></ngx-parent>         <!--componente de parent donde va la card con el texto --> 
  <div class="button-container">
    <ngx-void-button                     
      [text]="'Cancelar'"
      [btnClass]="'btn btn-secondary'"
      ></ngx-void-button>                <!--primer botón de cancelar, sólo se le cambia el text y la class --> 
      <ngx-void-button
      [text]="'Aceptar'"
      [btnClass]="'btn btn-primary'"
    ></ngx-void-button>                  <!--segundo botón reutilizable con propiedades distintas --> 
    <ngx-void-button
      [text]="'Abrir Modal'"
      [btnClass]="'btn btn-success'"
      data-bs-toggle="modal"
      data-bs-target="#exampleModal"
    ></ngx-void-button>                 <!--Tercer botón --> 
  </div>
</div>

<ngx-modal></ngx-modal>                <!--Componente modal --> 

Muestra

Si existe otro contenido en este archivo borrarlo por completo, reemplazándolo por el de la imagen.

Una vez realizado el paso anterior te deberá aparecer algo así:

Donde el único botón que realiza una acción sería el “Abrir Modal”:

Que muestra una modal de ejemplo para poder modificar a gusto 👌.