I am currently working on a project in StackBlitz, and you can find the link here: https://stackblitz.com/edit/angular-fxfo3f?file=src/directives/smooth-height.directive.ts
I encountered an issue:
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'm struggling to figure out what I'm missing.
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>