ionic

Angular – change default stylesheet

Table of Contents

Source

Typescript

Knowledge Check

				
					ng config schematics.@schematics/angular:component.style scss
				
			
				
					// angular.json
// change all "sass" to "scss" with replacment function in your editor 
 
				
			
				
					// change style.sass to style.scss
				
			

Thats it have fun

Angular – Learn Project

Table of Contents

Source

Angular Learn Project

Create Project with CLI

				
					ng start my-learn-project
cd my-learn-project
ng serve
				
			

I choosed of course Typescript and scss

Create Component

				
					ng generate component course
// or short 
ng g c course
				
			
				
					// We get
CREATE src/app/course/course.component.html (21 bytes)
CREATE src/app/course/course.component.spec.ts (626 bytes)
CREATE src/app/course/course.component.ts (276 bytes)
CREATE src/app/course/course.component.sass (0 bytes)
UPDATE src/app/app.module.ts (475 bytes)
				
			
				
					// Lets test if the component works
// in learn-project\src\app\app.component.html
// delete all the code exept <router-outlet></router-outlet>
// add

<app-course></app-course>

// bellow <router-outlet></router-outlet>
				
			
				
					// Check browser we should get

course works!
				
			
				
					// this are all boilerplates we can create with ng generate
    app-shell
    application
    class
    component
    directive
    enum
    guard
    interceptor
    interface
    library
    module
    pipe
    resolver
    service
    service-worker
    web-worker
				
			

Interpolation

				
					// in course.component.html
<h2> {{title}} </h2>

// in course.component.ts
// add in the class

title = "I'm a Title";
				
			
				
					// We should now see in the browser

I'm a Title
				
			

Directives

				
					// in course.component.html
<h2>{{ title }}</h2>
<ul>
  <li *ngFor="let course of courses">
    {{ course }}
  </li>
</ul>

				
			

Services

				
					// Create a Service
ng generate service course/courses
// or
ng g s course/courses
				
			
				
					// This will create
CREATE src/app/course/courses.service.spec.ts (362 bytes)
CREATE src/app/course/courses.service.ts (136 bytes)
				
			
				
					// courses.service.ts looks like this
import { Injectable } from '@angular/core';    // we need this if we have dependencies in our Service

@Injectable({
  providedIn: 'root'
})
export class CoursesService {

  constructor() { }
}

				
			
				
					// courses.service.ts  add this
import { Injectable } from '@angular/core';

@Injectable({
  providedIn: 'root'
})
export class CoursesService {

  constructor() { }

  getCourses(){
    return ["course1", "course2", "course3"];
  }
}
				
			
				
					// course.component.ts
import { Component, OnInit } from '@angular/core';

import { CoursesService } from './courses.service';

@Component({
  selector: 'app-course',
  templateUrl: './course.component.html',
  styleUrls: ['./course.component.sass']
})
export class CourseComponent implements OnInit {
  title = "I'm a Title";
  courses: any;

  constructor(private service: CoursesService) { }

  ngOnInit(): void {
    this.courses = this.service.getCourses();
  }

}

				
			
Dependency Injection
				
					// in app.module.ts
import { NgModule } from '@angular/core';
import { BrowserModule } from '@angular/platform-browser';

import { AppRoutingModule } from './app-routing.module';
import { AppComponent } from './app.component';
import { CourseComponent } from './course/course.component';

import { CoursesService } from './course/courses.service';

@NgModule({
  declarations: [
    AppComponent,
    CourseComponent
  ],
  imports: [
    BrowserModule,
    AppRoutingModule
  ],
  providers: [CoursesService],
  bootstrap: [AppComponent]
})
export class AppModule { }

				
			

Property Binding

				
					// course.component.html
<img [src]="imageUrl" />

// course.component.ts
imageUrl= "https://4wobi.com/wp-content/uploads/2021/08/Wobi_Logo-croped.svg";
				
			

Attribute Binding

				
					// course.component.html
<table>
  <tr>
    <td [attr.colspan]="colSpan"></td>
  </tr>
</table>

// course.component.ts
colSpan = 2;
				
			

Adding Bootstrap

				
					npm install bootstrap --save

// style.scss
@import "~bootstrap/dist/css/bootstrap.css";

// course.component.html
<button class="btn btn-primary">Save</button>
				
			

Class Binding

				
					// course.component.html
<button [class.active]="isActive">Save</button>

// course.component.ts
isActive = true;
				
			

Style Binding

				
					// course.component.html
<button [style.backgroundColor]="isActive ? 'blue' : 'white'">Style Binding</button>
				
			

Event Binding

				
					// course.component.html
<button (click)="onEvent($event)">Event Binding</button>

// course.component.ts
 onEvent($event: any) {
    $event.stopPropagation();
    console.log("Button clicked", $event);
  }
				
			

Event Filtering

				
					// course.component.html
<input (keyup.enter)="onKeyUp()" />

// course.component.ts
onKeyUp() {
    console.log("enter was pressed");
}
				
			

Template Variables

				
					// course.component.html
<input #email (keyup.enter)="onKeyUp(email.value)" />

// course.component.ts
  onKeyUp(email: any) {
    console.log(email);
  }
				
			

Two-way Binding

				
					// course.component.html
<input [(ngModel)]="email" (keyup.enter)="onKeyUp()" />

// course.component.ts
  email = "email@adress.com";
  
    onKeyUp() {
    console.log(this.email);
  }
  
// app.module.ts
import { FormsModule } from '@angular/forms';

  imports: [
    FormsModule
    ]
				
			

Pipes

				
					// course.component.html
{{ course.title | uppercase | lowercase }} <br />
{{ course.students | number }} <br />
{{ course.rating | number: "2.1-1" }} <br />
{{ course.price | currency: "AUD":true:"3.2-2" }} <br />
{{ course.releaseDate | date: "shortDate" }}<br />

// course.component.ts
  course = {
    title: "The Complete Angular Course",
    rating: 4.96444,
    students: 123123,
    price: 991.29,
    releaseDate: new Date(2020, 2, 1)
  }

				
			

Custom Pipes

				
					ng g pipe course/summary

// course.component.html
{{ costumPipe | summary }} <br />
{{ costumPipe | summary:20 }} <br />

// course.component.ts
  costumPipe = `Lorem ipsum dolor sit,
                amet consectetur adipisicing elit. Impedit sequi animi deserunt mollitia explicabo,
                illum, pariatur officia qui, aliquam eos rerum iure
                sed culpa enim officiis ea asperiores a veritatis `;

// summary.pipe.ts
import { Pipe, PipeTransform } from '@angular/core';

@Pipe({
  name: 'summary'
})
export class SummaryPipe implements PipeTransform {

  transform(value: string, limit?: number)  {
    if (!value)
      return null;

      let actualLimit = (limit) ? limit : 50;
      return value.substr(0, actualLimit) + '...';
  }
}

// app.module.ts
import { SummaryPipe } from './course/summary.pipe';

  declarations: [
    SummaryPipe
  ],


				
			

Input Properties

				
					
				
			

Thats it have fun

Angular – Typescript

Table of Contents

Source

Typescript

Variables Declaration

				
					var number = 1;
let count = 2;
				
			
				
					// Compliation error with 'let'
function doSomething() {
    for (let i = 0; i < 5; i++) {
        console.log(i);
    }
    console.log('Finally: ' + i);
}

// let is defined for the nearest block
				
			
				
					// No error with 'var'
function doSomething() {
    for (var i = 0; i < 5; i++) {
        console.log(i);
    }
    console.log('Finally: ' + i);
}
// var is defined for the nearest function
				
			

Types

				
					let a: number;
let b: boolean;
let c: string;
let d: any;
let e: number[] = [1, 2, 3];
let f: any[] = [1, true, '1'];
				
			

Enum

				
					// enum
enum Color {Red = 1, Green = 2, Blue = 3};
let backgroundColor = Color.Red;
// with variables
const ColorRed = 0;
const ColorGreen = 1;
const ColorBlue = 2;
				
			

Type Assertions

				
					// type-assertions
let message: string;
let endWithC = (<string>message).endsWith('c');
let alternativeWay = (message as string).endsWith('c');

				
			

Arrow Function

				
					/* Function */
let log = function(message) {
    console.log(message);
}
/* Arrow Function */
let doLogOneLine = (message) => console.log(message);

let doLog = (message) => {
    console.log(message);
}
				
			

Interfaces

				
					// Interfaces = Costum Types
interface Point {
    x: number,
    y: number
}

let drawPoint = (point: Point) => {
    // ..
}

drawPoint({
    x: 1,
    y: 2
})
				
			

Classes

				
					//   Class
//   Group variables(properties) and functions(methods) that are highly related
class Point {
    x: number,
    y: number

    draw() {
        // ..
    }

    getDistance(another: Point) {
        // ..
    }
}
				
			

Objects

				
					// Object
class Point {
    x: number;
    y: number;

    draw() {
        console.log('X: ' + this.x + ', Y: ' + this.y);
    }

    getDistance(another: Point) {
        // ..
    }
}

let point = new Point(); // This is the Object
point.x = 1;
point.y = 2
point.draw();
				
			

Constructor

				
					// Constructor
class Point {
    x: number;
    y: number;

    constructor(x?: number, y?: number) {
        this.x = x;
        this.y = y;
    }

    draw() {
        console.log('X: ' + this.x + ', Y: ' + this.y);
    }

}

let point = new Point();
point.draw();
				
			

Access Modifiers

				
					// public (default) 
// private
// protected

class Point {
    private x: number;
    private y: number;

    constructor(x?: number, y?: number) {
        this.x = x;
        this.y = y;
    }

    draw() {
        console.log('X: ' + this.x + ', Y: ' + this.y);
    }

}

let point = new Point(1, 2);
// point.x = 3; // Will not work when private!
point.draw();
				
			

Constructor Parameters

				
					class Point {
    constructor(private x?: number, private y?: number) {
    }

    draw() {
        console.log('X: ' + this.x + ', Y: ' + this.y);
    }
}

let point = new Point(1, 2);
point.draw();
				
			

Properties

				
					class Point {
    constructor(private _x?: number, private _y?: number) {
    }

    draw() {
        console.log('X: ' + this._x + ', Y: ' + this._y);
    }

    get x() {
        return this._x;
    }

    set x(value) {
        if (value < 0) {
            throw new Error('value cannot be less then 0.');
            this._x = value;
        }
    }
}

let point = new Point(1, 2);
let x = point.x = 12;
x = 4;
point.draw();
				
			

Modules

				
					

// main.js
import { Point } from  './point';

let point = new Point(1, 2);
point.draw();


// point.ts
export class Point {
    constructor(private x?: number, private y?: number) {
    }

    draw() {
        console.log('X: ' + this.x + ', Y: ' + this.y);
    }
}
				
			

Knowledge Check

				
					// main.ts
import { LikeComponent } from './like.component';

let component = new LikeComponent(10, true);
component.onClick();
console.log(`likesCount: ${component.likesCount}, isSelected: ${component.isSelected}`);

// like.component.ts
export class LikeComponent {
    constructor(private _likesCount: number, private _isSelected: boolean) {
    }

    onClick() {
        this._likesCount += (this._isSelected) ? -1 : +1;
        this._isSelected = !this._isSelected;
    }

    get likesCount() {
        return this._likesCount;
    }

    get isSelected() {
        return this._isSelected;
    }
}


				
			

Thats it have fun

Ionic 5 – Splashscreen

Table of Contents

Intro

How to add spashscreen to your ionic 5 app with capacitor. The fast way!

Sources

Splashscreen with Capacitor

				
					npm install -g cordova-res
				
			
resources/
├── icon.png
└── splash.png
  • resources/icon.(png|jpg) must be at least 1024×1024px
  • resources/splash.(png|jpg) must be at least 2732×2732px
				
					$ cordova-res ios --skip-config --copy
$ cordova-res android --skip-config --copy

				
			

Build you apps, done!

Ionic 5 – ion-row vertical center

Table of Contents

Code Snippet

				
					// your.scss

/* VERTICAL ROW CENTER */
ion-grid {
  height: 100%;
}

ion-row {
  display: flex;
  align-items: center;
  justify-content: center;
  height: 100%;
}

// if you have to adjust your content use this code below
.stat-badge {
  top: -10px;
  display: flex;
  align-items: center;
  justify-content: center;
  height: 100%;
}

				
			

Thats it so far have fun

Ionic 5 – Develop for Android

Table of Contents

Source

Installing & Run

Deploy for Android

				
					ionic build				// build if never built
ionic cap add android	// add android support if not added while start
ionic cap copy			// Builds and Copy Web Assets to Capacitor native platform
ionic cap sync			// update Project Data
ionic cap open android  // opens Project in Android Studio
				
			

Debug

				
					adb devices             //checks android device connection
				
			

Livereload

				
					ionic capacitor copy android
ionic capacitor run android -l --external
				
			

Thats it so far have fun

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