{{ | 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

Made with Slides.com