0

In my topheader.html I have:

 <responsive-mode></responsive-mode>

And in my responsivenavigation.html I also have:

 <responsive-mode></responsive-mode>

The component:

class ResponsiveModeComponent {
    public onlyShowOnSurfaceTablet: boolean;
    public currentMode: string;

    $onInit() {
        this.onlyShowOnSurfaceTablet = window.device.surface();
        if (window.device.surface()) {
            this.currentMode = 'desktop_windows';
        } else {
            this.currentMode = 'tablet_android';
        }
    }

    switchMode() {
        if (this.currentMode === 'desktop_windows') {
            this.currentMode = 'tablet_android';
            window.document.documentElement.className = window.document.documentElement.className.replace('tablet', 'desktop');
        } else {
            this.currentMode = 'desktop_windows';
            window.document.documentElement.className = window.document.documentElement.className.replace('desktop', 'tablet');
        }
    }
}

And the html:

<div class="responsive-mode" >
    <i class="material-icons" ng-click="vm.switchMode()">
        {{vm.currentMode}}
    </i>
</div>

I want the user to be able to switch between modes if needed. This kinda works. But there seem to be 2 instances of the component in the application. Is it possible to pass the value set in 1 instance of the component to the other instance of the component? Or better make the 2 components share 1 instance of the component?

Peter Boomsma
  • 8,851
  • 16
  • 93
  • 185
  • 1
    I think you can't make 2 components share one instance but to pass the value, you can use a service, exemple: https://stackoverflow.com/questions/21919962/share-data-between-angularjs-controllers – Groben Feb 26 '19 at 15:57
  • 1
    and a fiddle: http://jsfiddle.net/fqc47zux/ – Groben Feb 26 '19 at 16:23
  • Agreed. A service is the ideal model anytime you want 2 or more components to share the same data. – Pop-A-Stash Feb 26 '19 at 16:38

0 Answers0