CODEWITHSUNDEEP
angulartypescriptconstructor
CC41325
CC41325

Reputation: 53

Can't inject component into component via constructor?

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

Upvotes: 0

Views: 7737

Answers (2)

Rezwan
Rezwan

Reputation: 41

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

Upvotes: 1

Arjun Panicker
Arjun Panicker

Reputation: 740

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

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

One component cannot be injected via constructor into another component.

Upvotes: 5

Related Questions