@ng-action-outlet/core v1.19.2
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
DEMO 2 Advanced
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.
3 years ago
3 years ago
3 years ago
3 years ago
3 years ago
3 years ago
3 years ago
3 years ago
3 years ago
3 years ago
3 years ago
4 years ago
4 years ago
4 years ago
4 years ago
4 years ago
4 years ago
4 years ago
4 years ago
4 years ago
5 years ago
5 years ago
5 years ago
5 years ago
5 years ago
5 years ago
5 years ago
5 years ago
5 years ago
5 years ago
5 years ago
5 years ago
6 years ago
6 years ago
6 years ago
6 years ago
6 years ago
6 years ago
6 years ago