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
Gaps in Therapy in IBD - IBDInnovate 2025 CCF
higgi13425
0
490
2025/06/05_読み漁り学習
nag8
0
140
Virtual and Augmented Reality - Lecture 8 - Next Generation User Interfaces (4018166FNR)
signer
PRO
0
1.7k
ANS-C01_2回不合格から合格までの道程
amarelo_n24
1
240
郷土教育モデル事業(香川県小豆島町).pdf
bandg
0
190
プレゼンテーション実践
takenawa
0
5.2k
Tangible, Embedded and Embodied Interaction - Lecture 7 - Next Generation User Interfaces (4018166FNR)
signer
PRO
0
1.7k
モンテカルロ法(3) 発展的アルゴリズム / Simulation 04
kaityo256
PRO
7
1.3k
2025年度春学期 統計学 第5回 分布をまとめるー記述統計量(平均・分散など) (2025. 5. 8)
akiraasano
PRO
0
110
Education-JAWS #3 ~教育現場に、AWSのチカラを~
masakiokuda
0
160
教員向け生成AI基礎講座(2025年3月28日 東京大学メタバース工学部 ジュニア講座)
luiyoshida
1
560
社外コミュニティと「学び」を考える
alchemy1115
2
170
Featured
See All Featured
Raft: Consensus for Rubyists
vanstee
140
7k
Docker and Python
trallard
44
3.4k
It's Worth the Effort
3n
185
28k
Practical Orchestrator
shlominoach
188
11k
個人開発の失敗を避けるイケてる考え方 / tips for indie hackers
panda_program
107
19k
jQuery: Nuts, Bolts and Bling
dougneiner
63
7.8k
The Straight Up "How To Draw Better" Workshop
denniskardys
234
140k
Put a Button on it: Removing Barriers to Going Fast.
kastner
60
3.9k
Navigating Team Friction
lara
187
15k
The Power of CSS Pseudo Elements
geoffreycrofte
77
5.8k
実際に使うSQLの書き方 徹底解説 / pgcon21j-tutorial
soudai
PRO
181
53k
Making Projects Easy
brettharned
116
6.3k
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; } }