Instructions

After completing the steps below, before using 'ng serve' to generate your Angular webpage, run 'npx webpack' to generate your custom components.

Reference custom component in your own form using class name Kebab Cased

<custom-component></custom-component>

WebpackConfig.ts

const path = require("path");
const customComponents = require(/* insert path to custom component e.g.'./src/app/customComponents.ts' */)

module.exports = {
  mode: "development",
  entry: ["./src/app/app.module.ts"],
  output: {},
  devtool: false,
  module: {
    rules: [
      {
        test: /\.ts$/, 
        use: [
          {
            loader: "@angoraforms/angora-loader",
            options: {
              customComponents: customComponents
            }
          },
        ],
      },
    ],
  },
  resolve: {
    extensions: ['.tsx', '.ts', '.js'],
  },
};

Create a webpack.config.ts file in the root directory of your project and follow the structure above

Custom Components Page

Required Items

class CustomComponent {
    template = 'your html code'
  
    onChange = (value: any) => {};
  
    onTouched = () => {};
  
    value: any = 0;
  
    disabled = false
  }

Template
Include all html code in backticks (``) in the template property.

<h1>{{value}}</h1>
<button (click)='increment()'>Increment</button>
<button (click)='decrement()'>Decrement</button>

OnChange
Invoke onChange passing in value as the argument every time value changes.

<button (click)='increment()'>Increment</button>

increment() {
    this.value++;
    this.onChange(this.value);
    this.onTouched();
}

OnTouched
Invoke onTouched when the user interacts with the form component.

<button (click)='increment()'>Increment</button>

increment() {
    this.value++;
    this.onChange(this.value);
    this.onTouched();
}

Value
Set equal the value of the form component inside custom functionality. When changed invoke OnChange.

<h1>{{value}}</h1>

increment() {
    this.value++;
    this.onChange(this.value);
    this.onTouched();
}

Disabled
Set equal to the disabled property in the HTML code for inputs/buttons. Determines whether inputs/buttons are disabled. Set to false to enable. Set to true to disable.

<button (click)='increment()' [disabled]="disabled">Increment</button>

increment() {
    this.value++;
    this.onChange(this.value);
    this.onTouched();
    if (this.value === 5) {
        this.disabled = true
    }
}

(If value is equal to 5 disable the button)

Export
Export your customComponent/s using module.exports
```
module.exports = [CustomComponent]
```

Write additional code (properties and/or functions) to provide custom functionality.

Full Example:

class CustomComponent {
    template = `
          <h1>{{value}}</h1>
          <button (click)='increment()'>Increment</button>
          <button (click)='decrement()'>Decrement</button>
      `;
  
    onChange = (value: any) => {};
  
    onTouched = () => {};
  
    value = 0;
  
    disabled = false
  
    increment() {
      this.value++;
      this.onChange(this.value);
      this.onTouched();
    }
  
    decrement() {
      this.value--;
      this.onChange(this.value);
      this.onTouched();
    }
  }
  
  module.exports = [CustomComponent]