Tu primer componente

Un tema para tu aplicación

Coloca neu-theme una vez alrededor del contenido de la aplicación en src/app/app.ts. Proporciona los colores y valores de diseño compartidos a las pantallas y controles que contiene, también a los que están dentro de componentes hijos. No necesitas rodear cada botón, campo o componente con otro neu-theme.

El valor system sigue la apariencia del dispositivo. Usa light o dark para elegir una apariencia fija. Si tu aplicación ya tiene un neu-theme en la raíz, consérvalo y añade tus pantallas dentro de él.

1. Crea el componente de la pantalla

Crea src/app/welcome.component.ts. Importa aquí el botón, donde lo utilizas. Este componente no lleva neu-theme: recibe el tema de la raíz de la aplicación.

import { Component, signal } from '@angular/core';
import { Text, View } from '@ng-native/components';
import { NeuButtonComponent } from '@neural-ui/native/button';

@Component({
  selector: 'app-welcome',
  imports: [Text, View, NeuButtonComponent],
  template: `
    <view class="content">
      <neu-button label="Continue" (pressed)="continued.set(true)" />
      <text class="feedback">{{ continued() ? 'Ready to continue.' : 'Welcome!' }}</text>
    </view>
  `,
  styles: `
    .content { padding: 24px; gap: 16px; }
    .feedback { color: var(--neu-text); }
  `,
})
export class WelcomeComponent {
  readonly continued = signal(false);
}

2. Monta la pantalla dentro del tema raíz

Usa este ejemplo completo en src/app/app.ts. App importa el tema y WelcomeComponent; el botón sigue importado en WelcomeComponent. Conserva el arranque generado de src/main.ts.

import { Component } from '@angular/core';
import { SafeAreaProvider, SafeAreaView } from '@ng-native/components';
import { NeuThemeComponent } from '@neural-ui/native/theme';
import { WelcomeComponent } from './welcome.component';

@Component({
  selector: 'app-root',
  imports: [SafeAreaProvider, SafeAreaView, NeuThemeComponent, WelcomeComponent],
  template: `
    <safe-area-provider>
      <neu-theme scheme="system">
        <safe-area-view class="screen">
          <app-welcome />
        </safe-area-view>
      </neu-theme>
    </safe-area-provider>
  `,
  styles: `
    :host, .screen { flex: 1; }
  `,
})
export class App {}

Las demás pantallas pueden compartir este mismo tema raíz. Añade otro neu-theme únicamente cuando quieras que una sección tenga su propia apariencia o valores de diseño.

El estado pertenece a tu aplicación

Pulsa Continue para actualizar la signal y mostrar la confirmación. El output pressed solicita una acción; tu aplicación decide qué sucede después. Reutiliza este patrón para navegar, guardar o abrir una hoja.