NgActionOutlet



NgActionOutlet

The goal of ActionOutlet is to provide an easy API to build dynamic menus on runtime and have the possibility to get notified for each and every change, that happens to any particular action in the menu (e.g. Title change, icon change, disabled state, ...).

The most natural use case is when back-end is in charge over the visibility of actions and menus of the front-end application (e.g. hide/show actions based on permissions).

DEMO 1 Basic

Edit @ng-action-outlet/material DEMO

DEMO 2 Advanced

Edit @ng-action-outlet/material DEMO

Getting started

Step 1: Install ng-action-outlet

You can use either npm or yarn command-line tool.
Choose the tool that is appropriate for your project.

NPM

npm install @ng-action-outlet/core

YARN

yarn add @ng-action-outlet/core

Step 2: Import ActionOutletModule

Import Action Outlet NgModule to your Angular module

import { ActionOutletModule } from '@ng-action-outlet/core';

@NgModule({
  ...
  imports: [ActionOutletModule],
  ...
})
export class ExampleModule { }

Step 3: Define what component to use with what action

Use providers to set default components for each action to be used for rendering.
Provide action class and use value pointing to your component class, so that action outlet can associate component to provided action.

import { ActionOutletModule, ActionButton, ActionGroup, ActionToggle } from '@ng-action-outlet/core';

import { ExampleButtonComponent } from './example-button.component';
import { ExampleGroupComponent } from './example-group.component';
import { ExampleToggleComponent } from './example-toggle.component';

@NgModule({
  ...
  imports: [ActionOutletModule],
  providers: [{
      provide: ActionButton,
      useValue: ExampleButtonComponent
  }, {
      provide: ActionGroup,
      useValue: ExampleGroupComponent
  }, {
      provide: ActionToggle,
      useValue: ExampleToggleComponent
  }]
  ...
})
export class ExampleModule { }

Step 4: Override default's in your component

In order to override your default settings, do the same as initially in a module,
but only for actions that you actually wish to change.

import { ActionToggle } from '@ng-action-outlet/core';

import { ExampleCheckboxComponent } from './example-checkbox.component';

@Component({
  ...
  providers: [{
      provide: ActionToggle,
      useValue: ExampleCheckboxComponent
  }]
  ...
})
export class ExampleComponent { }

Step 5: Create action instances

Create actions in a component class so that they can be accessed from the template.

import { ActionOutletFactory } from '@ng-action-outlet/core';

@Component(...)
export class ExampleComponent implements OnInit {
    ...
    group: ActionGroup;

    constructor(private actionOutlet: ActionOutletFactory) { }

    ngOnInit() {
        this.group = this.actionOutlet.createGroup();
        this.group.createToggle()
          .setTitle('Example title')
          .check();
    }
    ...
}

Step 6: Render the actions

Bind created actions to actionOutlet renderer directive.

<ng-container *actionOutlet="group"></ng-container>

Available actions

In order to create custom action class, refer to ActionAbstract class.

results matching ""

    No results matching ""