Question: Hy guys, in my angular project after i login, my back end API will generate JWT token and pass to front end. So after that i will decode the JWT token and get some details from that token. So that procedure is done in the login.component.ts So i want to pass that decode data to my top-bar component. The problem is that the top.bar component has already been loaded in application. Can you help me. 

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() { }

```

Answer: 
Can be done in this way:

Create shared service with `loginSubject`:

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

    ...
}

```

Emit message in `Login.component.ts`:

```
constructor(
  private stateService: StateService
) {}

onSubmit(form: NgForm) {

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

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

}

```

Subscribe to `loginSubject` in `Top-Bar.component.ts`:

```
constructor(
  private stateService: StateService
) {}

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

  ...
}

```
```
Few of the many ways in Angular Component's Interaction,

1) If Top-Bar.component.html has to be displayed as part of login html then,
   You can pass in the value to Top-Bar.component.ts using @Input variable
   Please read through https://angular.io/guide/component-interaction

2) If Top-Bar.component is all together independent of login module, you can have service 
   created and assign the variable to the service and use it for component interaction. 
   Please read through https://angular.io/tutorial/toh-pt4

```