-1

This is a project built in Angular 6. I've got two classes, one and two. I want to use a variable in both classes. I've imported the class, but I'm not sure how to access the variable.

How do I use use "num:number = 2018" from one.component in two.component?

one.component.ts:

import { Component, OnInit } from '@angular/core';

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

  num:number = 2018;

  constructor() { }

  ngOnInit() { }

  getNum() : number{
    return this.num;
  }

}

two.component.ts:

import { Component, OnInit } from '@angular/core';
import { OneComponent } from '../one/one.component';

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

  constructor() { }

  ngOnInit() {  }

}
Brandon Finley
  • 107
  • 1
  • 7
  • Something to start with: https://angular.io/guide/component-interaction – R. Richards Aug 31 '18 at 21:57
  • This is good, but importing HEROES from './hero' makes a private variable, and therefore won't be able to synced between two classes. @R.Richards – Brandon Finley Aug 31 '18 at 22:04
  • If I were you I'd look into using redux-type architecture for keepings things in sync. If you keep connecting stuff from 1 component to another using things like input/output/viewchild/parenting you'll soon find yourself having some hard to read and maintain code. Try this tutorial to get a quick grip on what redux is: https://www.youtube.com/watch?v=UEcdQR-NoNA – SebastianG Aug 31 '18 at 22:11
  • I guess I should have been more specific in my link. Look at [this](https://angular.io/guide/component-interaction#parent-and-children-communicate-via-a-service). Communication between components with a service may be what you need. – R. Richards Aug 31 '18 at 22:21
  • 1
    Are you trying to use `num` as a constant value, or will it have different values during execution of your application? If it is a constant value then just declare it as `static readonly`, and you can access it from anywhere in your application. – Andy King Sep 01 '18 at 07:31
  • It'll have changing values @AndyKing – Brandon Finley Sep 01 '18 at 18:37

1 Answers1

0

In Angular you only have one root component. It means that all the other components are children of the same component, and picking 2 randoms components from your project they always have a common parent.

You can define the variable in the common parent, then give it as input to one and two.

Let's suppose that both, one.component and two.component are children of app.component. Then you have, in the app.component template:

<app-one [num]="number"></app-one>
<app-two [num]="number"></app-two>

and you need to define the variable in the app.component class (where else? Logically, there's no a reason why the variable should be in one rather than two)

What if one or two change the variable? Well, it depends..

If number is a string, a number or a boolean, it will be copied and app-one and app-two will work with their own local copy.

So you have three solution:

  • Wrap your variable in an object. You'll pass the reference of any object as input. If the value of an object changes, the change detection mechanism will update all the tree

  • Use @Output() to update the variable. Probably the variable will change as reaction to an event. When this event happens, also fire an EventEmitter.

  • Use redux

Christian Vincenzo Traina
  • 9,546
  • 2
  • 40
  • 63