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?