CODEWITHSUNDEEP
angularcomponents
Ayane
Ayane

Reputation: 473

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

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?

Upvotes: 21

Views: 119895

Answers (4)

A7x
A7x

Reputation: 543

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".

Upvotes: 2

Akif
Akif

Reputation: 49

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

Upvotes: 2

yala ramesh
yala ramesh

Reputation: 3362

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

Upvotes: 16

Muhammad Awais
Muhammad Awais

Reputation: 332

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:

Upvotes: 28

Related Questions