@angular/core

forwardRef

function

Allows to refer to references which are not yet defined.

  
    function forwardRef(  forwardRefFn: ForwardRefFn): Type<any>;

Allows to refer to references which are not yet defined.

For instance, forwardRef is used when the token which we need to refer to for the purposes of DI is declared, but not yet defined. It is also used when the token which we use when creating a query is not yet defined.

forwardRef is also used to break circularities in standalone components imports.

Circular dependency example

Circular standalone reference import example

          @Component({  standalone: true,  imports: [ChildComponent],  selector: 'app-parent',  template: `<app-child [hideParent]="hideParent"></app-child>`,})export class ParentComponent {  @Input() hideParent: boolean;}@Component({  standalone: true,  imports: [CommonModule, forwardRef(() => ParentComponent)],  selector: 'app-child',  template: `<app-parent *ngIf="!hideParent"></app-parent>`,})export class ChildComponent {  @Input() hideParent: boolean;}

forwardRef

Type<any>

Allows to refer to references which are not yet defined.

For instance, forwardRef is used when the token which we need to refer to for the purposes of DI is declared, but not yet defined. It is also used when the token which we use when creating a query is not yet defined.

forwardRef is also used to break circularities in standalone components imports.

@paramforwardRefFnForwardRefFn

@returnsType<any>

Usage notes

Circular dependency example

Circular standalone reference import example

          @Component({  standalone: true,  imports: [ChildComponent],  selector: 'app-parent',  template: `<app-child [hideParent]="hideParent"></app-child>`,})export class ParentComponent {  @Input() hideParent: boolean;}@Component({  standalone: true,  imports: [CommonModule, forwardRef(() => ParentComponent)],  selector: 'app-child',  template: `<app-parent *ngIf="!hideParent"></app-parent>`,})export class ChildComponent {  @Input() hideParent: boolean;}