Upgrade to Pro
— share decks privately, control downloads, hide ads and more …
Speaker Deck
Features
Speaker Deck
PRO
Sign in
Sign up for free
Search
Search
angular#3
Search
Danila Marchenkov
September 05, 2017
Education
0
42
angular#3
Danila Marchenkov
September 05, 2017
Tweet
Share
More Decks by Danila Marchenkov
See All by Danila Marchenkov
Rxjs
sprit3dan
0
98
angular6
sprit3dan
0
71
angular5
sprit3dan
0
50
angular#4
sprit3dan
0
160
angular#2
sprit3dan
0
33
Angular#1
sprit3dan
0
51
HTML 5 Canvas
sprit3dan
0
43
Angular #6
sprit3dan
0
67
Angular #5
sprit3dan
0
120
Other Decks in Education
See All in Education
2025年度春学期 統計学 第1回 イントロダクション (2025. 4. 10)
akiraasano
PRO
0
170
SkimaTalk Tutorial for Students
skimatalk
0
1.8k
アウトプット0のエンジニアが半年でアウトプットしまくった話 With JAWS-UG
masakiokuda
2
310
Sponsor the Conference | VizChitra 2025
vizchitra
0
550
Gamified Interventions for Composting Behavior: A Case Study Using the Gamiflow Framework in a Workplace Setting
ezefranca
1
120
IMU-00 Pi
kanaya
0
370
登壇未経験者のための登壇戦略~LTは設計が9割!!!~
masakiokuda
3
510
Pydantic(AI)とJSONの詳細解説
mickey_kubo
0
100
Constructing a Custom TeX Ecosystem for Educational Institutions—Beyond Academic Typesetting
doratex
1
9.6k
2025年度春学期 統計学 第5回 分布をまとめるー記述統計量(平均・分散など) (2025. 5. 8)
akiraasano
PRO
0
120
ThingLink
matleenalaakso
28
4.1k
演習問題
takenawa
0
5.8k
Featured
See All Featured
How to Create Impact in a Changing Tech Landscape [PerfNow 2023]
tammyeverts
53
2.8k
Documentation Writing (for coders)
carmenintech
72
4.9k
RailsConf 2023
tenderlove
30
1.1k
10 Git Anti Patterns You Should be Aware of
lemiorhan
PRO
657
60k
The Psychology of Web Performance [Beyond Tellerrand 2023]
tammyeverts
48
2.9k
We Have a Design System, Now What?
morganepeng
53
7.7k
Six Lessons from altMBA
skipperchong
28
3.9k
Gamification - CAS2011
davidbonilla
81
5.3k
Agile that works and the tools we love
rasmusluckow
329
21k
CSS Pre-Processors: Stylus, Less & Sass
bermonpainter
357
30k
The Myth of the Modular Monolith - Day 2 Keynote - Rails World 2024
eileencodes
26
2.9k
The Art of Delivering Value - GDevCon NA Keynote
reverentgeek
15
1.5k
Transcript
Angular Marchenkov Danila, Software Developer
angularJS filters Pipes
Pipes Built-in Custom
import { Component } from '@angular/core'; @Component({ selector: 'hero-birthday', template:
`<p>The hero's birthday is {{ birthday | date }}</p>` }) export class HeroBirthdayComponent { birthday = new Date(1988, 3, 15); // April 15, 1988 }
aPipe | bPipe | cPipe
best way to manipulate data to display
import { Pipe, PipeTransform } from '@angular/core'; /* * Raise
the value exponentially * Takes an exponent argument that defaults to 1. * Usage: * value | exponentialStrength:exponent * Example: * {{ 2 | exponentialStrength:10 }} * formats to: 1024 */ @Pipe({name: 'exponentialStrength'}) export class ExponentialStrengthPipe implements PipeTransform { transform(value: number, exponent: string): number { let exp = parseFloat(exponent); return Math.pow(value, isNaN(exp) ? 1 : exp); } }
Pure vs Inpure
Pure pipes Angular executes a pure pipe only when it
detects a pure change to the input value. A pure change is either a change to a primitive input value (String, Number, Boolean, Symbol) or a changed object reference (Date, Array, Function, Object).
Impure pipes Angular executes an impure pipe during every component
change detection cycle
import { Pipe, PipeTransform } from '@angular/core'; import { Http
} from '@angular/http'; @Pipe({ name: 'fetch', pure: false }) export class FetchJsonPipe implements PipeTransform { private cachedData: any = null; private cachedUrl = ''; constructor(private http: Http) { } transform(url: string): any { if (url !== this.cachedUrl) { this.cachedData = null; this.cachedUrl = url; this.http.get(url) .map( result => result.json() ) .subscribe( result => this.cachedData = result ); } return this.cachedData; } }