CODEWITHSUNDEEP
angulartypescript
Hasan Aga
Hasan Aga

Reputation: 774

how to export an angular project for offline work

i have built a simple form for a relative of mine to use as data entry in her practice, i need to export the thing so it works completely offline

the form simply takes data and prints it, so i have no need to send data or save it anywhere. what is the best way to go about doing this?

here is the ts file

import { Component, OnInit } from '@angular/core';
import { CommService } from '../services/comm.service';



@Component({
  selector: 'app-form',
  templateUrl: './form.component.html',
  styleUrls: ['./form.component.css']
})
export class FormComponent implements OnInit {


  user = {
    Doctor: '',
    Patient: '',
    Type: '',
    Report: '',
    presentation : '',
    single : '',
    FH : '',
    FM : '',
    BPD : '',
    FL : '',
    placenta : '',
    liq : '',
  };


  constructor(private CommService: CommService) { }


  ngOnInit() {
    this.CommService.setData(this.user);

  }

}

take a look at this rather lengthy code if you want

<div class=" uk-animation-slide-left-small uk-grid">

  <div class="uk-width-1-3 uk-height-large uk-card uk-card-default uk-card-small uk-card-body uk-position-top-center">
    <form>
      <fieldset class="uk-fieldset ">
        <div class="uk-margin">
          <input class="uk-input uk-form-width-1-1 uk-form-small" type="text" placeholder="Dear Doctor" name='user.Doctor' [(ngModel)]="user.Doctor">
        </div>

        <div class="uk-margin" dir="rtl">
          <input class="uk-input uk-form-width-1-1 uk-form-small" type="text" placeholder="اسم المريض" name='user.Patient' [(ngModel)]="user.Patient">
        </div>

        <div class="uk-margin ">
          <p style="float: left;">Ultrasound of : </p>
          <select class=" uk-select uk-width-1-3@s uk-form-small " name='user.Type' [(ngModel)]="user.Type">
            <option>Fetus</option>
            <option>Pelvis</option>
            <option>Abdomen</option>
            <option>Breast</option>
          </select>
        </div>


        <!-- <div class="uk-margin ">
            <textarea class="uk-textarea uk-height-medium" rows="5" placeholder="Report" name='user.Report' [(ngModel)]="user.Report"></textarea>
          </div> -->

      </fieldset>
    </form>




    <ng-container *ngIf="user.Type === 'Abdomen'">

      <form class="uk-animation-fade ">

        <div class="uk-margin">
          <input class="uk-input uk-form-width-medium uk-form-large" type="text" placeholder="abdo">
        </div>

        <div class="uk-margin">
          <input class="uk-input uk-form-width-medium" type="text" placeholder="Default">
        </div>

        <div class="uk-margin">
          <input class="uk-input uk-form-width-medium uk-form-small" type="text" placeholder="Small">
        </div>

      </form>
    </ng-container>

    <ng-container *ngIf="user.Type === 'Pelvis'">

      <form class="uk-animation-fade ">

        <div class="uk-margin">
          <input class="uk-input uk-form-width-medium uk-form-large" type="text" placeholder="pelvis">
        </div>

        <div class="uk-margin">
          <input class="uk-input uk-form-width-medium" type="text" placeholder="Default">
        </div>

        <div class="uk-margin">
          <input class="uk-input uk-form-width-medium uk-form-small" type="text" placeholder="Small">
        </div>

      </form>
    </ng-container>

    <ng-container *ngIf="user.Type === 'Breast'">

      <form class="uk-animation-fade ">

        <div class="uk-margin">
          <input class="uk-input uk-form-width-medium uk-form-large" type="text" placeholder="breast">
        </div>

        <div class="uk-margin">
          <input class="uk-input uk-form-width-medium" type="text" placeholder="Default">
        </div>

        <div class="uk-margin">
          <input class="uk-input uk-form-width-medium uk-form-small" type="text" placeholder="Small">
        </div>

      </form>
    </ng-container>

    <ng-container *ngIf="user.Type === 'Fetus'">

      <form class="uk-form-horizontal uk-margin-small uk-animation-fade">



        <div class="uk-margin-large-right">

          <div class="uk-flex-inline ">
            <span class="uk-form-label uk-margin-small-right uk-text-bold "> Presentation </span>
            <label class="uk-margin-medium-right">
              <input class="uk-radio " type="radio" name="radio1" value="Cephalic" [(ngModel)]="user.presentation"> Cephalic </label>
            <label class="uk-margin-medium-right">
              <input class="uk-radio" type="radio" name="radio1" value="Breech" [(ngModel)]="user.presentation"> Breech </label>
            <label class="uk-margin-medium-right">
              <input class="uk-radio" type="radio" name="radio1" value="Transverse lie" [(ngModel)]="user.presentation"> Transverse lie </label>
          </div>
        </div>

        <hr>
        <div class="uk-margin-large-right">

          <div class="uk-flex-inline ">
            <span class="uk-form-label uk-margin-medium-right uk-text-bold "> Single </span>
            <label class="uk-margin-medium-right">
              <input class="uk-radio " type="radio" name="radio2" value="Viable" [(ngModel)]="user.single"> Viable </label>
            <label class="uk-margin-medium-right">
              <input class="uk-radio" type="radio" name="radio2" value="non-viable" [(ngModel)]="user.single"> non-viable </label>

          </div>
        </div>

        <hr>
        <div class="uk-margin-large-right">

          <div class="uk-flex-inline ">
            <span class="uk-form-label uk-margin-medium-right uk-text-bold "> F.H </span>
            <label class="uk-margin-medium-right">
              <input class="uk-radio " type="radio" name="radio3" value="+Ve" [(ngModel)]="user.FH"> +Ve </label>
            <label class="uk-margin-medium-right">
              <input class="uk-radio" type="radio" name="radio3" value="-Ve" [(ngModel)]="user.FH"> -Ve </label>

          </div>
        </div>
        <hr>

        <div class="uk-margin-large-right">

          <div class="uk-flex-inline ">
            <span class="uk-form-label uk-margin-medium-right uk-text-bold "> F.M </span>
            <label class="uk-margin-medium-right">
              <input class="uk-radio " type="radio" name="radio4" value="+Ve" [(ngModel)]="user.FM"> +ve </label>
            <label class="uk-margin-medium-right">
              <input class="uk-radio" type="radio" name="radio4" value="-Ve" [(ngModel)]="user.FM"> -ve </label>

          </div>
        </div>

        <hr>
        <div class="uk-margin-large-right">

          <div class="uk-margin">
            <label class="uk-form-label uk-text-bold " for="form-horizontal-text">BPD</label>
            <div class="uk-form-controls">
              <input class="uk-input uk-form-width-small" id="form-horizontal-text" type="text" name="user.BPD" [(ngModel)]="user.BPD">
            </div>
          </div>
        </div>
        <hr>
        <div class="uk-margin-large-right">

          <div class="uk-margin">
            <label class="uk-form-label uk-text-bold " for="form-horizontal-text">F.L</label>
            <div class="uk-form-controls">
              <input class="uk-input uk-form-width-small" id="form-horizontal-text" type="text" name="user.FL" [(ngModel)]="user.FL">
            </div>
          </div>
        </div>
        <hr>
        <div class="uk-margin-large-right">

          <div class="uk-flex-inline ">
            <span class="uk-form-label uk-margin-medium-right uk-text-bold "> Placenta </span>
            <label class="uk-margin-medium-right">
              <input class="uk-radio " type="radio" name="radio5" value="Posterior" [(ngModel)]="user.placenta"> Posterior </label>
            <label class="uk-margin-medium-right">
              <input class="uk-radio" type="radio" name="radio5" value="Anterior" [(ngModel)]="user.placenta"> Anterior </label>

          </div>
        </div>
        <hr>
        <div class="uk-margin-large-right">

          <div class="uk-flex-inline ">
            <span class="uk-form-label uk-margin-medium-right uk-text-bold "> Liqoure </span>
            <label class="uk-margin-medium-right">
              <input class="uk-radio " type="radio" name="radio6" value="adaquate" [(ngModel)]="user.liq"> Adaquate </label>
            <label class="uk-margin-medium-right">
              <input class="uk-radio" type="radio" name="radio6" value="not adaquate" [(ngModel)]="user.liq"> not adaquate </label>

          </div>
        </div>

      </form>



<!-- modal window here -->
      <a class="uk-button uk-button-primary" href="#modal-overflow" uk-toggle>Review</a>

<div id="modal-overflow" uk-modal>
    <div class="uk-modal-dialog">

        <button class="uk-modal-close-default" type="button" uk-close></button>

        <div class="uk-modal-header">
            <h2 class="uk-modal-title">Review of {{user.Type}} report</h2>
        </div>

        <div class="uk-modal-body" uk-overflow-auto>

            <ul class="uk-list uk-list-striped">

                <li>
                    <b>Doctor:</b> {{user.Doctor}}</li>
                <li>
                    <b>Patient:</b> {{user.Patient}}</li>
                <li>
                  <b>Presentation:</b> {{user.presentation}}</li>
                <li>
                  <b>Single:</b> {{user.single}}</li>
                <li>
                  <b>FH: </b> {{user.FH}}</li>
                <li>
                  <b>FM: </b> {{user.FM}}</li>
                <li>
                  <b>BPD:</b> {{user.BPD}}</li>
                <li>
                  <b>FL: </b> {{user.FL}}</li>
                <li>
                  <b>Placenta:</b> {{user.placenta}}</li>
                <li>
                  <b>Liqoure: </b> {{user.liq}}</li>

              </ul>

        </div>

        <div class="uk-modal-footer uk-text-right">
            <button class="uk-button uk-button-default uk-modal-close" type="button">Cancel</button>
            <button class="uk-button uk-button-primary uk-modal-close" type="button" [routerLink]="['/preview']">Save</button>
        </div>

    </div>
</div>


    </ng-container>






  </div>

</div>

Upvotes: 0

Views: 607

Answers (1)

Brad Axe
Brad Axe

Reputation: 815

This may or may not work, given I only know the code provided but it worked for me on a basic project. Make sure any dependencies your project has are installed locally on the building computer (CDNs will likely not work).

In your project directory:

ng build --prod --base-href ./

This will create a dist folder in your project directory. Copy the contents of dist (or dist/projectname) to offline computer, open index.html.

Hope this helps!

Upvotes: 1

Related Questions