Can't bind to since it isn't a known property of 'div'

Question

I am working on a stackblitz: https://stackblitz.com/edit/angular-fxfo3f?file=src/directives/smooth-height.directive.ts

I have an error:

Error in src/components/parent/parent.component.html (2:6)
Can't bind to 'appSmoothHeight' since it isn't a known property of 'div'.

I can't think what I'm doing wrong.

smooth-height.directive.ts:

import {
  Directive,
  ElementRef,
  HostBinding,
  Input,
  SimpleChanges,
} from '@angular/core';

@Directive({
  selector: '[appSmoothHeight]',
  standalone: true,
})
export class SmoothHeightDirective {
  @Input() smoothHeight: boolean;
  pulse: boolean;
  startHeight: number;

  constructor(private element: ElementRef) {}

  @HostBinding('@grow')
  get grow() {
    return { value: this.pulse, params: { startHeight: this.startHeight } };
  }

  setStartHeight() {
    this.startHeight = this.element.nativeElement.clientHeight;
  }

  ngOnChanges(changes: SimpleChanges) {
    console.log(changes);
    this.setStartHeight();
    this.pulse = !this.pulse;
  }
}

parent.component.ts:

import { Component } from '@angular/core';
import { CommonModule } from '@angular/common';
import { SmoothHeightDirective } from '../../directives/smooth-height.directive';
import { smoothHeight } from '../../../animations';
import { TestComponent } from '../test/test.component';

@Component({
  selector: 'app-parent',
  templateUrl: './parent.component.html',
  styleUrls: ['./parent.component.css'],
  standalone: true,
  animations: [smoothHeight],
  imports: [TestComponent, SmoothHeightDirective, CommonModule],
})
export class ParentComponent {
  longContent: boolean = false;

  toggleContent() {
    this.longContent = !this.longContent;
  }
}

parent.component.html:

<button (click)="toggleContent()">Toggle Content</button>
<div [appSmoothHeight]="longContent"></div>

score 1 · Answer 1 · answered May 15 '23 at 16:03

It was already answered here: Angular2 Can't bind to DIRECTIVE since it isn't a known property of element

Basically, the @input inside the custom directive must share the name of its selector. So where I have:

@Directive({
  selector: '[appSmoothHeight]', // "appSmoothHeight"
  standalone: true,
})
export class SmoothHeightDirective {
  @Input() appSmoothHeight: boolean; // Must also be named "appSmoothHeight"
// ...

Can't bind to since it isn't a known property of 'div'

1 Answers1