@ojiepermana/angular-component

@ojiepermana/angular-component

Angular library ini berada di library/component dan dipublikasikan dengan nama paket @ojiepermana/angular-component.

Library ini menggunakan pola secondary entry point per folder. Import yang disarankan adalah langsung ke subpath yang dibutuhkan, misalnya @ojiepermana/angular-component/button atau @ojiepermana/angular-chart/bar.

Build

Jalankan build library dengan perintah berikut:

bunx ng build angular-component

Nama project di angular.json adalah angular-component. Artefak build akan ditulis ke dist/component.

Penggunaan Lokal

Untuk import dari workspace ini, gunakan path berikut:

@ojiepermana/angular-component

Untuk komponen atau utilitas spesifik, gunakan subpath secondary entry point:

@ojiepermana/angular-component/button
@ojiepermana/angular-chart/bar
@ojiepermana/angular-component/icon
@ojiepermana/angular-theme/styles

Untuk helper, gunakan entry point terfokus agar helper murni tidak menarik runtime overlay:

import { cn, injectUniqueId } from '@ojiepermana/angular-component/utils/core';
import { connectedPositionFor } from '@ojiepermana/angular-component/utils/overlay';

@ojiepermana/angular-component/utils tetap tersedia sebagai compatibility barrel, tetapi kode baru sebaiknya memilih utils/core atau utils/overlay.

Unit Test

Jalankan unit test library dengan perintah berikut:

bunx ng test angular-component

Runner test di workspace ini menggunakan Vitest melalui Angular build tooling.

Konvensi Selector

Aturan baku agar semua tim memakai mental model yang sama:

Jenis primitif	Selector	Contoh
Menempel ke elemen HTML semantik (button, input, label, textarea, select)	Attribute selector	<button Button>, <input Input>
Container/komposit tanpa padanan elemen native	Element selector	<Card>, <Dialog>, <Tabs>
Behavior tanpa render (trigger, content marker)	Directive [Xxx] PascalCase	[PopoverTrigger], [Tooltip]

Beberapa komponen menyediakan keduanya (Label, label[Label]) untuk markup fleksibel — gunakan bentuk attribute bila elemen native tersedia karena semantik & aksesibilitasnya gratis dari browser.

Dependensi runtime

• @angular/cdk adalah dependency langsung paket ini (overlay/portal/a11y dipakai oleh banyak komponen), jadi ikut terinstal otomatis — tidak ada lagi error Cannot find module '@angular/cdk/overlay'.
• @angular/common, @angular/core, @angular/forms, @angular/platform-browser, dan rxjs tetap peer dependency (disediakan oleh aplikasi Angular Anda).

Status Dependensi @angular/material

@angular/material masih menjadi peer dependency opsional untuk SelectField, yang kembali menggunakan MatSelect dan MatOption. Calendar dan DatePicker tetap memakai primitif native/CDK, sehingga consumer yang tidak mengimpor SelectField tidak perlu memasang Material.

Support and security

Angular 22.1–22.x CSR/browser usage is supported; SSR, prerendering, and hydration are not. See the bundled SUPPORT.md. Report suspected vulnerabilities privately using the instructions in the bundled SECURITY.md. This package is MIT licensed; see the bundled LICENSE.