Skip to main content

Documentation Index

Fetch the complete documentation index at: https://mintlify.com/kevinrodriguezmorales/siget/llms.txt

Use this file to discover all available pages before exploring further.

Siget is built entirely on Angular 21’s standalone component model — there are no NgModule declarations anywhere in the project. Every component is self-contained: it declares its own imports, template, and styles in a single @Component decorator, making the dependency graph explicit and easy to follow.

​
The Root App Component

The entry point of the application is src/app/app.ts. It imports RouterOutlet directly and exposes the application title through an Angular Signal: 
import { Component, signal } from '@angular/core';
import { RouterOutlet } from '@angular/router';

@Component({
  selector: 'app-root',
  imports: [RouterOutlet],
  templateUrl: './app.html',
  styleUrl: './app.scss'
})
export class App {
  protected readonly title = signal('siget');
}
Notice that imports replaces the old NgModule.imports array — you list only what this component actually uses. Here, RouterOutlet is imported so the template can render the active route.

​
Generating a New Component

The Angular CLI scaffolds new standalone components for you. Run either of the following from the project root: 
ng generate component component-name
# shorthand
ng g c component-name
The CLI creates four files (TypeScript class, HTML template, SCSS stylesheet, and a spec file) and wires up the standalone metadata automatically.

​
Default Style: SCSS

Siget configures the @schematics/angular:component schematic in angular.json to use SCSS for all generated components: 
"schematics": {
  "@schematics/angular:component": {
    "style": "scss"
  }
}
This means every component the CLI generates will have a .scss file instead of .css, and the styleUrl in the decorator will reference it accordingly.

​
Example: A Generated Component

After running ng g c my-feature, the resulting component class looks like this: 
import { Component } from '@angular/core';

@Component({
  selector: 'app-my-feature',
  imports: [],
  templateUrl: './my-feature.html',
  styleUrl: './my-feature.scss'
})
export class MyFeatureComponent {}
The imports array starts empty — add Angular directives, pipes, or other components there as you build out the feature.

​
Angular Signals

The root App component uses signal() from @angular/core to hold reactive state. Signals are Angular’s primitive for fine-grained reactivity and replace many use cases that previously required BehaviorSubject or ChangeDetectorRef. The three core APIs are: 
import { signal, computed, effect } from '@angular/core';

// Writable signal — holds a value and notifies consumers on change
const count = signal(0);
count.set(1);
count.update(v => v + 1);

// Derived signal — recomputes automatically when dependencies change
const doubled = computed(() => count() * 2);

// Side-effect — runs whenever its signal dependencies change
effect(() => {
  console.log('count is now', count());
});
Signals work seamlessly in templates: calling title() in app.html reads the current value and marks the view for re-render when the signal changes.

​
Code Generation Reference

SchematicCommandDescription
componentng g component nameCreates a standalone component
directiveng g directive nameCreates a directive
pipeng g pipe nameCreates a transform pipe
serviceng g service nameCreates an injectable service
guardng g guard nameCreates a route guard
Run ng generate --help to see the full list of available schematics, including lesser-used ones like interceptor, resolver, and enum.
The SCSS style default is set once in angular.json under schematics["@schematics/angular:component"].style. Changing it to css or less there applies the new default to every subsequent ng generate component call.

Build docs developers (and LLMs) love

Get started for freeTalk to us