offsky off-sky
off-sky
/ main-behaviour-subject.ts
Created
March 6, 2024 20:05
Angular state management - BehaviorSubject example
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| interface AppState { | |
| currentQuery: string | null; | |
| status: 'idle' | 'loading' | 'error'; | |
| results: string[]; | |
| } | |
| @Component({ | |
| selector: 'app-root', | |
| standalone: true, |
off-sky
/ main-component-store.ts
Created
March 6, 2024 19:46
Angular state management - Component store example
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| interface AppState { | |
| currentQuery: string | null; | |
| status: 'idle' | 'loading' | 'error'; | |
| results: string[]; | |
| } | |
| @Component({ | |
| selector: 'app-root', | |
| standalone: true, |
off-sky
/ main-reactive-imperative-blend.ts
Created
March 5, 2024 19:03
Angular state management example - Reactive-imperative blend
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| @Component({ | |
| selector: 'app-root', | |
| standalone: true, | |
| imports: [CommonModule], | |
| template: ` | |
| <input placeholder="Your query" style="margin-right: 10px" (input)="onInput($event)"> | |
| <button [disabled]="isSearchDisabled$ | async" (click)="onSearchClicked()">Search</button> | |
| <div *ngIf="displayStatus$ | async; let displayStatus"> | |
| {{ displayStatus }} | |
| </div> |
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| // actions | |
| const searchInput = createAction( | |
| '[App]: Search input', | |
| props<{ value: string }>() | |
| ); | |
| const searchButtonClicked = createAction('[App]: Search button clicked'); | |
| const searchSuccess = createAction( | |
| '[Effect]: Search success', | |
| props<{ results: string[] }>() | |
| ); |
off-sky
/ main-reactive.ts
Last active
March 8, 2024 08:55
Angular state management - Reactive example
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| @Component({ | |
| selector: 'app-root', | |
| standalone: true, | |
| template: ` | |
| <input placeholder="Your query" style="margin-right: 10px" #inputElement> | |
| <button [disabled]="isSearchDisabled$ | async" #buttonElement>Search</button> | |
| <div *ngIf="displayStatus$ | async; let displayStatus"> | |
| {{ displayStatus }} | |
| </div> | |
| <div *ngIf="results$ | async; let results"> |
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| @Component({ | |
| selector: 'app-root', | |
| standalone: true, | |
| template: ` | |
| <input placeholder="Your query" style="margin-right: 10px" (input)="onInput($event)"> | |
| <button [disabled]="isSearchDisabled" (click)="onSearch()">Search</button> | |
| <div *ngIf="displayStatus"> | |
| {{ displayStatus }} | |
| </div> | |
| <div *ngIf="results"> |
off-sky
/ get-positions-from-input-parameters.ts
Last active
July 4, 2022 12:51
Get connected position from input parameters
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| export const getPositionsFromInputParameters = ( | |
| xPosition: 'above' | 'center' | 'below', | |
| yPosition: 'before' | 'center' | 'after' | 'align-start' | 'align-end', | |
| ): ConnectedPosition[] => { | |
| const primaryPosition = getPrimaryPositionFromInputParameters(xPosition, yPosition); | |
| return [primaryPosition, ...getFallBackPositionsForPrimaryPosition(primaryPosition)]; | |
| }; |
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| @Component({ | |
| selector: 'custom-tooltip', | |
| template: ` | |
| <div | |
| cdkOverlayOrigin | |
| #trigger="cdkOverlayOrigin" | |
| (mouseenter)="mouseEnter()" | |
| (mouseleave)="mouseLeave()" | |
| > |
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| @import '@angular/cdk/overlay-prebuilt.css'; |
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| <custom-tooltip xPosition="center" yPosition="top"> | |
| <div anchor> | |
| Hover over me. | |
| </div> | |
| <div content> | |
| <h3>Awesome header</h3> | |
| <div>Awesome text</div> | |
| </div> | |
| </custom-tooltip> |
NewerOlder