Skip to content

Commit

Permalink
chore(cdk): move cdk/pipes to cdk/template
Browse files Browse the repository at this point in the history
  • Loading branch information
michaelbe812 committed Apr 11, 2023
1 parent 98d283d commit d4db443
Show file tree
Hide file tree
Showing 8 changed files with 51 additions and 62 deletions.
55 changes: 0 additions & 55 deletions libs/cdk/pipes/README.md

This file was deleted.

5 changes: 0 additions & 5 deletions libs/cdk/pipes/ng-package.json

This file was deleted.

1 change: 0 additions & 1 deletion libs/cdk/pipes/src/index.ts

This file was deleted.

50 changes: 50 additions & 0 deletions libs/cdk/template/README.md
Original file line number Diff line number Diff line change
Expand Up @@ -4,6 +4,7 @@ A package providing some useful Angular ehancements for templates.

## 🔋 Included
* `*rxIfList` - `*ngIf` for lists.
* `runFn` - a pipe to run any function in the template without triggering change detection on every CD cycle.

### `rxIfList`
A structural directive that works like `*ngIf` but for lists. It will only render the template if the list is not empty.
Expand All @@ -15,3 +16,52 @@ The term list does include: arrays and interables.
</ul>
```

#### `RunFnPipe`
This pipe will run any function of your component and
make use of Angular's memoization to prevent unnecessary
re-evaluations which will result in less change detection cycles.

Example using a pure function
```
@Component({
selector: 'my-component',
template: `
<div>
{{ sum | runFn:2:5 }}
</div>
`
})
export class MyComponent {
// a pure function can easily be used like this: {{ sum | runFn:2:5 }}
sum(a: number, b: number) {
return a + b;
}
}
```
Example using im-pure functions (functions containing a `this`-reference
```
@Component({
selector: 'my-component',
template: `
<div>
{{ num | fn: value }}
</div>
<div>
{{ myfn | fn }}
</div>
`
})
export class MyComponent {
value = 10;
// 1a) a pure function can easily be used like this: {{ sum | runFn:2:5 }}
num(a: number) {
return a;
}
// 1b) wrapping in a arrow function will scope this correctly
myfn = () => {
return this.value
};
}
```
1 change: 1 addition & 0 deletions libs/cdk/template/src/index.ts
Original file line number Diff line number Diff line change
@@ -1 +1,2 @@
export * from './lib/rx-if-list/rx-if-list.directive';
export * from './lib/fn/fn.pipe';
File renamed without changes.
File renamed without changes.
1 change: 0 additions & 1 deletion tsconfig.base.json
Original file line number Diff line number Diff line change
Expand Up @@ -19,7 +19,6 @@
"@angular-kit/cdk/coercing": ["libs/cdk/coercing/src/index.ts"],
"@angular-kit/cdk/lazy": ["libs/cdk/lazy/src/index.ts"],
"@angular-kit/cdk/memoize": ["libs/cdk/memoize/src/index.ts"],
"@angular-kit/cdk/pipes": ["libs/cdk/pipes/src/index.ts"],
"@angular-kit/cdk/supported": ["libs/cdk/supported/src/index.ts"],
"@angular-kit/cdk/template": ["libs/cdk/template/src/index.ts"],
"@angular-kit/cdk/token": ["libs/cdk/token/src/index.ts"],
Expand Down

0 comments on commit d4db443

Please sign in to comment.