@ojiepermana/angular

This project was generated using Angular CLI version 21.2.0.

Package manager

Install dependencies from the workspace root with Bun:

bun install

Consumer installation

Install the published package into a consumer Angular workspace with Angular CLI so the required peer dependencies are added to the app's package.json and installed in the same flow:

ng add @ojiepermana/angular

When updating the library later, use Angular CLI as well:

ng update @ojiepermana/angular

The package ships ng-add and ng-update metadata so Angular and RxJS companions stay aligned with the supported versions of the library.

If you install the package with npm install, bun add, pnpm add, or yarn add directly, peer dependency installation falls back to the package manager's own behavior.

Navigation primitives

@ojiepermana/angular/navigation exports the shared sidebar and topbar building blocks used by the demo shells. The vertical navigation selector is now sidebar and the projected sidebar slots use sidebar-header and sidebar-footer.

<sidebar [ariaLabel]="'Primary'" [appearance]="'default'">
  <div sidebar-header>Brand</div>
  <div sidebar-footer>Footer actions</div>
</sidebar>

Register items through NavigationService.registerItems(...), or pass them directly with the items input when composing a local navigation tree.

SDK generator in a consumer workspace

After @ojiepermana/angular is installed, a consumer workspace can scaffold an SDK config file under config/sdk.config.json and generate an Angular SDK directly from the published schematics:

ng generate @ojiepermana/angular:sdk-init
# edit config/sdk.config.json
ng generate @ojiepermana/angular:sdk

The main consumer flow is: create config/sdk.config.json, adjust the OpenAPI input and output target, then run the SDK generator.

If you want short script aliases in the consumer app's package.json, add:

{
  "scripts": {
    "gen:sdk:init": "ng generate @ojiepermana/angular:sdk-init",
    "gen:sdk": "ng generate @ojiepermana/angular:sdk"
  }
}

Consumers do not need a gen:sdk:build step because the npm package already ships the compiled schematic runtime.

Common follow-up options:

ng generate @ojiepermana/angular:sdk-init --path=config/my-sdk.config.json
ng generate @ojiepermana/angular:sdk --config=config/my-sdk.config.json --dry-run

Code scaffolding

Angular CLI includes powerful code scaffolding tools. To generate a new component, run:

bun run ng generate component component-name

For a complete list of available schematics (such as components, directives, or pipes), run:

bun run ng --help

Building

To build the library, run:

bun run build

This command will compile your project, and the build artifacts will be placed in the dist/ directory.

Publishing the Library

Publish the scoped package to the public npm registry from the workspace root.

First, log in to npm:

npm login

Then run:

npm run publish

This command rebuilds the library and publishes the generated dist/angular package with public access.

Running unit tests

To execute unit tests with the Karma test runner, use the following command:

bun run test

Running end-to-end tests

For end-to-end (e2e) testing, run:

bun run ng e2e

Angular CLI does not come with an end-to-end testing framework by default. You can choose one that suits your needs.

Additional Resources

For more information on using the Angular CLI, including detailed command references, visit the Angular CLI Overview and Command Reference page.