console.log(
'test',
'number: ' + this.num,
`bool: ${this.bool}`
);
// if you like colors
console.log('%c ' + message, 'color: green; font-weight:bold');
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
ng start my-learn-project
cd my-learn-project
ng serve
I choosed of course Typescript and scss
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
// 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
// in course.component.html
<h2>{{ title }}</h2>
<ul>
<li *ngFor="let course of courses">
{{ course }}
</li>
</ul>
// 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();
}
}
// 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 { }
// course.component.html
<img [src]="imageUrl" />
// course.component.ts
imageUrl= "https://4wobi.com/wp-content/uploads/2021/08/Wobi_Logo-croped.svg";
// course.component.html
<table>
<tr>
<td [attr.colspan]="colSpan"></td>
</tr>
</table>
// course.component.ts
colSpan = 2;
npm install bootstrap --save
// style.scss
@import "~bootstrap/dist/css/bootstrap.css";
// course.component.html
<button class="btn btn-primary">Save</button>
// course.component.html
<button [class.active]="isActive">Save</button>
// course.component.ts
isActive = true;
// course.component.html
<button [style.backgroundColor]="isActive ? 'blue' : 'white'">Style Binding</button>
// course.component.html
<button (click)="onEvent($event)">Event Binding</button>
// course.component.ts
onEvent($event: any) {
$event.stopPropagation();
console.log("Button clicked", $event);
}
// course.component.html
<input (keyup.enter)="onKeyUp()" />
// course.component.ts
onKeyUp() {
console.log("enter was pressed");
}
// course.component.html
<input #email (keyup.enter)="onKeyUp(email.value)" />
// course.component.ts
onKeyUp(email: any) {
console.log(email);
}
// 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
]
// 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)
}
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
],
Thats it have fun
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
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 Color {Red = 1, Green = 2, Blue = 3};
let backgroundColor = Color.Red;
// with variables
const ColorRed = 0;
const ColorGreen = 1;
const ColorBlue = 2;
// type-assertions
let message: string;
let endWithC = (<string>message).endsWith('c');
let alternativeWay = (message as string).endsWith('c');
/* Function */
let log = function(message) {
console.log(message);
}
/* Arrow Function */
let doLogOneLine = (message) => console.log(message);
let doLog = (message) => {
console.log(message);
}
// Interfaces = Costum Types
interface Point {
x: number,
y: number
}
let drawPoint = (point: Point) => {
// ..
}
drawPoint({
x: 1,
y: 2
})
// Class
// Group variables(properties) and functions(methods) that are highly related
class Point {
x: number,
y: number
draw() {
// ..
}
getDistance(another: Point) {
// ..
}
}
// 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
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();
// 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();
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();
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();
// 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);
}
}
// 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
How to add spashscreen to your ionic 5 app with capacitor. The fast way!
npm install -g cordova-res
resources/icon.(png|jpg) must be at least 1024×1024pxresources/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!
Little snippet shows how to pass and receive data in a modal in ionic 5. This technique is useful when updating dynamic data.
Little snippet shows how to pass and receive data in a modal in ionic 5. This technique is useful when updating dynamic data.
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
// 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
Lets sort some shit