Tips for sharing data between components that have been previously loaded in Angular 7

Question

Tips for sharing data between components that have been previously loaded in Angular 7

Hey everyone, I am currently working on an Angular project where upon login, the back end API generates a JWT token that is then passed to the front end. After getting the JWT token, I decode it to extract some details in the login.component.ts file. Now, I want to pass this decoded data to my top-bar component. The challenge here is that the top-bar component has already been loaded in the application. Can anyone guide me on how to achieve this?

Using Angular 7 CLI

Login.component.ts


onSubmit(form:NgForm){

  //some code here for login authentication----------------

  const helper = new JwtHelperService();
  const decoded= helper.decodeToken(result.token);
  console.log(decoded);

}

Top-Bar.component.ts

ngOnInit() { }

angular typescript

Answer 1

Answer №1

You can achieve this by following these steps:

First, create a shared service with the name loginSubject:

@Injectable()
export class StateService {
    loginSubject: Subject<any> = new Subject();

    ...
}

Next, emit a message in the Login.component.ts:

constructor(
  private stateService: StateService
) {}

onSubmit(form: NgForm) {

  // Code for login authentication goes here

  const helper = new JwtHelperService();
  const decoded= helper.decodeToken(result.token);
  this.stateService.loginSubject.next(decoded);
  console.log(decoded);

}

Finally, subscribe to the loginSubject in Top-Bar.component.ts:

constructor(
  private stateService: StateService
) {}

ngOnInit() {
  this.stateService.loginSubject.subscribe(data => {
    // Do something with the decoded data
  });

  ...
}

Answer 2

You can achieve this by following these steps:

First, create a shared service with the name loginSubject:

@Injectable()
export class StateService {
    loginSubject: Subject<any> = new Subject();

    ...
}

Next, emit a message in the Login.component.ts:

constructor(
  private stateService: StateService
) {}

onSubmit(form: NgForm) {

  // Code for login authentication goes here

  const helper = new JwtHelperService();
  const decoded= helper.decodeToken(result.token);
  this.stateService.loginSubject.next(decoded);
  console.log(decoded);

}

Finally, subscribe to the loginSubject in Top-Bar.component.ts:

constructor(
  private stateService: StateService
) {}

ngOnInit() {
  this.stateService.loginSubject.subscribe(data => {
    // Do something with the decoded data
  });

  ...
}

Answer 3

Answer №2

When it comes to interacting with Angular Components, there are several approaches you can take:

1) If you need to display Top-Bar.component.html within the login html, you can pass in the value to Top-Bar.component.ts using an @Input variable. For more information, refer to the official Angular documentation on component interaction: https://angular.io/guide/component-interaction

2) If Top-Bar.component is completely independent of the login module, you can create a service and assign the variable to the service for component interaction. Refer to the following tutorial for more details: https://angular.io/tutorial/toh-pt4

Answer 4

When it comes to interacting with Angular Components, there are several approaches you can take:

1) If you need to display Top-Bar.component.html within the login html, you can pass in the value to Top-Bar.component.ts using an @Input variable. For more information, refer to the official Angular documentation on component interaction: https://angular.io/guide/component-interaction

2) If Top-Bar.component is completely independent of the login module, you can create a service and assign the variable to the service for component interaction. Refer to the following tutorial for more details: https://angular.io/tutorial/toh-pt4

Tips for sharing data between components that have been previously loaded in Angular 7

Login.component.ts

Top-Bar.component.ts

Answer №1

Answer №2

Similar questions

What is the best way to implement a hover effect on multiple rows within an HTML table using Angular?

Exploring the best way to access ViewContainerRef: ViewChild vs Directive

Exploring the Pristine State of Nested Controls in Angular Reactive Forms

How to ensure Service is loaded before App Component in Angular 6?

What's the reason behind receiving these warnings?

Establish a set height for ngx-datatable component in Angular version 4

Adding a new data source to Mapbox

Issue TS2322: Type 'Observable<string[]>' is not compatible with type 'Observable<Sensors[]>'

Discover the perfect way to implement true lazyloading using NativeScript Angular tabs and BottomNavigation

Creating a type definition for an object literal constant with intricate property types

Authentication and account system with .NET Core Backend and Angular2 Frontend for seamless user login and security measures

identifiers that have been duplicated errors

Angular TimeTracker for tracking time spent on tasks

Troubleshooting Error in Angular2 ngFor: "Encountered issue with reading property '0' of undefined"

What is the best way to fill the dropdown options in every row of a data table?

Is having only one FCM token sufficient for storing data from multiple devices?

Eliminate a descendant of a juvenile by using the identification of that specific juvenile

Is it feasible to utilize GraphQL subscriptions with Azure Functions?

Oops! Looks like there was an error trying to assign the value "$event" to the template variable "element". Remember, template variables can only be read

Using JavaScript to assign function arguments based on arbitrary object values