Angular – Typescript Log

Source

console.log

				
					console.log(
      'test',
      'number: ' + this.num,
      `bool: ${this.bool}`
    );
// if you like colors
console.log('%c ' + message, 'color: green; font-weight:bold');

Angular – native pipes

Ionic 5 – ion-row vertical center

Ionic 5 – Develop for Android

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

Ionic 5 – Develop for Electron

Ionic 5 – capacitor SQLite Database

Ionic – costum pipes

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

Ionic – new ion-color

Angular – Pass Data to Modals & Popover

Ionic – Dark Mode/Theme

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 – angular/material

Ionic – ngx-translate

Ionic – Segment, Sliding Tabs Examples

Source

Native Pipes

				
					uppercase
lowercase
titlecase
date[:format[:timezone]]
number[:digitInfo]
currency[:currencyCode[:display[:digitInfo]]]
percent[:digitInfo]
slice:start[:end]
json
async
i18nSelect: mapping

Thats it have fun

native

Angular – Typescript Log

Table of Contents

Source

console.log

Angular – change default stylesheet

Table of Contents

Source

Typescript

Knowledge Check

Angular – Learn Project

Table of Contents

Source

Angular Learn Project

Create Project with CLI

Create Component

Interpolation

Directives

Services

Dependency Injection

Property Binding

Attribute Binding

Adding Bootstrap

Class Binding

Style Binding

Event Binding

Event Filtering

Template Variables

Two-way Binding

Pipes

Custom Pipes

Input Properties

Angular – Typescript

Table of Contents

Source

Typescript

Variables Declaration

Types

Enum

Type Assertions

Arrow Function

Interfaces

Classes

Objects

Constructor

Access Modifiers

Constructor Parameters

Properties

Modules

Knowledge Check

Angular – native pipes

Table of Contents

Source

Native Pipes