Skip to content

Commit 4eeae38

Browse files
committed
docs: Add Stackblitz examples in README.md
1 parent 90afb3b commit 4eeae38

File tree

1 file changed

+66
-0
lines changed

1 file changed

+66
-0
lines changed

README.md

+66
Original file line numberDiff line numberDiff line change
@@ -1975,6 +1975,8 @@ import { DatePipe } from '@angular/common';
19751975
export class AppModule {}
19761976
```
19771977

1978+
[Stackblitz Example](https://stackblitz.com/edit/angular-ivy-fobnad?file=src%2Fapp%2Fapp.component.ts)
1979+
19781980
### Uppercase Pipe
19791981

19801982
The `uppercase` pipe is used to transform a string to uppercase.
@@ -1997,6 +1999,8 @@ export class AppComponent {
19971999
}
19982000
```
19992001

2002+
[Stackblitz Example](https://stackblitz.com/edit/angular-ivy-hlmoxp?file=src%2Fapp%2Fapp.component.ts)
2003+
20002004
### Lowercase Pipe
20012005

20022006
The `lowercase` pipe is used to transform a string to lowercase.
@@ -2018,6 +2022,8 @@ export class AppComponent {
20182022
}
20192023
```
20202024

2025+
[Stackblitz Example](https://stackblitz.com/edit/angular-ivy-6gcdgx?file=src%2Fapp%2Fapp.component.ts)
2026+
20212027
### Currency Pipe
20222028

20232029
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';
20642070
export class AppModule {}
20652071
```
20662072

2073+
[Stackblitz Example](https://stackblitz.com/edit/angular-ivy-3fhhzz?file=src%2Fapp%2Fapp.component.ts)
2074+
20672075
### Percent Pipe
20682076

20692077
The `percent` pipe is used to format a number as a percentage.
@@ -2111,6 +2119,8 @@ import { PercentPipe } from '@angular/common';
21112119
export class AppModule {}
21122120
```
21132121

2122+
[Stackblitz Example](https://stackblitz.com/edit/angular-ivy-tccybj?file=src%2Fapp%2Fapp.component.ts)
2123+
21142124
### Slice Pipe
21152125

21162126
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
21192129
<p>{{ ['apple', 'banana', 'orange', 'mango'] | slice:1:3 }}</p>
21202130
```
21212131

2132+
[Stackblitz Example](https://stackblitz.com/edit/angular-ivy-q88gmm?file=src%2Fapp%2Fapp.component.ts)
2133+
21222134
### Decimal/number Pipe
21232135

21242136
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
21272139
<p>{{ 123456.78 | number:'3.2-3' }}</p>
21282140
```
21292141

2142+
[Stackblitz Example](https://stackblitz.com/edit/angular-ivy-7cwk1u?file=src%2Fapp%2Fapp.component.ts)
2143+
21302144
### JSON Pipe
21312145

21322146
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.
21352149
<p>{{data | json}}</p>
21362150
```
21372151

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+
21382168
### Async Pipe
21392169

21402170
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 {
21852215
}
21862216
```
21872217

2218+
[Stackblitz Example](https://stackblitz.com/edit/stackblitz-starters-iatcbn?file=src%2Fmain.ts)
2219+
21882220
### Impure Pipes
21892221

21902222
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 {
22042236
}
22052237
```
22062238

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+
22072273
[Back to top⤴️](#table-of-contents)
22082274

22092275
## Decorators

0 commit comments

Comments
 (0)