Angular5: Passing Variable From One Component to Another Typescript File

Question

I am trying to pass the value I am storing in one of my components to another component so that my new component can use the selected value from my original. Right now I have a file as follows:

symbol-picker.component.ts

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

@Component({
  selector: 'app-symbol-picker',
  templateUrl: './symbol-picker.component.html',
  styleUrls: ['./symbol-picker.component.scss']
})

export class SymbolPickerComponent implements OnInit {

  selectionChoice: string;

  equalsTxt = '=';
  impliesTxt = '=>';

  constructor() { }

  ngOnInit() {
  }

}

Where I am setting the value of 'selectionChoice' in my html as follows:

symbol-picker.component.html

<button (click)="selectionChoice = 'equals'">{{equalsTxt}}</button>
<button (click)="selectionChoice = 'implies'">{{impliesTxt}}</button>

I want to pass the value held in 'selectionChoice' to a new file to use it. For instance I am trying to get the value right now in this file:

symbolPicker.ts

import {SymbolPickerComponent} from '../symbol-picker/symbol-picker.component';

export interface Config {
  container: string;
  selector: 'equals'|'implies'|'followsFrom';
}

export interface QuillInstance {
  on: Function;
  getText: Function;
}

export default class SymbolPicker {
  symbolSelected = SymbolPickerComponent.selectionChoice;
  quill: QuillInstance;
  options: Config;

  constructor(quill, options) {
    this.quill = quill;
    this.options = options;

    const container = document.querySelector(this.options.container);

    switch (this.options.selector) {
      case 'equals': {
        container.addEventListener('click', function() {
          console.log('FRANK: EQUALS PRESSED');
          quill.insertText(quill.getSelection(), '\n=            〈  〉');
        });
        break;
      }
      case 'implies': {
        container.addEventListener('click', function() {
          console.log('FRANK: IMPLIES PRESSED');
          quill.insertText(quill.getSelection(), '\n=>            〈  〉');
        });
        break;
      }
      default: {
        console.log('FRANK: selectionChoice set to non-understood value');
        break;
      }
    }
  }
}

How can I set my newly declared 'symbolSelected' variable in symbolPicker.ts to the value of selectionChoice in symbol-picker.component.ts? I am ultimate trying to do this so in my editor.components.ts file I can reference this value as well for my 'selector' section in symbolPicker as follows:

this.modules = {
      formula: true,
      toolbar: true,
      counter: { container: '#counter', unit: 'word' },
      symbolPicker: { container: '#symbolCounter', selector: this.symbolSelected }
    };

The idea would be that this selector value would dynamically change as I press the buttons to change between 'equals' and 'implies'.

Use for that @Input

POV
– POV

2018-03-03 01:09:53 +00:00
Commented Mar 3, 2018 at 1:09 — POV
– POV, Commented Mar 3, 2018 at 1:09

DeborahK · Accepted Answer · 2018-03-03 01:07:19Z

2

There are many ways to share data between components. For your particular scenario, your best choice is a service. Build a service to retain the value(s) that you want to share.

Then inject the service into any component that needs to set the value or read the value.

I have an example here: https://github.com/DeborahK/MovieHunter-communication/tree/master/MH-Take4

In my case, I share the currently selected movie. Below are some snippets of my code. (See the above URL for the complete code example.)

Movie service:

@Injectable()
export class MovieService {

    currentMovie: IMovie | null;
    // Other code here.
}

Movie List component

In this component, the user selects a movie:

export class MovieListComponent {
    constructor(private movieService: MovieService) { }

    onSelected(movie: IMovie): void {
        this.movieService.currentMovie = movie;
    }
    // Other code here
}

Movie Detail component

In this component, the bindings change automatically when the user selects a different movie in the Movie List component.

The UI is bound to the movie property defined in the component below.

export class MovieDetailComponent {

    get movie(): IMovie | null {
        return this.movieService.currentMovie;
    }

    constructor(private movieService: MovieService) {}
}

Angular's change detection tracks when the currentMovie changes in the service and rebinds the values, calling the getter shown above, and getting the current value of the currentMovie.

edited Mar 3, 2018 at 1:07

answered Mar 3, 2018 at 1:00

DeborahK

60.9k12 gold badges115 silver badges136 bronze badges

Sign up to request clarification or add additional context in comments.

1 Comment

FrankTheTank Over a year ago

Thanks for the response I wasn't sure what the best way to tackle the problem was but a service makes sense

Collectives™ on Stack Overflow

Angular5: Passing Variable From One Component to Another Typescript File

1 Answer 1

1 Comment

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

1 Comment

Your Answer

Sign up or log in

Post as a guest

Related