Angular Utility Grab Bag: Global Variables, Reusable Components, and CLI Generation

Three small but frequently needed Angular patterns — sharing a global value across components, building a genuinely reusable component, and using the CLI's generator commands efficiently — are worth having as one combined reference.

The "global variable" pattern: a shared service

@Injectable({ providedIn: 'root' })
export class AppStateService {
    currentTheme = 'light';
    apiBaseUrl = 'https://api.example.com';
}

constructor(private appState: AppStateService) {}

toggleTheme(): void {
    this.appState.currentTheme = this.appState.currentTheme === 'light' ? 'dark' : 'light';
}

Following the dependency-injection pattern covered elsewhere on this site, a providedIn: 'root' service is Angular's real equivalent of a global variable — every component injecting it shares the exact same instance, unlike a plain exported constant from a module file, which every importer would get its own separate copy of if it were ever reassigned.

A genuinely reusable component: accepting configuration via @Input

@Component({
    selector: 'app-button',
    template: ``
})
export class ButtonComponent {
    @Input() variant: 'primary' | 'secondary' | 'danger' = 'primary';
    @Output() onClick = new EventEmitter();
}

Delete

<ng-content> is what allows the button's inner text/content to be provided by whatever uses the component — combined with a typed @Input() for configurable variants, this is the core pattern behind any genuinely reusable, configurable component, rather than one hardcoded for a single specific use case.

Generating a component via the CLI

ng generate component shared/button
ng g c shared/button // shorthand

Placing reusable components under a dedicated shared/ folder (as shown) is a common convention distinguishing genuinely reusable, generic components from feature-specific ones — the CLI itself doesn't enforce this structure, but following a consistent convention keeps a growing project's component organization predictable.

Generating a component as standalone (modern Angular)

ng generate component shared/button --standalone

Standalone components don't need to be declared in an NgModule — genuinely simpler for a new component in modern Angular versions, which have shifted toward standalone components as the default, moving away from the older NgModule-centric architecture.

Generating a component without a separate test file, for a quick prototype

ng generate component shared/button --skip-tests

Useful specifically for a throwaway prototype component — genuinely worth reconsidering for any component actually intended to ship, since skipping the generated test file means starting with zero test coverage rather than the scaffolded starting point the generator would otherwise provide.

Listing every available CLI schematic beyond just component

ng generate --help

Beyond component, the CLI can scaffold services, directives, pipes, guards, interceptors, modules, and more — worth checking this list when starting a new piece of functionality, rather than assuming only component and service (the two most commonly reached for) are available.