Tips for saving an Angular project for offline use

I have created a basic form for a family member to use in their medical practice, and I want to make it functional offline. The form simply captures data and displays it, with no need to send or store the information anywhere. What would be the most effective way to achieve this?

Below is the TypeScript 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);

  }

}

Feel free to review the code below:

<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>
angulartypescript

Answer №1

It's worth giving this a shot, as it worked for me on a simple project even though I only had access to the provided code. Just make sure all dependencies your project relies on are installed locally on the computer you're building on (CDNs might not do the trick).

Here's what you need to do in your project directory:

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

After running that command, a dist folder will be generated in your project directory. Copy the contents of either dist or dist/projectname to your offline computer and launch index.html.

I hope this solution works out for you!

Similar questions

If you have not found the answer to your question or you are interested in this topic, then look at other similar questions below or use the search

Output specification: Mandate certain attributes of a designated kind, while permitting them to be incomplete

I am searching for a solution in TypeScript that enforces the return type of a method to be a subset of an interface. Essentially, this means that all properties on the returned object must exist on the interface, but they are not required. Background: De ...

reactjstypescript

What could be causing my Ionic/Firebase subscription to be triggered three times?

I'm having an issue with my code where it seems to be executed 3 times and I can't figure out why. advertenciaMantto() { this.afs.doc('Core/Programador').valueChanges().subscribe(async (data) => { await this.afs.firestore.doc(` ...

javascriptangularfirebaseionic-frameworkgoogle-cloud-firestore

Ways to sign up for the activeDate variable in MatCalendar so you can display the month and year labels of the current active date in the

As a newcomer to Angular, I am working on creating a datepicker with a customized header. I have successfully passed a custom header for the mat-calendar component. Reference: https://material.angular.io/components/datepicker/overview#customizing-the-calen ...

angulartypescriptrxjsangular-material

Undoing alterations to the user interface in Angular 2 after discontinuing bi-directional data binding

UPDATE: Including code for further clarification. client.component.ts import { Component } from "@angular/core"; import { ClientService } from "../services/client.service"; import { Client } from "../types/client"; @Component({ selector: "rpcs-client", ...

htmlangulartwitter-bootstrap-3

What is the process for defining a global variable within a module in Typescript?

I've already included a global value in my global JavaScript context: const fs = require('fs') For a specific reason, I need to include it in the global scope. Now, I want to create a .d.ts file to declare the global variable with a stron ...

javascripttypescriptelectrontypescript-typings

Attempting to personalize the CSS for a tab within a table in Material design is unsuccessful

Within my Angular 5 application, I have implemented the Material API. One of the components in my project is a table with 2 tabs structured like this: <mat-tab-group> <mat-tab> <mat-table> <!-- content --> </mat- ...

cssangularangular-materialangular5

Update the component to display the latest information from the Bryntum grid table

In the Vue component, I have integrated a Bryntum grid table along with a bar chart. Clicking on one of the bars in the chart should update the data displayed in the Bryntum grid table. However, I've encountered difficulty in reloading the entire Bryn ...

typescriptvue.jsvue-componentbryntum-grid

Learning Angular2: What is the mechanism behind the automatic incrementation of the ID variable in this particular section?

In This specific part of the Angular2 Tutorial there is a feature that allows users to add new items to an array. Somehow, when the item is added, the ID is automatically incremented but the exact process behind this automation remains a mystery. I am awa ...

arraysangulartypescript

Next.js routes handlers do not have defined methods parameters

Struggling to find the cause of undefined params Currently delving into the world of Nextjs api routes, I keep encountering an issue where my params are coming up as undefined when trying to use them in the HTTP method. My setup includes prisma as my ORM ...

typescriptnext.jsaxios

Issue with typings in TypeScript is not being resolved

I have integrated this library into my code Library Link I have added typings for it in my project as follows Typings Link I have included it in my .ts file like this import accounting from "accounting"; I can locate the typings under /node_modules ...

javascripttypescripttypescript-typingsaccounting.js

Make sure to name your Typescript component selector correctly, as it should not

As I work on my Angular project, I encountered a situation where one component needed to be referenced in the HTML of another component. To make this connection, I used kebab case for the selector like so: @Component({ selector: 'swiftlog-navbar&ap ...

angulartypescriptyarnpkgtslint

After the component has been initialized for the second time, the elementId is found to be null

When working with a component that involves drawing a canvas chart, I encountered an issue. Upon initializing the component for the first time, everything works fine. However, if I navigate away from the component and return to it later, document.getElemen ...

javascriptangularcharts

No information is being emitted by the subject

In my application, I have a feature where users input data that needs to be validated in a form. Once the validation is successful, a button is enabled allowing the user to submit their order. However, I'm facing an issue with this specific component ...

javascriptangulartypescriptrxjs

Pattern matching for directory path excluding the filename

Looking for assistance with creating a JavaScript regex pattern to validate text input as folder paths only, excluding the filename. Can someone provide guidance on this? For example: folder1/folder2/folder3 => valid folder1/folder2/filename.txt1 =&g ...

javascriptangularregex

What is the best way to implement react-password-checklist with zod?

I've been trying to utilize the react-password-checklist library to inform users if their password complies with the rules set in zod's schemaUser. However, I'm facing challenges in implementing this feature successfully. Note: I am using zo ...

typescriptnext.jsreact-hook-formzod

The React Native blob or file seems to be encountering trouble in reaching the server

I'm in a tough spot here. I can't figure out what's going wrong. My goal is to send a file using the expo-image-picker component to the server. The form gets sent, but the image doesn't. When I use the fetch command, I immediately get a ...

typescriptreact-nativeexpofetch-api

What causes the index to display [object Object] rather than an integer in React?

It has been a long time since I last worked with React, and now I'm facing an issue. Whenever I use console.log to display the index within the map function, my console output looks like this: https://i.stack.imgur.com/VbGmE.png However, the result ...

javascriptreactjstypescriptloopsnext.js

Handling events in React using TypeScript

Currently diving into the world of React with Typescript and encountered a challenge involving event handling using the onClick property. I have a react component displaying a list of items from an array, and I aim to log the clicked item in the console. I ...

reactjstypescriptevent-handling

Broadcasting TypeScript Data Structures via Socket.IO

In my Typescript code, I have created a basic User class as shown below: export class User { constructor(public id: string); } When I emit a message from my socket.io server, I include an instance of the User class like this: var user = new User(&ap ...

javascripttypescriptsocket.io

Using a structural directive in Angular 2 that accepts a String as an input

I am attempting to develop a custom structural directive using the example provided here When trying to pass a string as an input with a slight modification, I encountered an issue where the input value was returning 'undefined' when calling th ...

javascriptangularangular2-directives