Starting value within angular's toSignal()

Experiencing frustration with setting initialValue to true for a signal, encountering the error message (TS2769: No overload matches this call).

The Observable does return an Observable.

A workaround was found by omitting the "initialValue" option and adding "as Signal," although not entirely satisfying as the root cause remains unclear.

If there are any insights or feedback on signal usage and the provided code, it would be greatly appreciated:

export class HeaderComponent implements OnInit {
  private readonly injector = inject(Injector);

  constructor(private scrollDispatcher: ScrollDispatcher,private viewportRuler:ViewportRuler) {}

  ngOnInit(): void {
    this.scrollLimit = toSignal<boolean>(this.scrollDispatcher.scrolled()
      .pipe(
        map(()=> this.viewportRuler.getViewportScrollPosition().top),
        map((top) => top < 349)
      ), {injector: this.injector, intialValue: true}) ;
 }
}

Provided below is the current workaround that functions:

    this.scrollLimit = toSignal<boolean>(this.scrollDispatcher.scrolled()
      .pipe(
        startWith(void 0),
        map(()=> this.viewportRuler.getViewportScrollPosition().top),
        map((top) => top < 349)
      ), {injector: this.injector}) as Signal<boolean>;

Answer №1

Check out these examples:

export class HeaderComponent implements OnInit {
  private readonly scrollDispatcher = inject(ScrollDispatcher);
  private readonly viewportRuler= inject(ViewportRuler);

  scrollLimit = toSignal<boolean>(this.scrollDispatcher.scrolled().pipe(
    map(()=> this.viewportRuler.getViewportScrollPosition().top),
    map((top) => top < 349)
  ), { initialValue: false })
}

Alternatively, you can also try:

export class HeaderComponent implements OnInit {
  private readonly scrollDispatcher = inject(ScrollDispatcher);
  private readonly viewportRuler= inject(ViewportRuler);

  scrollLimit = toSignal<boolean>(this.scrollDispatcher.scrolled().pipe(
    startWith(0),
    map(()=> this.viewportRuler.getViewportScrollPosition().top),
    map((top) => top < 349)
  ), { requireSync: true })
}

Similar questions

If you have not found the answer to your question or you are interested in this topic, then look at other similar questions below or use the search

What could be causing the discrepancy in alignment between a web application running on Mac and Windows using ReactNative?

We have a web application built with react native. The alignment of the columns in the list is causing issues when running the app on Windows versus Mac, as illustrated in the screenshots. Interestingly, this problem only occurs with this specific list tha ...

Once I introduce ngModel into mat-checkbox, the functionality of 'checked' stops working

When I add an ngModel to my mat-checkbox, the checked = "checked" functionality stops working as expected. The following code will work: <mat-checkbox name="BlackBeard" ngModel checked = "checked"> Zehahaha? </mat-checkbox> However, the foll ...

Using templateUrl from a remote server in Angular 2 can be achieved by specifying the complete URL

My file contains the following component with a remote URL: @Component({ templateUrl: '/mobilesiteapp/template/?path=pages/tabs' }) export class TabsPage { } Unfortunately, when compiling, I encountered this error message: [13:28:50] Error ...

Encountering an error in Angular: Module '@angular-devkit/core' not found

Whenever I run ng serve on my fresh Angular project, I encounter the following error: module.js:538 throw err; ^ Error: Cannot find module '@angular-devkit/core' What could be causing this issue? ...

The Angular 4 HTTP patch method is encountering difficulties when called in code but functions properly when tested using Post

My attempts to make a patch and post call to the server are failing as it never reaches the server. Interestingly, the same request works flawlessly in Postman, so I suspect there might be an issue with my code. Both my post and patch methods are essentia ...

summing 3 numbers to a total of 100 percent

I am currently trying to calculate the percentages of different statuses based on 3 count values. Let's assume I have 3 statuses: 1) Passed 2) Failed 3) Skipped When dealing with only two cases, I was able to use a combination of the Floor and Ceil ...

component is receiving an incompatible argument in its props

I am facing a situation where I have a component that works with a list of items, each with an ID, and a filtering function. The generic type for the items includes an ID property that all items share. Specific types of items may have additional properti ...

Troubleshooting problems with styling in Angular Material's mat-select component

In my project, I am using Angular 8.0.0 along with Angular Material and the Fuse Theme as an admin panel. The issue I am facing is that every time I change the style of a mat-select component, it initially gets applied but after one or two refreshes, Angul ...

Using Vue-router and Typescript with beforeEnter guard - utilizing validated data techniques

As I utilize Vue along with vue-router and typescript, a common scenario arises where a single page is dedicated to displaying a Photo component. A route includes a beforeEnter guard that checks my store to verify the existence of the requested photo. ...

Template literal types in TypeScript and Visual Studio Code: An unbeatable duo

I'm encountering an issue while attempting to utilize literal types in Visual Studio Code. When following the example from the documentation, https://i.stack.imgur.com/V6njl.png eslint is flagging an error in the code (Parsing error: Type expected.e ...

Sending various kinds of generic types to React component properties

Currently, my team and I are working on a TypeScript/React project that involves creating a versatile 'Wizard' component for multi-step processes. This Wizard acts as a container, receiving an array of 'panel' component properties and p ...

Angular - Navigate to Login Page post registration and display a confirmation message

As a newcomer to Angular, I am currently working on an Angular and Spring Boot application. So far, I have created components for user login and registration along with validation features. Now, my goal is to redirect the user to the login page upon succes ...

The constant increase in page header number leading to minor interruptions during page scrolling

On my website, I have a dynamic page header that shows the number of comments a user has scrolled through. You can see this feature in action here: However, there seems to be a slight jitter on the screen every time the comment counter updates... To disp ...

Discover the solution for resolving the issue of HttpErrorResponse 405 not permissible

I am currently managing a website on a VPS that relies on Flask as the backend API server, Angular for the frontend, and Nginx as a reverse proxy. The Nginx has SSL installed, but I am encountering an issue where I can only connect to the Flask server usin ...

Displaying Firebase data using Angularfire2 5.0 on an Ionic template

Hey everyone, I've been encountering a problem while trying to use angularfire2 v 5.0. I was comfortable using v 4.0 before, but now that I'm transitioning to v 5.0, I'm facing some issues. Does anyone know how I can display real-time data ...

Transferring dynamic data to an Angular component's controller

Here's what I currently have: <div *ngFor="let career of careers"> <label>{{career.name}}</label> <input type="checkbox" attr.id="{{career.id}}" (change)="doSomethingWithId($event.target)" </div> This is the TypeSc ...

Subscribing to a GraphQL mutation through Angular with the Appsync client

Currently, I am developing a chat application in Angular using GraphQL with Appsync on AWS. The current process for creating a new chat involves mocking up the chat and sending it to the server. On the server-side, a unique chat_id is generated for each ch ...

Issue with Angular modal popup not repositioning upon clicking elsewhere on the page

I have encountered an issue with modal popups on my website. Specifically, I have approximately 100 table elements and when I try to edit the element #100, the modal popup appears at the bottom of the page. However, if I scroll back up and click on eleme ...

What is the best way to address this conflicting Angular node package module dependency?

Recently, I completed updating all my node modules through the npm-check-updates tool. This was necessary to be able to install the latest version of ngx-stripe from https://ngx-stripe.dev/, as it required some newer versions of node modules that were miss ...

The full-screen material dialog's Y-scrollbar is overlapping with the page's Y-scrollbar

I'm currently working on a material dialog that takes up the full screen. The content of the dialog is larger than the screen height, resulting in a vertical scrollbar within the dialog. However, the overall page is also taller than the screen height ...