Input based signal check gives not a function error

Question

I have an input signal which I take and set as attribute but in browser I see an error

this.width is not a function

export class SkeletonComponent implements OnInit {
  readonly width = input<string>('');

  ngOnInit(): void {
    if (isPlatformServer(this.platformId)) {
      return;
    }

    const host = this.host.nativeElement;
    host.style.setProperty('--app-skeleton-width', this.width() || '100%');

Naren Murali · Accepted Answer · 2025-05-26 11:18:07Z

1

The reason you might be getting this error, is because the ngOnInit is execute in a context (scope) somewhere other than your component scope, The code shared does not seem to have any issues, but you can achieve this feature using lesser code using @HostBinding or host demonstrated below.

Define the width CSS variable using `host` property of `@Component` params:

@Component({
  ...
  host: {
    'style.--app-skeleton-width': 'width()',
  },
})

Here we can define the CSS property using 'style.--app-skeleton-width' and execute the signal inside a string.

We can then use the transform property to set a default value.

readonly width = input<string, string>('', {
  transform: (value: string) => value || '100%',
});

Or we can simply define the width as the default value.

readonly width = input<string>('100%');

Define the `@HostBinding` decorator and execute the signal inside:

We can define the @Hostbinding and return the signal value.

@HostBinding('style.--app-skeleton-width')
get skeletonWidth() {
  // if (isPlatformServer(this.platformId)) {
  //   return;
  // }
  return this.width() || '100%';
}

We can achieve this using the two methods, below is a working example for your reference:

Full Code:

import { Component, HostBinding, input } from '@angular/core';
import { bootstrapApplication } from '@angular/platform-browser';

@Component({
  selector: 'app-child2',
  template: `
    this is the child
    <div style="width: var(--app-skeleton-width)">
      I got my width from --app-skeleton-width
    </div>
  `,
  styles: [
    `div {
      background-color: lightblue;
    }`,
  ],
  host: {
    'style.--app-skeleton-width': 'width()',
  },
})
export class Child2 {
    readonly width = input<string, string>('', {
      transform: (value: string) => value || '100%',
    });
}

@Component({
  selector: 'app-child',
  template: `
    this is the child
    <div style="width: var(--app-skeleton-width)">
      I got my width from --app-skeleton-width
    </div>
  `,
  styles: [
    `div {
      background-color: lightblue;
    }`,
  ],
})
export class Child {
  readonly width = input<string>('');

  @HostBinding('style.--app-skeleton-width')
  get skeletonWidth() {
    // if (isPlatformServer(this.platformId)) {
    //   return;
    // }
    return this.width() || '100%';
  }
}
@Component({
  selector: 'app-root',
  imports: [Child, Child2],
  template: `
    <app-child [width]="'500px'"/>
    <br/>
    <br/>
    <app-child2 [width]="'300px'"/>
  `,
})
export class App {
  name = 'Angular';
}

bootstrapApplication(App);

Stackblitz Demo

edited May 26 at 11:18

answered May 26 at 11:00

Naren Murali

66.3k6 gold badges51 silver badges97 bronze badges

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

2 Comments

Sunstrike527 May 26 at 11:09

quite good approach but why this is happening ? as usual signals in angular you can take value as width() or any value. For instance in below code I would also need chekc value of this this.class() for some logic like adding class to host and etc.

Naren Murali May 26 at 11:10

@Sunstrike527 do a console.log(this) above the host.style.setProperty('--app-skeleton-width', this.width() || '100%'); then observe the scope where it is executed, the code you shared should not have any issues as far as I can see

Collectives™ on Stack Overflow

Input based signal check gives not a function error

1 Answer 1

Define the width CSS variable using `host` property of `@Component` params:

Define the `@HostBinding` decorator and execute the signal inside:

Full Code:

Stackblitz Demo

2 Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

Define the width CSS variable using host property of @Component params:

Define the @HostBinding decorator and execute the signal inside:

Full Code:

2 Comments

Your Answer

Sign up or log in

Post as a guest

Related

Define the width CSS variable using `host` property of `@Component` params:

Define the `@HostBinding` decorator and execute the signal inside: