{{ | async }} explained
@FilipMam
Title Text
@FilipMam
@FilipMam
@FilipMam
Agenda
-
What's pipe? What's async?
-
What's pipe async?
@FilipMam
Your feedback matters
@FilipMam
@Component({
selector: "bitcoin-price",
template: `
Current bitcoin price is: {{bitcoinPrice}}
`})
class BitcoinPriceComponent {
bitcoinPrice = 6306.98
}
@FilipMam
@FilipMam
"angular"
capitalize()
"Angular"
@FilipMam
@FilipMam
@Component({
selector: "bitcoin-price",
template: `
Current bitcoin price is: {{bitcoinPrice | currency}}
`})
class BitcoinPriceComponent {
bitcoinPrice = 6306.98
}
@FilipMam
@FilipMam
@Component({
selector: "bitcoin-price",
template: `
Current bitcoin price is: {{bitcoinPrice | currency}}
`})
class BitcoinPriceComponent {
bitcoinPrice
constructor(
http: HttpClient
) {
http.get('cryptoApi.com/bitcoin')
}
}
@FilipMam
@Component({
selector: "bitcoin-price",
template: `
Current bitcoin price is: {{bitcoinPrice | currency}}
`})
class BitcoinPriceComponent {
bitcoinPrice
constructor(
http: HttpClient
) {
http.get('cryptoApi.com/bitcoinPrice')
.subscribe(response => this.bitcoinPrice = response)
}
}
@FilipMam
@Component({
selector: "bitcoin-price",
template: `
Current bitcoin price is: {{bitcoinPrice | async | currency}}
`})
class BitcoinPriceComponent {
bitcoinPrice
constructor(
http: HttpClient
) {
http.get('cryptoApi.com/bitcoinPrice')
.subscribe(response => this.bitcoinPrice = response)
}
}
@FilipMam
@Component({
selector: "bitcoin-price",
template: `
Current bitcoin price is: {{bitcoinPrice | async | currency}}
`})
class BitcoinPriceComponent {
bitcoinPrice
constructor(
http: HttpClient
) {
http.get('cryptoApi.com/bitcoinPrice')
.subscribe(response => this.bitcoinPrice = response)
}
}
@FilipMam
@Component({
selector: "bitcoin-price",
template: `
Current bitcoin price is: {{bitcoinPrice | async | currency}}
`})
class BitcoinPriceComponent {
bitcoinPrice = http.get('cryptoApi.com/bitcoinPrice')
constructor(
http: HttpClient
) {}
}
@FilipMam
@Component({
selector: "bitcoin-price",
template: `
Current bitcoin price is: {{bitcoinPrice | async | currency}}
`})
class BitcoinPriceComponent {
bitcoinPrice = http.get('cryptoApi.com/bitcoin')
constructor(
http: HttpClient
) {}
}
{
"price": 6306.98
"currency": "USD"
"date": "13-11-2018"
}
@FilipMam
@Component({
selector: "bitcoin-price",
template: `
Current bitcoin price is: {{bitcoinPrice | async | currency}}
`})
class BitcoinPriceComponent {
bitcoinPrice = http.get('cryptoApi.com/bitcoin').pipe(map(response => response.price))
constructor(
http: HttpClient
) {}
}
@FilipMam
@Component({
selector: "bitcoin-price",
template: `
Current bitcoin price is: {{ (bitcoin | async).price | currency}}
`})
class BitcoinPriceComponent {
bitcoin = http.get('cryptoApi.com/bitcoin')
constructor(
http: HttpClient
) {}
}
@FilipMam
@Component({
selector: "bitcoin-price",
template: `
Current bitcoin price is: {{bitcoinPrice | currency}}
Current litecoin price is: {{litecoinPrice | currency}}
Current zCash price is: {{zCashPrice | currency}}
Current ripple price is: {{ripplePrice | currency}}
`})
class BitcoinPriceComponent {
bitcoinPrice;
litecoinPrice;
zCashPrice;
ripplePrice;
constructor(
http: HttpClient
) {
http.get('cryptoApi.com/bitcoinPrice')
.subscribe(response => bitcoinPrice = response);
http.get('cryptoApi.com/litecoinPrice')
.subscribe(response => litecoinPrice = response);
http.get('cryptoApi.com/zCashPrice')
.subscribe(response => zCashPrice = response);
http.get('cryptoApi.com/ripplePrice')
.subscribe(response => ripplePrice = response);
}
}
@FilipMam
@Component({
selector: "bitcoin-price",
template: `
Current bitcoin price is: {{bitcoinPrice | async | currency}}
Current litecoin price is: {{litecoinPrice | async | currency}}
Current zCash price is: {{zCashPrice | async | currency}}
Current ripple price is: {{ripplePrice | async | currency}}
`})
class BitcoinPriceComponent {
bitcoinPrice = http.get('cryptoApi.com/bitcoinPrice');
litecoinPrice = http.get('cryptoApi.com/litecoinPrice');
zCashPrice = http.get('cryptoApi.com/zCashPrice');
ripplePrice = http.get('cryptoApi.com/ripplePrice');
constructor(
http: HttpClient
) {}
}
@FilipMam
@Component({
selector: "bitcoin-price",
template: `
Current bitcoin price is: {{bitcoinPrice | async | currency}}
Current litecoin price is: {{litecoinPrice | async | currency}}
Current zCash price is: {{zCashPrice | async | currency}}
`})
class BitcoinPriceComponent {
bitcoinPrice = http.get('cryptoApi.com/bitcoinPrice');
litecoinPrice = fetch.get('cryptoApi.com/litecoinPrice');
zCashPrice = localStorage.get('zCashPrice');
constructor(
http: HttpClient
) {}
}
@FilipMam
"You can create a great application without great UX and animations"
Tomasz Błachut, 40 minutes ago
Live coding!
@FilipMam
| async
-
unsubscribe is automatic
-
.markForCheck() is automatic
@FilipMam
-
less code
| async explained
By Filip Mamcarczyk
| async explained
- 611