Angular 4 - Circular dependency detected

Question

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 { }

dlcardozo · Accepted Answer · 2018-01-20 20:42:03Z

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'});
  }

}

Mike Tung · Accepted Answer · 2018-01-20 19:44:00Z

0

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.

answered Jan 20, 2018 at 19:44

Mike Tung

4,8411 gold badge19 silver badges25 bronze badges

6 Comments

Arun A Over a year ago

yes i put the child component's selector in the parent component's template, but unable to access parent comp method without import.even both comp in same module.ts

Mike Tung Over a year ago

why do you need to access parent's method?

Arun A Over a year ago

for ex : I have a customer gridlist in parent page, have to add new customer in model by using child component.. once successful response , have to refresh the list in parent component and also show the alert message which is existing in parent component... etc function have to trigger..

Mike Tung Over a year ago

you can just pass data down from parent to child and pass data back up from child to parent?

Arun A Over a year ago

ok.. without import i am not getting parent method in child component. can i get some sample links plz..

|

Franklin Pious · Accepted Answer · 2018-01-20 20:31:53Z

0

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.

answered Jan 20, 2018 at 20:31

Franklin Pious

3,9183 gold badges29 silver badges31 bronze badges

1 Comment

Arun A Over a year ago

in my case, once functionality done in child component, have to call parent comp method, unable to call without import parent in child, which the code replicates above.

Collectives™ on Stack Overflow

Angular 4 - Circular dependency detected

3 Answers 3

Comments

6 Comments

1 Comment

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

3 Answers 3

Comments

6 Comments

1 Comment

Your Answer

Sign up or log in

Post as a guest

Related