Skip to content

Instantly share code, notes, and snippets.

View lorenzojkrl's full-sized avatar

Lorenzo! lorenzojkrl

36 followers · 18 following
  • Nordea
  • Helsinki
View GitHub Profile
@lorenzojkrl
lorenzojkrl / App.js
Last active March 21, 2022 10:12
Create a React component to use RxJS interval
import React, { useState, useEffect } from 'react';
import './style.css';
import { interval } from 'rxjs';
export default function App() {
const [state, setState] = useState();
return (
<div>
<h1>Hello RxJS!</h1>
@lorenzojkrl
lorenzojkrl / App.js
Created March 21, 2022 10:14
Create a React component to use RxJS interval - add observable
import React, { useState, useEffect } from 'react';
import './style.css';
import { interval } from 'rxjs';
export default function App() {
const [state, setState] = useState();
const observable$ = interval(1000);
useEffect(() => {
@lorenzojkrl
lorenzojkrl / todo.service.ts
Last active March 21, 2022 15:02
Classic Pattern
import { HttpClient } from '@angular/common/http';
import { Injectable } from '@angular/core';
import { Observable } from 'rxjs';
import { tap } from 'rxjs/operators';
import { ToDo } from './model';
@Injectable({ providedIn: 'root' })
export class TodoService {
private todoUrl = 'https://jsonplaceholder.typicode.com/todos/1';
@lorenzojkrl
lorenzojkrl / app.component.ts
Last active March 21, 2022 15:02
Classic pattern
import { Component, OnDestroy, OnInit } from '@angular/core';
import { Subscription } from 'rxjs';
import { TodoService } from './todo.service';
import { ToDo } from './model';
@Component({
selector: 'my-app',
templateUrl: './app.component.html',
styleUrls: ['./app.component.css'],
})
@lorenzojkrl
lorenzojkrl / todo.service.ts
Created March 21, 2022 15:33
Declarative
import { HttpClient } from '@angular/common/http';
import { Injectable } from '@angular/core';
import { tap } from 'rxjs/operators';
@Injectable({ providedIn: 'root' })
export class TodoService {
private todoUrl = 'https://jsonplaceholder.typicode.com/todos/1';
constructor(private http: HttpClient) {}
@lorenzojkrl
lorenzojkrl / app.component.ts
Created March 21, 2022 15:36
Declarative
import { Component } from '@angular/core';
import { TodoService } from './todo.service';
@Component({
selector: 'my-app',
templateUrl: './app.component.html',
styleUrls: ['./app.component.css'],
})
export class AppComponent {
data$ = this.todoService.todo$;
@lorenzojkrl
lorenzojkrl / template-form.component.html
Created April 21, 2022 09:29
Generic form element in Angular template driven forms
<div>
<label for="email">Email</label>
<input
type="email"
id="email"
name="email"
[(ngModel)]="email"
/>
</div>
@lorenzojkrl
lorenzojkrl / template-form.component.html
Last active April 23, 2022 08:27
Angular Template-driven form using ngForm
<div>
<form (ngSubmit)="onSubmit(f)" #f="ngForm">
<div>
<label for="name">Name</label>
<input type="text" id="name" name="name" [(ngModel)]="name" required />
</div>
<div>
<label for="email">Email</label>
<input type="email" id="email" name="email" [(ngModel)]="email" />
</div>
@lorenzojkrl
lorenzojkrl / template-form.component.html
Created April 23, 2022 08:28
Angular Template-driven form
<div>
<form (ngSubmit)="onSubmit()">
<div>
<label for="name">Name</label>
<input type="text" id="name" name="name" [(ngModel)]="name" required />
</div>
<div>
<label for="email">Email</label>
<input type="email" id="email" name="email" [(ngModel)]="email" />
</div>
@lorenzojkrl
lorenzojkrl / app.component.ts
Created May 3, 2022 08:32
import { Component, OnInit } from '@angular/core';
import { Observable, of } from 'rxjs';
@Component({
selector: 'app-root',
templateUrl: './app.component.html',
})
export class AppComponent implements OnInit {
numbers$: Observable<number[]>;