Skip to content

Instantly share code, notes, and snippets.

View jhades's full-sized avatar

JhadesDev jhades

554 followers · 13 following
View GitHub Profile
@jhades
jhades / 01.ts
Last active January 12, 2024 16:29
RxJs SwitchMap Operator
import {of} from "rxjs";
import {delay} from "rxjs/operators";
function simulateHttp(val: any, delay:number) {
return of(val).pipe(delay(delay));
}
@jhades
jhades / 01.json
Last active April 7, 2022 16:54
Angular vs jQuery
{
"-KgVwEC-dwWkLO4ZsQ9e": {
"description": "Angular Tutorial For Beginners - Build Your First App - Hello World Step By Step",
"longDescription": "This is step by step guide to create your first Angular application. Its aimed at beginners just starting out with the framework.This lesson will show how to create a component, and how to link the component to a given custom HTML tag. It will show how to give the component a given template.",
"tags": "BEGINNER",
"url": "angular-hello-world-write-first-application",
"videoUrl": "https://www.youtube.com/embed/du6sKwEFrhQ"
},
"-KgVwEC0vq_chg0dvlrb": {
"courseId": "-KgVwEBq5wbFnjj7O8Fp",
@jhades
jhades / 01.html
Last active July 3, 2017 15:03
What is an SPA ?
<meta charset="UTF-8">
<head>
<link href="https://fonts.googleapis.com/icon?family=Material+Icons" rel="stylesheet">
<link href="//maxcdn.bootstrapcdn.com/font-awesome/4.6.2/css/font-awesome.min.css"
rel="stylesheet" type="text/css"/>
<link rel="shortcut icon" href="favicon.ico" type="image/x-icon"/>
<link rel="stylesheet"
href="https://angular-university.s3.amazonaws.com
/bundles/bundle.20170418144151.min.css">
</head>
@jhades
jhades / 01.ts
Last active February 19, 2018 10:54
Angular Component Design: How to Avoid Custom Event Bubbling
@Component({
selector: 'course-detail',
templateUrl: './course-detail.component.html'
})
export class CourseDetailComponent implements OnInit {
user$: Observable<User>;
course$: Observable<Course>;
lessons$: Observable<Lesson[]>;
@jhades
jhades / 01.ts
Last active March 17, 2017 16:48
OnPush change detection
@Component({
selector: 'home',
template: `
<newsletter [user]="user" (subscribe)="subscribe($event)"></newsletter>
<button (click)="changeUserName()">Change User Name</button>
`})
@jhades
jhades / 01.ts
Last active January 11, 2022 10:31
Introduction to Ngrx Store
export interface Thread {
id:number;
messageIds: number[];
participants: {[key:number]: number};
}
export interface Message {
id:number;
@jhades
jhades / 01.html
Last active July 20, 2018 08:45
Angular Reactive Templates
<div *ngIf="condition else loading">
<p>Condition is true ...</p>
</div>
<ng-template #loading>
<p>Condition is false ...</p>
</ng-template>
@jhades
jhades / 01.ts
Last active February 16, 2017 11:51
Unidirectional dataflow
export interface Course {
id:number;
description:string;
}
const course: Course = {
id: 1,
description: "Angular For Beginners"
@jhades
jhades / 01.html
Last active February 10, 2017 13:05
Angular 2 + and React - Why Use Angular to Build Applications ? The Biggest Reason is Not Technical
<div class="messages-frame" *ngIf="message">
<div class="messages messages-error">
<i class="md-icon close-icon" (click)="close()">close</i>
<div class="messages-container">
<div>{{message}}</div>
</div>
</div>
</div>
@jhades
jhades / 01.ts
Last active February 3, 2017 11:42
Typescript 2 Type System - Type Compatiblity
let user = {};
user.name = 'John';