angular 2 (click)= not working on selectors outside of its component

Question

I have a simple component that should control the display classes on my datatables. The only way I can get it to work is have the datatable load inside the actual component. The buttons don't work on datatables in other components. I am importing the class and putting in the directive but it's still not seeming to work outside it own nested scope.

import {Component} from 'angular2/core';
import {NgClass} from 'angular2/common';
import {DataTable} from '../../components/datatable/datatable';
import {TestDatatable} from "../../views/grids/testDatatable";
@Component({
    selector: 'show-parent',
    inputs: ['isDisabled'],
    directives: [NgClass, TestDatatable],
    template: `
        <i class="fa fa-sitemap" (click)="toggleOpen($event)"></i>
        <i class="fa fa-th-large" (click)="toggleSplitScreen($event)"></i>


 //The buttons work on this datatable below but if I move 
 //  this selector somewhere else it no longer works

        <myDatatable [ngClass]="{'panel-open': isOpen, 'panel-split':
        isSplit}" class="parent-grid"></myDatable>   
     `
})
export class ShowParent {
    isOpen = false;
    isSplit = false;

    toggleOpen(event) {
        event.preventDefault();
        this.isOpen = !this.isOpen;
    }

    toggleSplitScreen(event) {
        event.preventDefault();
        this.isSplit = !this.isSplit;
    }
}

score 0 · Answer 1 · answered Mar 17 '16 at 22:39

It's not working because other components can't see the isOpen and isSplit properties.

Basically you just need to access isOpen and isSplit in another component.

The easiest way is to create a shared service and then have isOpen and isSplit be properties of that service. Import the service wherever you need it and access the properties.

There are other options if only a parent component needs access. You can use the ViewChild decorator. You can also create an event the parent can listen to, and then use that to set it's own isOpen and isSplit properties.

score 0 · Accepted Answer · edited May 23 '17 at 12:09

I do not know if this will be the best way to achieve what you seek but can make use of DI for that, you can read more here

import {SharedSer} from 'yourPath/sharedSer';
..//

bootstrap(AppComponent, [SharedSer]);

if you add [SharedSer] inside bootstrap, you will have available the same instance for the entire application, no need to use providers: [SharedSer]

import {Injectable} from 'angular2/core';

@Injectable()
export class SharedSer {

    //In this class, you can implements for example:
    //  get and set keyword, you'll access it like a property. or
    //  get and set method/function.

    isOpen:  boolean = false;
    isSplit: boolean = false;

    constructor() {

    }
}

import {SharedSer} from 'yourPath/sharedSer';
..//

export class ShowParent {

    constructor(private service: SharedSer) {

    }  

    toggleOpen(event) {
        event.preventDefault();
        this.service.isOpen = !this.isOpen;
    }

    toggleSplitScreen(event) {
        event.preventDefault();
        this.service.isSplit = !this.service.isSplit;
    }
}

import {SharedSer} from 'yourPath/sharedSer';
..//

export class YourDatatable {

    constructor(private service: SharedSer) {

    }          
}

Maybe this help you What's the best way to inject one service into another in angular 2 (Beta)? to better understand services.

sorry for my English and I hope it helps you

@ndesign11 I am happy that will help you, on the other hand this answer / question is new I think you can clarify some things -> http://stackoverflow.com/questions/36060825/angular2-inject-a-non-injectable-class/36061014#36061014 — Angel Angel, Mar 18 '16 at 18:57

angular 2 (click)= not working on selectors outside of its component

2 Answers2