Can't inject component into component via constructor?

Question

I am trying to call private login: LoginComponent, however, my website wont load when I add private login: LoginComponent. My website load and runs fine before I add Login to the Constructor. What am I doing wrong? Can I not call private login: LoginComponent? I have attached class LoginComponent below.

import { Component, OnInit, ViewChild } from '@angular/core'
import { Router } from '@angular/router'
import * as Rx from "rxjs"
import { environment } from "../../../environments/environment"
import {LoginComponent} from "app/components/login/login.component"
import { AuthService } from "../../services/auth/auth.service"
import { LoginService } from "../../services/login/login.service"
import { SageApiService } from "../../services/sage-api/sage-api.service"
import { DataModel } from "../../model/data-model"
// wvj contract

@Component({
    selector: 'app-contract-form',
    templateUrl: './contract-form.component.html',
    styleUrls: ['./contract-form.component.css']
})
export class ContractFormComponent implements OnInit {

    @ViewChild('staticModal') staticModal;

    dataModel: DataModel = new DataModel()

    constructor(
        private router: Router,
        private authService: AuthService,
        private loginService: LoginService,
        private sageApi: SageApiService,
        private login: LoginComponent
    ) { }
}

I am trying to call this class:

import { Component, OnInit } from '@angular/core';
import {Router} from "@angular/router";
import { LoginService } from "../../services/login/login.service";
import { AuthService } from "../../services/auth/auth.service"

@Component({
  selector: 'app-login',
  templateUrl: './login.component.html',
  styleUrls: ['./login.component.css']
})
export class LoginComponent implements OnInit {

    error: string = "";
    username: string = "";
    password: string = "";
    isLoading: boolean = false;
    constructor(
        private loginService: LoginService,
        private authService: AuthService,
        private router: Router
    ) { }
}

Define "blow up". Precisely. Post the code that "blows up". A class can't be called. Only functions/methods/constructors can be. — JB Nizet
– JB Nizet, Commented Mar 3, 2018 at 18:52
My website won't load. It loads perfectly fine before I add LoginComponent. I am trying to return a value on LoginComponent to ContractFormComponent — CC41325
– CC41325, Commented Mar 3, 2018 at 18:55
Why are you trying to inject a component via the constructor? — user184994
– user184994, Commented Mar 3, 2018 at 19:02
@CC41325 In that case, either do so via service, or do so using an EventEmitter — user184994
– user184994, Commented Mar 3, 2018 at 19:09

Arjun Panicker · Accepted Answer · 2018-03-03 19:29:22Z

5

Any data passing between components can take place by 2 methods:

Create a service and inject that service in both components. The data to be shared between the components is done via the service.
Create a Subject in one component and subscribe to it in the other component.

One component cannot be injected via constructor into another component.

answered Mar 3, 2018 at 19:29

Arjun Panicker

7501 gold badge8 silver badges23 bronze badges

Sign up to request clarification or add additional context in comments.

1 Comment

Mehmet K Over a year ago

You can actually inject components which are in the same view hierarchy: angular.io/guide/dependency-injection-navtree

Rezwan · Accepted Answer · 2021-03-25 18:47:36Z

1

You can call any function or variable of another component using dependency injection. Here is an example.

import { LoginComponent } from "app/components/login/login.component"

export class ContractFormComponent implements OnInit {

  loginComponent: LoginComponent

  constructor( private _login: LoginComponent ) {
    this.loginComponent = _login;
  }

  callAnythingFromLoginComponent() {
    this.loginComponent.anyFunctionFromLoginComponent();
  }
}

answered Mar 25, 2021 at 18:47

Rezwan

418 bronze badges

Collectives™ on Stack Overflow

Can't inject component into component via constructor?

2 Answers 2

1 Comment

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

1 Comment

Comments

Your Answer

Sign up or log in

Post as a guest

Related