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

Home / Uncategorized / 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 with bootstrap carausel in the background.

In that there is a separate component for the background and have a in app.html to make it work.

This works perfect for all 4 tabs of my website, but I want to disable this background carausel one one tab out of 4 tabs.

I tried restructuring code where I inserted only in required tabs but it didn’t seem to have worked.

So in a nutshell, is there a way that I can disable the background carausel for only one tab?

Any help is appreciated.

Apologies that I couldn’t paste the code snippet as there are different bits of components and pasting everything would not be good idea.

Yes you can, since you didn’t post any code, my answer will have some assumptions.

In you component, add an ngIf condition and bind it to some variable e.g.

Create a data sharing service for emitting an event:
import { Injectable, EventEmitter } from ‘@angular/core’;

export class DataSharingService
public OnCarouselShowHide = new EventEmitter();
public carouselShowHide (isHidden: boolean): void {;

.. and subscribe to the event in your component in your in ngOnInit:
constructor(private readonly dataSharingService: DataSharingService) { }

ngOnInit() {
this.dataSharingService.OnCarouselShowHide.subscribe(value =>
this.isCarouselHidden= value;

Now, in your navbar component, when you click on the tabs, call the carouselShowHide method to show or hide carousel.

The other possibility is to use @Input & @Output to communicate between components (Documentation Here) as @Arg0n mentioned in the comments. I have not worked with that so cant write an example. I am using the first approach in my project.
Read more

Leave a Reply

Your email address will not be published. Required fields are marked *