ajsf

Use the Angular CLI to scaffold new components, directives, pipes, or other entities specifically within the @ajsf/material project. You must include the --project @ajsf/material flag to ensure the files are generated in the correct project scope.

# Generate a component
ng generate component component-name --project @ajsf/material

# Generate other entities
ng generate directive|pipe|service|class|guard|interface|enum|module --project @ajsf/material

Use the Angular CLI to build the project or run unit tests.

• Build: ng build @ajsf/material (outputs to dist/)
• Test: ng test @ajsf/material (runs via Karma)

Use the Angular CLI to generate new components, directives, pipes, or other entities specifically within the @ajsf/bootstrap4 project. You must include the --project @ajsf/bootstrap4 flag to ensure the files are created in the correct project directory.

# Generate a component
ng generate component component-name --project @ajsf/bootstrap4

# Generate other types
ng generate directive|pipe|service|class|guard|interface|enum|module --project @ajsf/bootstrap4

To enable Bootstrap 4 UI support, import Bootstrap4FrameworkModule into your main Angular application module (usually AppModule).

import { BrowserModule } from '@angular/platform-browser';
import { NgModule } from '@angular/core';

import { Bootstrap4FrameworkModule } from '@ajsf/bootstrap4';

import { AppComponent } from './app.component';

@NgModule({
  declarations: [ AppComponent ],
  imports: [
    Bootstrap4FrameworkModule
  ],
  providers: [],
  bootstrap: [ AppComponent ]
})
export class AppModule { }

To enable the Bootstrap 3 UI, import Bootstrap3FrameworkModule into your main application module (e.g., AppModule).

import { BrowserModule } from '@angular/platform-browser';
import { NgModule } from '@angular/core';

import { Bootstrap3FrameworkModule } from '@ajsf/bootstrap3';

import { AppComponent } from './app.component';

@NgModule({
  declarations: [ AppComponent ],
  imports: [
    Bootstrap3FrameworkModule
  ],
  providers: [],
  bootstrap: [ AppComponent ]
})
export class AppModule { }

To use the material-angular UI, import MaterialDesignFrameworkModule into your main application module (e.g., AppModule).

import { BrowserModule } from '@angular/platform-browser';
import { NgModule } from '@angular/core';

import { MaterialDesignFrameworkModule } from '@ajsf/material';

import { AppComponent } from './app.component';

@NgModule({
  declarations: [ AppComponent ],
  imports: [
    MaterialDesignFrameworkModule
  ],
  providers: [],
  bootstrap: [ AppComponent ]
})
export class AppModule { }

Use the Angular CLI to build the project or run unit tests.

• Build: ng build @ajsf/bootstrap4 (outputs to dist/).
• Test: ng test @ajsf/bootstrap4 (uses Karma).

Install the @ajsf/bootstrap4 package using npm or yarn to use Bootstrap 4 styling with JSON Schema Forms.

npm install @ajsf/bootstrap4@latest

# Or with YARN
yarn add @ajsf/bootstrap4@latest

Install the @ajsf/material package using npm or yarn to use Material Design UI components with JSON Schema Forms.

npm install @ajsf/material@latest

# Or with YARN
yarn add @ajsf/material@latest

Install the @ajsf/bootstrap3 package using npm or yarn to use the Bootstrap 3 UI framework with JSON Schema Forms.

npm install @ajsf/bootstrap3@latest

# Or with YARN
yarn add @ajsf/bootstrap3@latest

In the @ajsf/material package, you can switch the visual representation of a boolean control from a checkbox to a slide toggle by setting the type or format property to 'slide-toggle' within the layoutNode configuration.

This is handled automatically during the ngOnInit lifecycle of the MaterialCheckboxComponent.

{
  "type": "slide-toggle",
  "title": "Toggle Setting"
}

The service supports dynamic text parsing using a {{expression}} syntax. This is used in parseText and setItemTitle to resolve values from the form data, parent values, or external data (tpldata).

Supported expression features:

• Placeholders: {{property}} replaces the placeholder with the value of that property.
• Special Keywords:
  • idx or $index: Resolves to the current array index.
  • value: Resolves to the current control's value.
• Logical Operators: Supports || (OR), && (AND), and + (Concatenation).
• JSON Pointers: Supports resolving values via JSON pointer syntax (e.g., /path/to/property).
• External Data: Supports accessing tpldata via pointers.

// Example of what a title might look like in a layout node:
// "User: {{value.firstName}} {{value.lastName}}"