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?

Question:
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.


Answer:
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’;

@Injectable()
export class DataSharingService
{
public OnCarouselShowHide = new EventEmitter();
public carouselShowHide (isHidden: boolean): void {
this.OnCarouselShowHide.next(isHidden);
}
}

.. 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 *