Angularangular anchor link

For general installation and configuration take a look at the ngx-core-components package.

Load componentload-component anchor link

// app.component.ts
import { DBRadio } from '@db-ux/ngx-core-components';

@Component({
  // ...
  standalone: true,
  imports: [..., DBRadio],
  // ...
})

Use componentuse-component anchor link

<!-- app.component.html -->
<ul>
	@for (radioName of radioNames; track radioName) {
	<li>
		<db-radio
			(change)="radio = radioName"
			[label]="'Radio ' + radioName"
			[value]="radioName"
			name="RadioGroup"
		></db-radio>
	</li>
	}
</ul>

// app.component.ts
import { Component } from "@angular/core";

@Component({
	selector: "app-app",
	templateUrl: "./app.component.html"
})
export class AppComponent {
	radioNames = ["X", "Y", "Z"];
	radio = "";
}

How to use with Template Driven Formshow-to-use-with-template-driven-forms anchor link

Third party controls require a ControlValueAccessor to function with angular forms. Adding an ngDefaultControl attribute will allow them to use that directive. Further information

//app.component.ts
import { FormsModule } from '@angular/forms';

@Component({
	// ...
	imports: [
		// ...,
		FormsModule
    ],
	// ...
})

<!-- form.component.html -->
<form>
	<DBRadio ngDefaultControl [(ngModel)]="radio">Label</DBRadio>
	<DBButton type="button" variant="brand" (click)="showValues()"
		>Get radio value</DBButton
	>
</form>

<h2>Output</h2>
<dl>
	<dt>radio's value</dt>
	<dd>{{ radio ? radio : "No radio set" }}</dd>
</dl>

// form.component.ts
export class FormComponent {
	radio = "";
	showValues(): void {
		alert(JSON.stringify({ radio: this.radio }));
	}
}

How to use with Reactive Formshow-to-use-with-reactive-forms anchor link

coming soon … if your interested in contributing, you're very welcome ;)