Can I disable bootstrap carausel which is in background for one of the 4 tabs in angular project? -

i've single page tab based angular website bootstrap carausel in background.

in there separate component background , have <app-background></app-background> in app.html make work.

this works perfect 4 tabs of website, want disable background carausel 1 one tab out of 4 tabs.

i tried restructuring code inserted <app-background></app-background> in required tabs didn't seem have worked.

so in nutshell, there way can disable background carausel 1 tab?

any appreciated.

apologies couldn't paste code snippet there different bits of components , pasting not idea.

yes can, since didn't post code, answer have assumptions.

in <app-background> component, add ngif condition , bind variable e.g.

<div id="mycarousel" class="carousel slide" data-ride="carousel" *ngif="iscarouselhidden"> 

create data sharing service emitting event:

import { injectable, eventemitter } '@angular/core';  @injectable() export class datasharingservice {      public oncarouselshowhide = new eventemitter<boolean>();     public carouselshowhide (ishidden: boolean): void {         this.oncarouselshowhide.next(ishidden);     } } 

.. , subscribe event in <app-background> component in in ngoninit:

constructor(private readonly datasharingservice: datasharingservice) { }  ngoninit() {     this.datasharingservice.oncarouselshowhide.subscribe(value =>         {             this.iscarouselhidden= value;         }); } 

now, in navbar component, when click on tabs, call carouselshowhide method show or hide carousel.

---

the other possibility use @input & @output communicate between components (documentation here) @arg0n mentioned in comments. have not worked cant write example. using first approach in project.