[Fixed] Use directive to change @Input attribute

Issue

I have the following component:

@Component({
  selector: 'box',
  [...]
})
export class BoxComponent {
  @Input() collapsable: boolean = false;
  [...]
}

I can use it with <box [collapsable]="true"></box> and it works fine. But I want to use a directive to change the attribute collapsable to true as in <box box-collapsable></box>.

I tried the following directive, but it does not work:

@Directive({
  selector: '[box-collapsable]',
})
export class BoxCollapsableDirective {
  constructor(private el: ElementRef) {}

  ngAfterViewInit(): void {
    this.el.nativeElement.attributes.collapsable = true;
  }
}

I do not get any error, but collapsable in BoxComponent stays on false. Is there any way to use directives to change input properties?

Solution

Instead of injecting the ElementRef into your directive, you can inject the BoxComponent instance:

@Directive({
  selector: '[box-collapsible]'
})
export class BoxCollapsibleDirective {
  constructor(private box: BoxComponent) {} // <--- inject BoxComponent instance

  ngAfterViewInit() {
    this.box.collapsible = true;
  }
}

That will give you direct access to the component’s exposed properties, including its Input properties.

Here’s a StackBlitz demonstrating this approach. (After one second, the directive changes collapsible from true to false.)