-
- {{ client.firstname }}
+
+ Merge : {{ client.firstname }}
+
+
`,
styles: `
.item {
@@ -43,11 +61,35 @@ export class AutocompleteComponent implements AfterViewInit {
@ViewChild('input')
viewInput!: ElementRef
- clients$?: Observable
+ clientsMerge$?: Observable
+
ngAfterViewInit(): void {
- this.clients$ = fromEvent(this.viewInput.nativeElement, 'input').pipe(
- mergeMap(ev => this.clientService.getFilteredSortedClients((ev.target as HTMLInputElement).value)),
+ this.clientsMerge$ = fromEvent(this.viewInput.nativeElement, 'input').pipe(
+ debounceTime(2000),
+ map(ev => (ev.target as HTMLInputElement).value),
+ filter(input => input.length >= 3),
+ tap(console.log),
+ distinctUntilChanged(),
+ mergeMap(input => {
+ // return iif(() => event.length >= 3, this.clientService.getFilteredSortedClients(event), NEVER)
+ return this.clientService.getFilteredSortedClients(input)
+ }),
)
}
+
+ /** Test
+ clientsSwitch$?: Observable
+ clientsConcat$?: Observable
+ clientsExhaust$?: Observable
+ this.clientsSwitch$ = fromEvent(this.viewInput.nativeElement, 'input').pipe(
+ switchMap(ev => this.clientService.getFilteredSortedClients((ev.target as HTMLInputElement).value)),
+ )
+ this.clientsConcat$ = fromEvent(this.viewInput.nativeElement, 'input').pipe(
+ concatMap(ev => this.clientService.getFilteredSortedClients((ev.target as HTMLInputElement).value)),
+ )
+ this.clientsExhaust$ = fromEvent(this.viewInput.nativeElement, 'input').pipe(
+ exhaustMap(ev => this.clientService.getFilteredSortedClients((ev.target as HTMLInputElement).value)),
+ )
+ */
}
diff --git a/src/app/click/click-counter.component.ts b/src/app/click/click-counter.component.ts
new file mode 100644
index 0000000..0c39d02
--- /dev/null
+++ b/src/app/click/click-counter.component.ts
@@ -0,0 +1,53 @@
+import { CommonModule } from '@angular/common';
+import { AfterViewInit, Component, ElementRef, ViewChild } from '@angular/core';
+import { Observable, auditTime, debounceTime, delay, fromEvent, interval, last, map, mergeScan, reduce, scan, startWith, take, takeLast, takeUntil, tap, throttleTime, timer } from 'rxjs';
+
+@Component({
+ selector: 'app-root',
+ standalone: true,
+ imports: [CommonModule],
+ template: `
+ Coucou
+
+
+ {{ counter$ | async }}
+ {{inter$ | async}}
+ `,
+ styles: ``
+})
+export class ClickCounterComponent {
+
+ counter$!: Observable;
+
+ show = true
+
+ inter$!: Observable;
+
+ ngOnInit() {
+ this.inter$ = interval(1000).pipe(
+ startWith(0),
+ map((x) => x + 1)
+ )
+ }
+
+ @ViewChild('button')
+ button!: ElementRef
+
+ // Problème : si on reclique sur le bouton ça relance indéfiniement
+ // il faut cliquer une fois sur le bouton puis ensuite ailleurs
+ // Idée : le stopPropagation() ?
+ count(e: MouseEvent) {
+ this.show = false
+ e.stopPropagation();
+ // this.counter$ = fromEvent(this.button.nativeElement, 'click').pipe(
+ this.counter$ = fromEvent(document, 'click').pipe(
+ takeUntil(interval(2000)),
+ // delay(2000),
+ map(_ => 1),
+ scan((acc, val) => acc + val),
+ last(null, 0)
+ )
+ }
+}
\ No newline at end of file
diff --git a/src/main.ts b/src/main.ts
index 70cc0f9..89ef01e 100644
--- a/src/main.ts
+++ b/src/main.ts
@@ -13,12 +13,13 @@ import { MyAsyncComponent } from './app/rxjs/my-async.component';
import { provideHttpClient } from '@angular/common/http';
import { AutocompleteComponent } from './app/autocomplete/autocomplete.component';
import { RxjsOperateursComponent } from './app/rxjs-operateurs/rxjs-operateurs.component';
+import { ClickCounterComponent } from './app/click/click-counter.component';
/*
platformBrowserDynamic().bootstrapModule(DependencyInjectionModule)
.catch(err => console.error(err));
*/
-bootstrapApplication(AutocompleteComponent, {
+bootstrapApplication(ClickCounterComponent, {
providers: [
provideHttpClient()
]