@@ -1975,6 +1975,8 @@ import { DatePipe } from '@angular/common';
1975
1975
export class AppModule {}
1976
1976
```
1977
1977
1978
+ [Stackblitz Example](https://stackblitz.com/edit/angular-ivy-fobnad?file=src%2Fapp%2Fapp.component.ts)
1979
+
1978
1980
### Uppercase Pipe
1979
1981
1980
1982
The `uppercase` pipe is used to transform a string to uppercase.
@@ -1997,6 +1999,8 @@ export class AppComponent {
1997
1999
}
1998
2000
```
1999
2001
2002
+ [Stackblitz Example](https://stackblitz.com/edit/angular-ivy-hlmoxp?file=src%2Fapp%2Fapp.component.ts)
2003
+
2000
2004
### Lowercase Pipe
2001
2005
2002
2006
The `lowercase` pipe is used to transform a string to lowercase.
@@ -2018,6 +2022,8 @@ export class AppComponent {
2018
2022
}
2019
2023
```
2020
2024
2025
+ [Stackblitz Example](https://stackblitz.com/edit/angular-ivy-6gcdgx?file=src%2Fapp%2Fapp.component.ts)
2026
+
2021
2027
### Currency Pipe
2022
2028
2023
2029
The `currency` pipe is used to format a number as currency using the locale rules specified in the application.
@@ -2064,6 +2070,8 @@ import { CurrencyPipe } from '@angular/common';
2064
2070
export class AppModule {}
2065
2071
```
2066
2072
2073
+ [Stackblitz Example](https://stackblitz.com/edit/angular-ivy-3fhhzz?file=src%2Fapp%2Fapp.component.ts)
2074
+
2067
2075
### Percent Pipe
2068
2076
2069
2077
The `percent` pipe is used to format a number as a percentage.
@@ -2111,6 +2119,8 @@ import { PercentPipe } from '@angular/common';
2111
2119
export class AppModule {}
2112
2120
```
2113
2121
2122
+ [Stackblitz Example](https://stackblitz.com/edit/angular-ivy-tccybj?file=src%2Fapp%2Fapp.component.ts)
2123
+
2114
2124
### Slice Pipe
2115
2125
2116
2126
The `slice` pipe is used to create a new array or string containing a subset of the elements of the input array or string.
@@ -2119,6 +2129,8 @@ The `slice` pipe is used to create a new array or string containing a subset of
2119
2129
<p>{{ ['apple', 'banana', 'orange', 'mango'] | slice:1:3 }}</p>
2120
2130
```
2121
2131
2132
+ [Stackblitz Example](https://stackblitz.com/edit/angular-ivy-q88gmm?file=src%2Fapp%2Fapp.component.ts)
2133
+
2122
2134
### Decimal/number Pipe
2123
2135
2124
2136
The `number` pipe is used to format a number as text. It can be used to format a number as a percentage, currency, or decimal number.
@@ -2127,6 +2139,8 @@ The `number` pipe is used to format a number as text. It can be used to format a
2127
2139
<p>{{ 123456.78 | number:'3.2-3' }}</p>
2128
2140
```
2129
2141
2142
+ [Stackblitz Example](https://stackblitz.com/edit/angular-ivy-7cwk1u?file=src%2Fapp%2Fapp.component.ts)
2143
+
2130
2144
### JSON Pipe
2131
2145
2132
2146
The `json` pipe is used to transform a JavaScript object into a JSON string.
@@ -2135,6 +2149,22 @@ The `json` pipe is used to transform a JavaScript object into a JSON string.
2135
2149
<p>{{data | json}}</p>
2136
2150
```
2137
2151
2152
+ ```typescript
2153
+ import { Component } from '@angular/core';
2154
+
2155
+ @Component({
2156
+ selector: 'my-app',
2157
+ templateUrl: './app.component.html',
2158
+ styleUrls: ['./app.component.css'],
2159
+ })
2160
+
2161
+ export class AppComponent {
2162
+ data = { name: 'Manthan Ank', age: 25 };
2163
+ }
2164
+ ```
2165
+
2166
+ [Stackblitz Example](https://stackblitz.com/edit/stackblitz-starters-jgc252?file=src%2Fmain.ts)
2167
+
2138
2168
### Async Pipe
2139
2169
2140
2170
The `async` pipe is used to subscribe to an Observable or Promise and return the latest value it has emitted.
@@ -2185,6 +2215,8 @@ export class ExampleComponent {
2185
2215
}
2186
2216
```
2187
2217
2218
+ [Stackblitz Example](https://stackblitz.com/edit/stackblitz-starters-iatcbn?file=src%2Fmain.ts)
2219
+
2188
2220
### Impure Pipes
2189
2221
2190
2222
By default, Angular pipes are pure, meaning they are stateless and do not change unless the input value changes. However, you can create impure pipes by setting the pure property to false in the @Pipe decorator.
@@ -2204,6 +2236,40 @@ export class ImpurePipe implements PipeTransform {
2204
2236
}
2205
2237
```
2206
2238
2239
+ ```html
2240
+ <p>{{ data | impurePipe }}</p>
2241
+ ```
2242
+
2243
+ ```typescript
2244
+ import { Component } from '@angular/core';
2245
+
2246
+ @Component({
2247
+ selector: 'my-app',
2248
+ templateUrl: './app.component.html',
2249
+ styleUrls: ['./app.component.css'],
2250
+ })
2251
+
2252
+ export class AppComponent {
2253
+ data = 'Hello, world!';
2254
+ }
2255
+ ```
2256
+
2257
+ ```typescript
2258
+ import { BrowserModule } from '@angular/platform-browser';
2259
+ import { FormsModule } from '@angular/forms';
2260
+
2261
+ import { AppComponent } from './app.component';
2262
+
2263
+ @NgModule({
2264
+ imports: [BrowserModule, FormsModule],
2265
+ declarations: [AppComponent, ImpurePipe],
2266
+ bootstrap: [AppComponent],
2267
+ })
2268
+ export class AppModule {}
2269
+ ```
2270
+
2271
+ [Stackblitz Example](https://stackblitz.com/edit/stackblitz-starters-xy3hhp?file=src%2Fmain.ts)
2272
+
2207
2273
[Back to top⤴️](#table-of-contents)
2208
2274
2209
2275
## Decorators
0 commit comments