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.


Comments

Popular posts from this blog

python Tkinter Capturing keyboard events save as one single string -

android - InAppBilling registering BroadcastReceiver in AndroidManifest -

javascript - Z-index in d3.js -