how to get variable from one ts file into all other ts files in angular

Question

I have a variable called name in home.component.ts file, I want to use this variable globally in all the files how can I do that.

here is my code:

app.component.html

 <nav aria-label="breadcrumb">
   <ol class="breadcrumb">
     <li class="breadcrumb-item"><a>{{ bd_main }}</a></li>
   </ol>
</nav>

home.component.ts

  export class HomeComponent implements OnInit {
  bd_main= "Home";
  }

if we see here I am passing the bd_main value dynamically from home.components.ts which is one folder but I want to update that in app.component.html which is in another folder.

how can I do that?

Answer 1

here the subject-behaviour comes with the subject-behaviour you can get and use the value of the declared variable across the whole app. here below link is a little example of subject-behaviour hope you get some from the there. thank you.

behaviorsubject

Answer 2

Create a service that will be provided in root or app module. Within this you can have the variables that you want to share between multiple components.