# How to Initialize Action bar item component

**URL:** <https://community.cumulocity.com/t/how-to-initialize-action-bar-item-component/1310>\
**Category:** Forum\
**Tags:** cumulocity\
**Created:** [September 26, 2023, 1:53pm UTC](https://community.cumulocity.com/t/how-to-initialize-action-bar-item-component/1310 "2023-09-26T13:53:05Z")\
**Posts on this page:** 7\
**Page:** 1

<div class="post-metadata">

**Author:** ![AshwinV](https://avatars.discourse-cdn.com/v4/letter/a/f08c70/32.png) [@AshwinV](https://community.cumulocity.com/u/AshwinV)\
**Post date:** [September 26, 2023, 1:53pm UTC](https://community.cumulocity.com/t/how-to-initialize-action-bar-item-component/1310/1 "2023-09-26T13:53:06Z")

</div>

Hello,

```
 I am adding an one status in my action bar. I have define my component in module file into the providers using following code

{
  provide: HOOK_ACTION_BAR,
  useValue: [{ template: ActionbarComponents, priority: 10, placement: 'right', Injector: actionbarService, refreshTrigger: true } as ActionBarItem],
  multi: true,
}

```

Which work for me I can able to show the status on action bar, now the issue I am facing is my action bar component is not initializing if I travel in between pages and because of this I am not able to fetch my Id from route.

Can you please help me to initialize my action bar component on navigation between pages?

---

<div class="post-metadata">

**Author:** ![Tristan\_Bastian](https://dub1.discourse-cdn.com/flex005/user_avatar/community.cumulocity.com/tristan_bastian/32/18259_2.png) [@Tristan\_Bastian](https://community.cumulocity.com/u/Tristan_Bastian)\
**Post date:** [September 26, 2023, 2:12pm UTC](https://community.cumulocity.com/t/how-to-initialize-action-bar-item-component/1310/2 "2023-09-26T14:12:14Z")

</div>

Please provide your code of the `ActionbarComponents` so we can support you in properly implementing it.

---

<div class="post-metadata">

**Author:** ![AshwinV](https://avatars.discourse-cdn.com/v4/letter/a/f08c70/32.png) [@AshwinV](https://community.cumulocity.com/u/AshwinV)\
**Post date:** [September 27, 2023, 4:30am UTC](https://community.cumulocity.com/t/how-to-initialize-action-bar-item-component/1310/3 "2023-09-27T04:30:00Z")

</div>

Hello Tristan,

Thanks for the reply

I have added the below code in my ActionbarComponents html file

```auto
<c8y-action-bar-item placement="right" class="customitem">
 <div>
     <p>{{AVAILABLE}}</p>
 </div>
</c8y-action-bar-item>

```

Now when I am going to other group I want to fetch the id and need to show the status. But my component is not getting initialize not even in constructor and ngOninit.

---

<div class="post-metadata">

**Author:** ![Tristan\_Bastian](https://dub1.discourse-cdn.com/flex005/user_avatar/community.cumulocity.com/tristan_bastian/32/18259_2.png) [@Tristan\_Bastian](https://community.cumulocity.com/u/Tristan_Bastian)\
**Post date:** [September 27, 2023, 7:39am UTC](https://community.cumulocity.com/t/how-to-initialize-action-bar-item-component/1310/4 "2023-09-27T07:39:56Z")

</div>

The HTML is not that much of interest here. Can you provide the typescript file of the `ActionbarComponents`?  
You probably missed to subscribe on changes of that id and just take the initial value.

The way you’ve added your `ActionbarComponents` it will also always have this entry in the action bar on every page of your app, is that your intention?

---

<div class="post-metadata">

**Author:** ![Bishan\_T\_Prasad](https://avatars.discourse-cdn.com/v4/letter/b/3ab097/32.png) [@Bishan\_T\_Prasad](https://community.cumulocity.com/u/Bishan_T_Prasad)\
**Post date:** [September 27, 2023, 9:15am UTC](https://community.cumulocity.com/t/how-to-initialize-action-bar-item-component/1310/5 "2023-09-27T09:15:29Z")

</div>

Hi Ashwin,

you can subscribe to router events:

```auto
constructor(public router: Router) {
    
    this.router.events.subscribe(async (val) => {
        if (val instanceof NavigationEnd) {
            let url: string = val.url;
            // get the device ID from the url and do what you want
         }
    });

```

Thanks  
Bishan

---

<div class="post-metadata">

**Author:** ![AshwinV](https://avatars.discourse-cdn.com/v4/letter/a/f08c70/32.png) [@AshwinV](https://community.cumulocity.com/u/AshwinV)\
**Post date:** [September 28, 2023, 6:18am UTC](https://community.cumulocity.com/t/how-to-initialize-action-bar-item-component/1310/6 "2023-09-28T06:18:19Z")

</div>

Thank you so much Bishan, It did worked for me!

---

<div class="post-metadata">

**Author:** ![system](https://dub1.discourse-cdn.com/flex005/user_avatar/community.cumulocity.com/system/32/31990_2.png) [@system](https://community.cumulocity.com/u/system)\
**Post date:** [March 26, 2024, 6:18am UTC](https://community.cumulocity.com/t/how-to-initialize-action-bar-item-component/1310/7 "2024-03-26T06:18:27Z")

</div>

This topic was automatically closed 180 days after the last reply. New replies are no longer allowed.