How to set an Input property without binding in Angular

Question

I have a simple Angular component which takes a debounce time as an Input parameter. The parameter type is a number with a default value equals to 0. It is used later on as a debounceTime value.

input.component.ts

import { AfterViewInit, Component, Input } from '@angular/core';
import { debounceTime } from 'rxjs';

@Component({
  selector: 'app-input',
  templateUrl: './input.component.html',
  styleUrls: ['./input.component.scss']
})
export class InputComponent implements AfterViewInit {
  @Input() debounce: number = 0;

  ngAfterViewInit(): void {
    //(...).pipe(debounceTime(this.debounce)).subscribe(...);
  }
}

I would like to pass the debounce value from the parent component without binding to the local variable or constant.

app.component.html

<app-input debounce="200"></app-input>

It doesn't work because debounce value comes as a string type from a template. It does work when I use binding to the local constant. A console error confirms the type.

Error: src/app/app.component.html:3:12 - error TS2322: Type 'string' is not assignable to type 'number'.

I can disable strict templates checks as this is a default for Angular 15 but rxjs "debounceTime" function won't accept a string parameter.

How can I pass a number directly from the template without using bindings?

s_frix · Accepted Answer · 2023-02-13 14:43:31Z

2

You can just use [] for input to pass a number like this:

<app-input [debounce]="200"></app-input>

you'll now get a number.

answered Feb 13, 2023 at 14:43

s_frix

3232 silver badges11 bronze badges

Sign up to request clarification or add additional context in comments.

1 Comment

D M Over a year ago

This is the correct way. Just bind to the literal value - no need for a setter or a local constant.

Eliseo · Accepted Answer · 2023-02-13 14:37:23Z

0

Use a setter

debounce: number = 0;
@Input() set _debounce(value:any){
   this.debounce=+value;
}

Or use

.pipe(debounceTime(+this.debounce)

NOTE: The + is a confortable way to parse a string to number

answered Feb 13, 2023 at 14:37

Eliseo

58.9k4 gold badges39 silver badges82 bronze badges

Collectives™ on Stack Overflow

How to set an Input property without binding in Angular

2 Answers 2

1 Comment

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

1 Comment

Comments

Your Answer

Sign up or log in

Post as a guest

Related