CODEWITHSUNDEEP
angular
Arun A
Arun A

Reputation: 175

Angular 4 - Circular dependency detected

Opening model from parent component which is existed in child component. Once child functionality completed have to call the parent component METHOD from child component.

i can call the method from child to parent component, but its through warning has Circular dependency detected..

Parent :
parent.html
<child></child>

Parent.ts 
import {c_Comp} from 'child.comp'
@Component({
selector: "parent",
 templateUrl: "parent.html"   
})
export class parent{
 @ViewChild{c_Comp} child : c_Comp;
 constructor(){}
 method(){
   this.child.open();       
 }    
 loadlist(){ } // Have to call from child component.
}  

Child:
import { p_Comp } from 'parent.comp';

@Component({
selector: "child",
  templateUrl: "child.html"   
})
export class child{
  constructor(@Inject(forwardRef(() => parent)) private 
  _parent:parent ) {}
  open() {
    this.notifyModel.show();
  }    
  notifyConfirm() {
   this._parent.loadlist();
  }
}  

module.ts   

import { parent } from 'parent.comp';
import { child } from 'child.comp';
@NgModule({
     declarations: [parent, child],
     imports: []
})  
export class AppModule { }

Upvotes: 2

Views: 5472

Answers (3)

dlcardozo
dlcardozo

Reputation: 4013

You should avoid this kind of reference, if you want to talk with a child use @ViewChild but if you want to do something with the parent from the child use an event (@Output).

Here you have an example that I did for you.

https://stackblitz.com/edit/angular-rltr2g

Parent component

@Component({
  selector: 'parent',
  template: `
    <h1>Parent component</h1>
    <child (onNotify)="runOnChildNotify($event)"></child>
    <p>Times notified: {{count}}</p>
    <button (click)="openChild()">Open child</button>
  `,
  styles: [`h1 { font-family: Lato; }`]
})
export class ParentComponent  {

  @ViewChild(ChildComponent) child : ChildComponent = null;

  count: number = 0;

  constructor() {}

  openChild(): void {
    this.child.open();
  }

  loadList(): void {
    this.count++;
  }

  runOnChildNotify(event: any) {    
    console.log(event.message); // you will see 'hello form child component' here.
    this.loadList();
  }

}

Child component

@Component({
  selector: 'child',
  template: `[Child component - Here]`,
  styles: [`h1 { font-family: Lato; }`]
})
export class ChildComponent  {

  @Output() onNotify: EventEmitter<any> = new EventEmitter();

  constructor() {}

  open(): void {
    this.onNotify.emit({message: 'hello from child component'});
  }

}

Upvotes: 1

Franklin Pious
Franklin Pious

Reputation: 3848

Structuring the application properly can avoid circular dependency.Here in your case this may be the reason, Import of one component/service depends on another component/service which in turn depends on the first component/service or or a pattern similar.

Upvotes: 0

Mike Tung
Mike Tung

Reputation: 4821

You are imported the child component in to the parent and the parent in to the child, you don't need to import those components.

Instead as long as they live in the same module, say app.module.ts and you put the child component's selector in the parent component's template, your code should work just fine.

Additionally for @ViewChild you don't need to type the child, instead use ElementRef or even just leave it off.

Upvotes: 0

Related Questions