Prerequisite: complete Installation and load Core styles. Click the button below: neuClick runs the handler, the application updates clicks and the output announces the new count. Open Source to copy the exact component, including Reset and its result.
The language input only localizes this bilingual example; it is not a Neural configuration requirement. Omit it to use the default English labels.
Save the Source as src/app/first-button.example.ts. This root component imports it and renders its selector. Keep the generated main.ts bootstrap and global styles from Installation. The application opens on app-root and displays the example inside it.
src/app/app.ts
import { Component } from '@angular/core';
import { FirstButtonExample } from './first-button.example';
@Component({
selector: 'app-root',
imports: [FirstButtonExample],
template: '<app-first-button />',
})
export class App {}
NeuButtonComponent makes button[neu-button] available. neuClick is an output carrying a MouseEvent, not an input. clicks is application state stored in a signal. Button blocks activation while disabled or loading; it does not store the result of your action.
Use type="button" for an action that must not submit a surrounding form. Import components through their documented public entrypoints; there is no need to import a whole catalog.
The Home combines Input, Checkbox and Button with application-owned state. This complete recipe adds tasks, records priority, clears the list and announces the result. Copy the component, import it in your root component and render app-task-list. No global Neural configuration is required.
Use Signal Forms when you need editable values and validation. Use Themes for global visual settings and Tokens for scoped changes. The catalog helps choose the next component by task.
