Use directive to change @Input attribute

Question

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?

Answer 1

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.)