Using variable in another Angular component without Input() method

Question

I need to use in another component "onlineBookingDisabledMessage", but I don't want to use Input() method. How could I make that component aware of "onlineBookingDisabledMessage"?

I want to display the message stored in that variable and in another component.

Thank you.

import { Store } from '@ngrx/store';
import { Component, OnInit, Input } from '@angular/core';
import * as fromRoot from './../../../ngrx';
import { BookingActions } from '../../actions/booking.actions';
import { ActivatedRoute } from '@angular/router';
import { AuthHelperService, StartupService } from '../../../core/services';
import { Location } from '@angular/common';


@Component({
  selector: 'pp-previus-visit-step-page',
  templateUrl: 'previus-visit-step-page.component.html',
  styleUrls: ['previus-visit-step-page.component.scss'],
})
export class PreviusVisitStepPageComponent implements OnInit {
  isExistingPatient;
  useOnlineBooking = true;
  loginEnabled = false;

  onlineBookingDisabledMessage;
  redirectLoginUrl;

  constructor(
    private store: Store<fromRoot.State>,
    private route: ActivatedRoute,
    private startupService: StartupService,
    private location: Location,
    private navigateService: NavigateWrapperService,
    public authHelperService: AuthHelperService
  ) {
    this.store.dispatch(new BookingActions.SetQueryParamLocationAction(this.route.snapshot.params['locationGuid']));

    this.useOnlineBooking = startupService.startupData.useOnlineBooking;
    this.loginEnabled = this.startupService.startupData.usePatientPortal;

    this.onlineBookingDisabledMessage = startupService.startupData.onlineBookingDisabledMessage;

    this.navigateService.pushRoute('booking/previous-visit', false);
  }

  ngOnInit() {
    this.redirectLoginUrl = 'appointments';
  }

}

You have different methods in official docs: angular.io/guide/component-interaction — Eneko
– Eneko, Commented Jul 28, 2022 at 15:41

Furkan Sarısoy · Accepted Answer · 2022-07-28 15:27:55Z

1

You can use state

this.store.dispatch(UpdateOnlineBookingDisabledMessage({message: 'Your Message'}));

In your component:

this.store.select(state => state.foo.onlineBookingDisabledMessage).subscribe(message => {
this.onlineBookingDisabledMessage = message;
});

answered Jul 28, 2022 at 15:27

Furkan Sarısoy

133 bronze badges

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

Comments

Ale_Bianco · Accepted Answer · 2022-07-28 15:27:19Z

You can use a service with a BehaviourSubject

export class DataService {
  private dataSource: BehaviorSubject<string> = new BehaviorSubject<string>('Initial Value');
  data: Observable<string> = this.dataSource.asObservable();
 
  constructor() { }
 
  sendData(data: string) {
    this.dataSource.next(data);
  }
}

Receiver component:

export class ReceiverComponent implements OnInit {
 
  constructor(private dataService: DataService) { }
 
  ngOnInit(): void {
    this.getData();
  }
 
  getData() {
    this.dataService.data.subscribe(response => {
      console.log(response);  // you will receive the data from sender component here.
    });
  }
}

Or you can sharing data between components using EventEmitter

Collectives™ on Stack Overflow

Using variable in another Angular component without Input() method

2 Answers 2

Comments

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Related