CODEWITHSUNDEEP
angular
Robin Gruschke
Robin Gruschke

Reputation: 234

Angular2 attributive directive output 'API'?

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!

Upvotes: 0

Views: 53

Answers (1)

G&#252;nter Z&#246;chbauer
G&#252;nter Z&#246;chbauer

Reputation: 657396

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>

Upvotes: 1

Related Questions