angular 8 how to get and set values and access the value from any page?

Question

hello i am using angular 8 and i would like to know how can i access the set value in any page ?

my code

class.ts

export class testClass {

        get test():string{
            return this.sexe;
        }
        set test(val:string){
            this.sexe = val;
        }

    }

in clild.ts

import { testClass } from '../class';
export class Child{
constructor (private test:testClass){}

test (){
this.test.test = "hello";
}

in parent.js

import { testClass } from '../class';
export class Parent{
    constructor (private test:testClass){}

    test (){
    console.log(test.test);
    }
}

in app.module.ts

import { testClass } from '../class';
 providers: [testClass],

what am i doing wrang to get "test undifined" in parent.js

Why are you using a js file? There are some ways to pass data between components, maybe you can use a service. — bjdose, Mar 12 '20 at 17:19
console.log(THIS.test.test) ? I think you could find it yourself... And you have a problem in your parent and child components, you have 2 property with the same name 'test' as function, and' test' as injection. — Soukyone, Mar 12 '20 at 17:28
Does this answer your question? [How to share data between components using a service properly?](https://stackoverflow.com/questions/40468172/how-to-share-data-between-components-using-a-service-properly) — Learning2Code, Mar 12 '20 at 22:13

score 0 · Answer 1 · answered Mar 12 '20 at 18:03

You have to use a service.

The services are initialized when the app starts, and remain so until it stops. Passing a value through a service allows you to access it anywhere you call the service.

So if you had the following:

@Injectable()
export class ExampleService {
    public varIWant: string = 'I wan't to use this anywhere.'
}

You can access it in your components, by doing:

import { ExampleService } from '../my/path/to/service'
export class Parent {
    constructor(private exampleService: ExampleService) { }

    public setVarAsLocal: string = this.exampleService.varIWant;

    public changeServiceVariable() {
        this.setVarAsLocal = 'New Value For String';
        this.exampleService.varIWant = this.setVarAsLocal;
    }
}

And that's it. As long as the instance is running the value will hold;

Munerz · Accepted Answer · 2020-03-12T22:08:33.180

Not to sure what you mean by setting and getting the value in any page? I'm assuming you mean component?

If so I'd use a service like so

@Injectable({
  providedIn: 'root'
})
export class ExampleService{

  private _value: any;
  private _valueObs$ = new BehaviorSubject(null);

  set setValue(newValue: any): void{
    this._value = newValue;
  }

  get getNewValue(): any{
    return this._value;
  }

  set setObservableValue(newValue: any): void{
    this._valueObs$.next(newValue)
  }

  get getNewObservableValue(): any{
    return this._valueObs$;
  }
}

There are two approaches in the above method, the first is a pretty standard set and get, the second is utilising something known as a Subject, I'll touch on the difference in the next section.

To then use this service in any component

@Component({
  selector: 'example',
})
export class ExampleComponent implements OnInit {

  newValue: any;

  constructor(private readonly exampleService: ExampleService
  ) { }

  ngOnInit(): void {
    this.getObservableExampleValue();
  }

  getExampleServiceValue(): any {
    this.exampleService.getNewValue;
  }

  setExampleServiceNewValue(value: any): void {
    this.exampleService.setNewValue = value;
  }

  getObservableExampleValue() {
    this.exampleService.getNewObservableValue.subscribe((newObsValue) => {
      this.newValue = newObsValue
    })
  }

  setObservableExampleValue(value: any): void{
    this.exampleService.setObservableValue(value);
  }

  ngOnDestroy(){
    this.exampleService.getNewObservableValue.unsubscribe();
  }

}

So I wont go into detail on the standard setValue & getNewValue, you can invoke them how you see fit.

Now the second approach is great if you want several components to be aware of a particular value at one time, so lets say we set the _valueObs$ with the setObservableValue method, and we have used this service in 5 different components, all 5 of those components will receive that value, very handy right?

Now you'll notice it's important that we actually invoke the getNewObservableValue so we can open the stream, normally you'd do this on the ngOnInit so the components template/code can have access to the value, assuming your looking to use the value straight away, otherwise you can invoke it at a later date, the way subscribing/observable's work is a bit like a tap.

Imagine you have a tap, and you turn it on - Known as subscribing

this.exampleService.getNewObservableValue.subscribe((newObsValue) => {
          this.newValue = newObsValue
        })

Well the tap is turned on and now emits a stream of water or again in this case a stream of data, so every time you set a new value, the new piece of data will come through that stream and will automatically update the this.newValue within your component.

But it's also important to turn the tap off! We don't want to be wasting water when we are done using it, this is when we unsubscribe when the component is no longer being used so

ngOnDestroy(){
    this.exampleService.getNewObservableValue.unsubscribe();
  }

This is to prevent what is known as a memory leak, which is beyond the scope of this answer, know to learn more about Rxjs I'd read some documentation - https://www.learnrxjs.io/ or watch some youtube videos there are plenty of tutorials out there!

Hopefully I've explained comprehensively enough if not feel free to comment.

angular 8 how to get and set values and access the value from any page?

2 Answers2