How to use a variable from a component in another in Angular2

Question

I was wondering if it is possible to use variable values from one component into another one without having to use the template of the first one, just need the value of the variable nothing else. Is it possible?

https://angular.io/docs/ts/latest/cookbook/component-communication.html — silentsod, Feb 07 '17 at 18:42
You can write a get method for value in one component use it in another component — yala ramesh, Feb 07 '17 at 18:44
Isn't it using the child component html template in the master component in this example? As I said I just need a variable value. — Ayane, Feb 07 '17 at 18:45
@yala ramesh I think that's exactly what i need could you post a small example of how you get the value? — Ayane, Feb 07 '17 at 18:48

score 27 · Answer 1 · edited Aug 04 '18 at 23:12

27

Go to your app.module.ts and make the provider of that component you want to inherit with other classes:

Then go to the class you want access of that variable, and import the component into that:

Make the constructor of it:

And happily get access to the variables:

edited Aug 04 '18 at 23:12

Generic Bot

309
1
4
8

answered Aug 04 '18 at 12:15

Muhammad Awais

323
3
8

Hi, what if this apiEndPoint is not set to a certain value and is changed instead to something via a database? – mhisham Apr 29 '20 at 22:33
1

https://meta.stackoverflow.com/q/285551/5468463 – Vega Jul 30 '22 at 20:43
too bad I can't do the happy part ... – Shaved Man Oct 15 '22 at 09:33

yala ramesh · Accepted Answer · 2018-08-06T05:55:56.723

16

Yes possible, you can use the @Input() method or use write get method like below

export class Demo {
    const sum = 10;

    get SumValue() {
        return this.sum;
    }
}

import-->Demo

export class Demo2 {
   private sum: number;
   this.sum = Demo.SumValue();
}

edited Aug 06 '18 at 05:55

answered Feb 07 '17 at 18:51

yala ramesh

3,362
1
22
35

Just one more thing, this works well when the variable in component 1( Demo in this case) is already defined, in this case you are defining it to be '10' when you declare it, but what if it is not defined and you have to do something first in Demo to define it. Because in this case when u call it from Demo2 it is considered undefined. – Ayane Feb 07 '17 at 19:53
What should I do if I don't know the name of a class with nessesary variable? It could be Demo, Demo3, Demo4. For example, if I have three components which make different tables, and I want to make unique component which render pagination numbers. And this pagination block will know nothing about tables. – Radren Jan 16 '18 at 08:47
@Radren Did you find a solution for this? – mhisham Apr 29 '20 at 22:32
@mhisham, sorry, already don't remember, it was a while ago :) – Radren Apr 30 '20 at 20:47
How can you just do Demo.SumValue(); this when function SumValue() is not even static? – Biswas Khayargoli Jul 19 '20 at 09:02

score 2 · Answer 3 · answered Jun 02 '20 at 15:21

I was developing a thing and I faced the same challenge. My approach.

I had two different components and a service.

loginComponent, headerCompnent and a loginauth service.

    validateUser(name,pass){

   this.loginStatus = this.loginauth.validateUser(name,pass);

   if(this.loginStatus) this.route.navigate(['/welcome']);
   else this.route.navigate(['/login']);

  }

image from LoginComponent

I wanted to use "loginStatus" in headerComponent.

this.loginauth.validateUser(name,pass); loginauth was the service and validateUser(...) method inside it.

So I created a static variable inside the service and inject that service into both components and by injecting the same service in headerComponent I was able to retrieve the value of that static variable.

In service, create and initialize it as per your requirement.

static loginFlag = false;

loginAuth service img

In header component.

Import that service and access that static variable with class name.

 LoginAuthService.loginFlag

headerComponent img

score 2 · Answer 4 · answered Sep 29 '21 at 15:21

You can use constructor.

E.g. I want to use "message" variable of parent component in a child component.

export class ParentComponent {

  message: string;

  constructor(){
    this.message = "Hello"
  }
}

below child component you should import the class belongs to parent component. And call it in the child component.

import { ParentComponent } from 'src/app/app.parentcomponent';

export class ChildComponent implements OnInit {

  message2 = new ParentComponent;

  message3 = this.message2.message;

  constructor() { }

  ngOnInit(): void {
  }

}

At the end message3 equals to "Hello".

How to use a variable from a component in another in Angular2

4 Answers4

Linked