CODEWITHSUNDEEP
angular7angular2-directivesangular8
nopuck4you
nopuck4you

Reputation: 1700

Having issues getting @ContentChild working with Directive

I've been trying to get ContentChild with Directive working in a demo/example and I keep running into the directive not working. No errors being thrown. I've replicated the scenario on StackBlitz and I'm getting the same problem: https://stackblitz.com/edit/angular-contentchild-directive-etktcd

Why am I still getting "undefined" for the child input?

Here is the Directive:

import { Component, Directive, Input, ContentChild, OnInit, OnDestroy, forwardRef, AfterContentInit} from '@angular/core';
import { AbstractControl } from '@angular/forms';
import { FocusDirective } from '../directive/focus.directive';

@Component({
  selector: 'field-validation',
  template: `
    <ng-content></ng-content>
  `
})

export class FieldValidationComponent implements OnInit, AfterContentInit {



  @ContentChild(FocusDirective) input: FocusDirective;

  ngOnInit(): void {
    console.log("ngOnInit::input is: ", this.input);
    // this.input.focusChange.subscribe((focus) => {
    //   this.updateAttributes();
    // });
  }

  ngAfterContentInit(): void {
    console.log("ngAfterContentInit::input is: ", this.input);
  }

}

Here is the child Component:

import { Component, Directive, Input, ContentChild, OnInit, OnDestroy, 

forwardRef, AfterContentInit} from '@angular/core';
import { AbstractControl } from '@angular/forms';
import { FocusDirective } from '../directive/focus.directive';

@Component({
  selector: 'field-validation',
  template: `
    <ng-content></ng-content>
  `
})

export class FieldValidationComponent implements OnInit, AfterContentInit {



  @ContentChild(FocusDirective) input: FocusDirective;

  ngOnInit(): void {
    console.log("ngOnInit::input is: ", this.input);
    // this.input.focusChange.subscribe((focus) => {
    //   this.updateAttributes();
    // });
  }

  ngAfterContentInit(): void {
    console.log("ngAfterContentInit::input is: ", this.input);
  }

}

Here is the HTML in the parent app:

<form [formGroup]="testForm">
  <field-validation>
    <input type="text" placeholder="0.00">
  </field-validation>
  <div>
  <button type="submit">FAKE SUBMIT</button>
  </div>
</form>

Upvotes: 1

Views: 2032

Answers (1)

Naren Murali
Naren Murali

Reputation: 58404

Please add the FocusDirective class to declaration property of AppModule, as shown below.

import { NgModule } from '@angular/core';
import { BrowserModule } from '@angular/platform-browser';
import { ReactiveFormsModule } from '@angular/forms';

import { AppComponent } from './app.component';
import { HelloComponent } from './hello.component';
import { FieldValidationComponent } from './child-component/field-validation.component';
import { RxReactiveFormsModule } from '@rxweb/reactive-form-validators'
import { FocusDirective } from './directive/focus.directive';

@NgModule({
  imports:      [ BrowserModule, ReactiveFormsModule, RxReactiveFormsModule],
  declarations: [ AppComponent, HelloComponent, FieldValidationComponent, FocusDirective],
  bootstrap:    [ AppComponent ]
})
export class AppModule { }

Upvotes: 2

Related Questions