Angular directives - how to listen to outputs from child components

Question

How can my customDirective listen to the clrDateChange output in the following example?

<clr-date-container customDirective>
    <label for="dateControl">Requirement Date</label>
    <input id="dateControl" type="date" [placeholder]="'TT.MM.YYYY'" [(clrDate)]="item.requirementDate" (clrDateChange)="onChange($event)" [ngModel]="null" name="requirementDate"/>
    <clr-control-error>{{ 'FORMS.VALIDATION.DATE_INVALID' | translate }}</clr-control-error>
</clr-date-container>

For normal DOM events I can use elementRef.nativeElement.querySelector('input') to retrieve the child input element. However clrDateChange is an angular output.

I want to know if it is generally possible for directive to listen to child component outputs.

Hsuan Lee · Answer 1 · 2019-10-15T08:05:31.490

You can use a template reference variable.

@Directive({
  selector: '[customDirective]',
  exportAs: 'CustomDirective'
})
export class CustomDirective {

  foo() {
    // do something
  }

}

<clr-date-container customDirective #myCustomDirective="CustomDirective">
  <label for="dateControl">Requirement Date</label>
  <input id="dateControl"
         type="date"
         [placeholder]="'TT.MM.YYYY'"
         [(clrDate)]="item.requirementDate"
         (clrDateChange)="onChange($event); myCustomDirective.foo()"
         [ngModel]="null"
         name="requirementDate"/>
  <clr-control-error>
    {{ 'FORMS.VALIDATION.DATE_INVALID' | translate }}
  </clr-control-error>
</clr-date-container>

EDIT

If only to subscription clrDate.clrDateChange.

import { Directive, ContentChild, AfterContentInit, OnDestroy } from '@angular/core';
import { Subject } from 'rxjs';
import { takeUntil } from 'rxjs/operators';

import { ClrDateComponent } from '@clr/angular/*';

@Directive({
  selector: '[customDirective]',
  exportAs: 'CustomDirective'
})
export class CustomDirective implements AfterContentInit, OnDestroy {

  private destroy$ = new Subject();

  @ContentChild(ClrDateInput, {static: false}) clrDateComponent: ClrDateInput;

  ngAfterContentInit() {
    if (this.clrDateComponent) {
      this.clrDateComponent.clrDateChange
      .pipe(takeUntil(this.destroy$))
      .subscribe(data => {
        this.foo(data)
      })
    }
  }

  ngOnDestroy() {
    this.destroy$.next();
    this.destroy$.complete();
  }

  foo(data) {
    console.log(data);
    // do something
  }

}

That's quite a creative approach, thanks! But if clrDate does not export itself, can I still access it from within my directive? — Han Che, Oct 15 '19 at 07:32
well clrDate is a third party directive, so yeah if possible i would want to access any other component or directive from a outer directive :) — Han Che, Oct 15 '19 at 07:36
well it boils down to how to get a reference to that 3rd party directive or comonent, doesn't it? The XXXChange should be documented so I know about it. — Han Che, Oct 15 '19 at 07:42

Angular directives - how to listen to outputs from child components

1 Answers1