5

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 – Pass & Receive Data with Modals

Table of Contents

Intro

Little snippet shows how to pass and receive data in a modal in ionic 5. This technique is useful when updating dynamic data.

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