Changing the Type of Angular Property from SignalFunction to Boolean

Question

Changing the Type of Angular Property from SignalFunction to Boolean

Seeking insights on a curious situation in my Angular app. Here's the issue: I have a code snippet with a property named isSelection defined like this:

public isSelection = model.required<boolean>();
public getTypeof(value: any): string {
    return typeof value;
}

The isSelection property is set to a model.required signal.

<input type="checkbox" [(ngModel)]="isSelection" />
<p>{{ getTypeof(isSelection) }}</p>

I connect isSelection to a checkbox input using [(ngModel)].

The paragraph reveals the type of isSelection. Oddly, it displays as a function and doesn't change even when the checkbox is clicked.

However, if I modify the property declaration to:

public isSelection = input.required<boolean>();

The behavior shifts, and the type of isSelection appears to switch from a function to a boolean.

Note: I am using the latest version of Angular 17.3.1.

angular typescript signals

Answer 1

Answer №1

input.required<boolean>() -> designed for one-way binding, however, it is being used for two-way binding which results in the function being replaced by a boolean value.

To rectify this issue, one-way binding can be utilized in HTML.

<input type="checkbox" [ngModel]="isSelection2" />

When I incorporate the provided code as a child and supply inputs from the parent, Angular throws an error when attempting to use

[(ngModel)]="isSelection2"

.

model.required<boolean>() -> intended for two-way binding, so your example functions correctly since it performs as expected!

View the code/Stackblitz below:

child

import { Component, input, model } from '@angular/core';
import { FormsModule } from '@angular/forms';

@Component({
  selector: 'app-child',
  standalone: true,
  imports: [FormsModule],
  template: `
    <input type="checkbox" [(ngModel)]="isSelection" />
    <pre>{{ isSelection() }}</pre>
    <p>{{ getTypeof(isSelection) }}</p>
    <hr />
    <input type="checkbox" [ngModel]="isSelection2" />
    <pre>{{ isSelection2() }}</pre>
    <p>{{ getTypeof(isSelection2) }}</p>
  `,
})
export class ChildComponent {
  public isSelection = model.required<boolean>();
  public isSelection2 = input.required<boolean>();

  public getTypeof(value: any): string {
    return typeof value;
  }
}

main.ts

import { Component } from '@angular/core';
import { bootstrapApplication } from '@angular/platform-browser';
import 'zone.js';
import { ChildComponent } from './app/child/child.component';

@Component({
  selector: 'app-root',
  standalone: true,
  imports: [ChildComponent],
  template: `<app-child [isSelection2]="true" [isSelection]="false"/>`,
})
export class App {}

bootstrapApplication(App);

View Interactive Demo on Stackblitz

Answer 2

input.required<boolean>() -> designed for one-way binding, however, it is being used for two-way binding which results in the function being replaced by a boolean value.

To rectify this issue, one-way binding can be utilized in HTML.

<input type="checkbox" [ngModel]="isSelection2" />

When I incorporate the provided code as a child and supply inputs from the parent, Angular throws an error when attempting to use

[(ngModel)]="isSelection2"

.

model.required<boolean>() -> intended for two-way binding, so your example functions correctly since it performs as expected!

View the code/Stackblitz below:

child

import { Component, input, model } from '@angular/core';
import { FormsModule } from '@angular/forms';

@Component({
  selector: 'app-child',
  standalone: true,
  imports: [FormsModule],
  template: `
    <input type="checkbox" [(ngModel)]="isSelection" />
    <pre>{{ isSelection() }}</pre>
    <p>{{ getTypeof(isSelection) }}</p>
    <hr />
    <input type="checkbox" [ngModel]="isSelection2" />
    <pre>{{ isSelection2() }}</pre>
    <p>{{ getTypeof(isSelection2) }}</p>
  `,
})
export class ChildComponent {
  public isSelection = model.required<boolean>();
  public isSelection2 = input.required<boolean>();

  public getTypeof(value: any): string {
    return typeof value;
  }
}

main.ts

import { Component } from '@angular/core';
import { bootstrapApplication } from '@angular/platform-browser';
import 'zone.js';
import { ChildComponent } from './app/child/child.component';

@Component({
  selector: 'app-root',
  standalone: true,
  imports: [ChildComponent],
  template: `<app-child [isSelection2]="true" [isSelection]="false"/>`,
})
export class App {}

bootstrapApplication(App);

View Interactive Demo on Stackblitz

Changing the Type of Angular Property from SignalFunction to Boolean

Answer №1

Similar questions

Should Redux be implemented in an Angular application?

The specified file ngx-extended-pdf-viewer/assets/pdf.js cannot be found

The error message "Module 'electron' not found" is commonly encountered when working with Electron and TypeScript

How can I prevent other input fields from being enabled once the value "matched" is received in the first input field using Angular?

When attempting to run the command 'ng serve', an error occurs stating "Permission denied"

Oops! An unhandled promise error occurred when trying to fetch a URL with a status of 0. The response received has a status code of

Assigning a value to the <Style> tag in an Angular 2 template

My component is displaying a warning message that advises to provide a unique "key" prop for each child in a list during rendering

Dependency Injection: The constructor of the injectable class is called multiple times

Issue with bootstrap modal new line character not functioning properly

Is it feasible to return data when utilizing the ModalController in Ionic 5, specifically when executing a swipeToClose or backdropDismiss action?

Toggling classes in Angular for dynamic elements can easily be achieved by using the

Having trouble with Angular2 testing? It seems like you may be missing the 'angularCli.config' entry in your Karma configuration

How to defer the rendering of the router-outlet in Angular 2

Problems encountered with Bootstrap navbar-nav while utilizing ngFor

What is the proper way to utilize e.key and e.target.value in TypeScript when coding with React?

get and enjoy streaming audio in Angular 8

Is there a method to globally import "typings" in Visual Code without having to make changes to every JS file?

typescript Can you explain the significance of square brackets in an interface?

Experience a captivating Angular slideshow carousel that resets when you click on a dot button, all powered by the magical capabilities of