Torappo

Angular – import .json

Table of Contents

Intro

How to add .json file in to your Typesctipt for Angular

Sources

Snippet

				
					// tsconfig.json
"compilerOptions": {
    ...
    "resolveJsonModule": true
  }
				
			
				
					// your.ts
import * as data from './example.json';

More posts to checkout

Ionic 5 – Develop for Electron

Table of Contents

How to add SQLite Database in to your Ionic Project fast and easy without any issues with some short snippets that are very easy to understand!

Source

Installing & Run

				
					npm i @capacitor-community/electron
npx cap add @capacitor-community/electron
npx cap open @capacitor-community/electron

Thats it so far have fun

Ionic 5 – capacitor SQLite Database

Table of Contents

How to add SQLite Database in to your Ionic Project fast and easy without any issues with some short snippets that are very easy to understand!

Source

Installing & Run

How to import the code form with jeep for the web! angular-data-storage-sqlite-app-starter#starting-an-app-from-scratch

				
					//main.ts
import { defineCustomElements as jeepSqlite} from 'jeep-sqlite/loader';


jeepSqlite(window);

If you need to install some other platform

				
					npm install @capacitor/android
npm install @capacitor/ios
npm i @capacitor-community/electron

Install SQLite for Capacitor.

				
					npm install  @capacitor-community/sqlite
npm run build
npx cap add android
npx cap add ios
npx cap add @capacitor-community/electron

If you want sqlite with web apps

				
					@capacitor-community/sqlite@web

Code updating

				
					npx cap sync
npx cap sync @capacitor-community/electron

For Web App

				
					copy manually the file sql-wasm.wasm from nodes_modules/sql.js/dist/sql-wasm.wasm to the src/assets folder of YOUR_APP

Electron App

				
					cd electron
npm install --save sqlite3
npm install --save-dev @types/sqlite3
npm run build

Build App

				
					npm run build
npx cap copy
npx cap copy web
npx cap copy @capacitor-community/electron
				
			
				
					npx cap serve
npx cap open ios
npx cap open android
npx cap open @capacitor-community/electron

Thats it so far have fun

Angular – on scroll sticky

Table of Contents

Intro

Some Links for radar charts in angular, maybe I will add some snippets for a fast start without issues for you.

Sources

Snippet

More posts to checkout

Angular – Radar Chart

Table of Contents

Intro

Some Links for radar charts in angular, maybe I will add some snippets for a fast start without issues for you.

Sources

Snippet

More posts to checkout

Ionic – pipes

Table of Contents

Source

Starter-Code

Creating a pipe

				
					// ./pipes/weakness.pipe.ts

import { Pipe, PipeTransform } from '@angular/core';

@Pipe({
  name: 'weakness'
})

export class WeaknessPipe implements PipeTransform {
  transform(value: any): string {
    if (value == null) {
      return '1x';
    } else if (value == 0.5) {
      return '1/2x';
    } else if (value == 0.25) {
      return '1/4x';
    } else {
      return value + 'x';
    }
  }
}

A module for the import in to your page.

				
					// ./pipes/pipes.module.ts

import { NgModule } from '@angular/core';
import { CommonModule } from '@angular/common';

import { WeaknessPipe } from './weakness.pipe';


@NgModule({
  imports: [CommonModule],
  declarations: [WeaknessPipe],
  exports: [WeaknessPipe]
})
export class PipesModule { }

Import the pipe module to your page.

				
					// ./pages/yourpage.module.ts

import { PipesModule } from '../../pipes/pipes.module';

@NgModule({
  imports: [
    CommonModule,
    PipesModule
  ],
})
export class YourPagePageModule {}

Use it like this in your html.

				
					// ./pages/YourPage.page.html

{{your.value | weakness}}

Or in your typescript. import and declare in the constructor.

				
					// ./pages/YourPage.page.ts

import {WeaknessPipe} from '../../pipes/weakness.pipe';

constructor(public weakness: WeaknessPipe) {}

If you want use your pipe only in .html. you don’t have to import to .ts.

Thats it have fun