open-index/open-npm huggingface dataset:
npm package: @fp-tools/angular-resize
Description: Angular 14 service and directive for detecting changes on an element size. Internally it use the [Resize observer](https://developer.mozilla.org/en-US/docs/Web/API/ResizeObserver).
Latest version: 16.0.0

# Angular resize util

Angular 14 service and directive for detecting changes on an element size.
Internally it use the [Resize observer](https://developer.mozilla.org/en-US/docs/Web/API/ResizeObserver).


You can use it as directive, inside your angular template
```html
<div (fpResized)="onResized($event)"></div>
 ```
 or as a service, if you use a third party library and need to observe to an id of the htmlElement
```typescript
this.resiseService.registerObserver('my-id', {id: 'htmlId', onResize: (event) => console.log(event)})
```

# Working example
https://stackblitz.com/edit/fp-toolsangular-resize
 
# HowTo use the library
To install 
`npm i @fp-tools/angular-resize` or `yarn add @fp-tools/angular-resize`
 

## Use the directive

First add `ResizeModule` to your modules import

```typescript
import { ResizeModule } from '@fp-tools/angular-resize';

@NgModule({
imports: [..., ResizeModule],
declarations: [...],
bootstrap: [...],
})
export class MyModule {}
```

Then use the directive on the element where you want to listen. The ResizeObservable will automatically unsubscribe whenever the directive is destroyed.

```html
<div (fpResize)="onResize()">I'm a div with the resize directive</div>
```

```typescript 

@Component({...})
export class MyComponent { 
  onResize() {
    console.log('resize');
  }
}
```

## Use the service
In some cases a non-angular library may have an issue with resizing. F.E. if you resize your window a map should be resized as wel, for some reason this is not the case and you should manual trigger the `map.resize()`. In this case it can be easily done with the ResizeService

Don't forget to destroy the resize listener when you don't need it anymore. This may avoid memory-leaks
```typescript
import { Injectable } from '@angular/core';
import { ResizeService } from '@fp-tools/angular-resize';

@Injectable({ providedIn: 'root' })
export class MyService {
  constructor(private readonly resizeService: ResizeService) {}

  init() {
    this.resizeService.registerObserver('myId', {
      id: 'myId',
      onResize: () => console.log('resize by the service'),
    });
  }

  destroy() {
    this.resizeService.destroy('myId');
  }
}

```

# License
MIT © Bo Vandersteene
npm package: @fp-tools/rxjs
Description: Additional operators for RxJs that makes your code more readable
Latest version: 1.0.0

# RxJs utils

Additional operators for RxJs that makes your code more readable
 
# HowTo use the library
To install
`npm i @fp-tools/rxjs` or `yarn add @fp-tools/rxjs`

## Filter operators

Filter values that are not null
```typescript
import {isNotNullOrUndefined} from '@fp-tools/rxjs';

of([null, 'abc', false]).pipe(
      isNotNullOrUndefined()
).subscribe(value => console.log(value));

// ['abc', false]
```

Filter values that are null

```typescript
import {isNullOrUndefined} from '@fp-tools/rxjs';

of([null, 'abc', false]).pipe(
      isNotNullOrUndefined()
).subscribe(value => console.log(value));

// [null]
```

## Transform operators
If a value is null or undefined, a default value will be returned.

```typescript
import {valueOrDefault} from '@fp-tools/rxjs';

of([null, 'abc', false]).pipe(
    valueOrDefault('abc')
).subscribe(value => console.log(value));

// ['abc', 'abc', false]
```

If a value is null or undefined, a default value will be returned, otherwise the value will be transformed.

```typescript
import {valueOrDefault} from '@fp-tools/rxjs';

of([null, 0, 1, 4]).pipe(
  valueOrDefault('abc', value => value * 2)
).subscribe(value => console.log(value));

// ['abc', 0, 2, 8]
```

# License
MIT © Bo Vandersteene