Web APIs for Angular

    
      
    

      
        Copy
      
      
    
  

    
      import {CommonModule} from '@angular/common';
import {ChangeDetectionStrategy, Component, inject} from '@angular/core';
import {FormsModule} from '@angular/forms';
import {WA_LOCAL_STORAGE} from '@ng-web-apis/common';
import {
    filterByKey,
    toValue,
    WA_STORAGE_EVENT,
    WaStorageService,
} from '@ng-web-apis/storage';
import {TuiGroup, TuiInput, TuiNotification} from '@taiga-ui/core';
import {type Observable} from 'rxjs';

@Component({
    selector: 'example',
    imports: [CommonModule, FormsModule, TuiGroup, TuiInput, TuiNotification],
    templateUrl: './example.template.html',
    changeDetection: ChangeDetectionStrategy.OnPush,
})
export class Example {
    private readonly storageService = inject(WaStorageService);
    private readonly storage = inject(WA_LOCAL_STORAGE);

    protected readonly value$: Observable<string | null> = inject(WA_STORAGE_EVENT).pipe(
        filterByKey('value'),
        toValue(),
    );

    protected native = '';
    protected service = '';
    protected index = 0;

    protected withStorage(value: string): void {
        this.storage?.setItem('value', value);
        this.native = value;
    }

    protected withService(value: string): void {
        this.storageService.setItem('value', value);
        this.service = value;
    }
}

    

      
        Copy
      
      
    
  

    
      <h3>
    Value from
    <code>WA_STORAGE_EVENT</code>
    : {{ value$ | async }}
</h3>
<p tuiGroup>
    <tui-textfield>
        <label tuiLabel>Native update</label>
        <input
            tuiInput
            [ngModel]="native"
            (ngModelChange)="withStorage($event)"
        />
    </tui-textfield>
    <tui-textfield>
        <label tuiLabel>With service</label>
        <input
            tuiInput
            [ngModel]="service"
            (ngModelChange)="withService($event)"
        />
    </tui-textfield>
</p>
<div
    size="m"
    tuiNotification
>
    <div>
        Native event is only triggered with update happens in another tab. Try opening this page in another tab and type
        into the first input. Use
        <code>WaStorageService</code>
        if you need to know about changes in the same tab too.
    </div>
</div>

    

      
        Copy