Angular2 attributive directive output 'API'?

Question

I created an attributive "grid" directive which is in its own module (GridModule). This module I imported into another module (DashboardModule) where I want to use it.

<div class="dashboard-container"
 [nosGrid]="gridSettings">
<div *ngFor="let tile of tiles"
     [nosGridItem]="tile">
    {{tile}}
</div>

Now calling the directive works totally fine but I ran into an issue when I tried to "export" an API from the directive (providing functionalities to lock the grid, etc....).

class DashboardComponent {
  public tiles: Array<any> = [];
  public gridSettings: INosGridOptions = {
    rows: 15,
    columns: 30
  };

  constructor() {
    // here I want to do something like this
    // NosGridDirective.lockGrid(true)
  }
}

class NosGridDirective {
  public lockGrid(val: boolean) {
    this._grid.lockGrid(val);
  }
}

All I want to achieve is beeing able to lock the grid and some other stuff (set private variables or call methods in the GridDirective).

Has anyone got an idea how I could do this?

Thanks very much in advance!

Please add the @Directive() decorator.

Günter Zöchbauer
– Günter Zöchbauer

2017-01-24 20:50:36 +00:00
Commented Jan 24, 2017 at 20:50 — Günter Zöchbauer
– Günter Zöchbauer, Commented Jan 24, 2017 at 20:50

Günter Zöchbauer · Accepted Answer · 2017-01-24 20:52:35Z

1

If you add exportAs like

@Directive({
  selector: '[nosGrid]',
  exportAs: 'nosGrid',
})
class NosGridDirective {
  @Input() gridSettings;

  public lockGrid(val: boolean) {
    this._grid.lockGrid(val);
  }
}

you can use it like

<div class="dashboard-container"
     #nosGrid="nosGrid"
     [nosGrid]="gridSettings"><button (click)="nosGrid.lockGrid(true)">click me</button>

answered Jan 24, 2017 at 20:52

Günter Zöchbauer

661k235 gold badges2.1k silver badges1.6k bronze badges

Sign up to request clarification or add additional context in comments.

Collectives™ on Stack Overflow

Angular2 attributive directive output 'API'?

1 Answer 1

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

Comments

Your Answer

Sign up or log in

Post as a guest

Related