Natuurlijk! Hier is een stapsgewijze gids voor het maken van een aangepaste Angular componentbibliotheek die je in je projecten kunt gebruiken: --- ### 1. Opzetten van de Angular bibliotheek **a. Nieuwe Angular workspace maken met library:** ```bash ng new mijn-bibliotheek --create-application=false cd mijn-bibliotheek ng generate library mijn-components ``` Dit creëert een Angular workspace zonder applicatie en een bibliotheek genaamd `mijn-components`. **b. Structuur:** De bibliotheek bevindt zich onder `projects/mijn-components/`. Hier voeg je je componenten toe, bijvoorbeeld een knop. --- ### 2. Component toevoegen **a. Nieuwe component maken:** ```bash ng generate component mijn-components/knop --project=mijn-components ``` **b. Knop componentvoorbeeld (`knop.component.ts`):** ```typescript import { Component, Input } from '@angular/core'; @Component({ selector: 'mijn-knop', template: `<button [ngClass]="class">{{ tekst }}</button>`, styles: [` button { padding: 8px 16px; font-size: 14px; cursor: pointer; } `] }) export class KnopComponent { @Input() tekst: string = 'Klik mij'; @Input() class: string = ''; } ``` --- ### 3. Afhankelijkheden beheren **a. Angular peer dependencies:** Controleer `package.json` van je bibliotheek en voeg Angular core en andere vereisten als peer dependencies toe: ```json "peerDependencies": { "@angular/common": "^14.0.0", "@angular/core": "^14.0.0" } ``` **b. Installatie in projecten:** Wanneer je je bibliotheek publiceert, worden deze peer dependencies automatisch geïnstalleerd in het project dat de bibliotheek gebruikt. --- ### 4. Documentatie voor componenten **a. Inline documentatie met JSDoc:** Gebruik JSDoc-stijl comments in je component code: ```typescript /** * Een knop component die kan worden aangepast. * @selector 'mijn-knop' * @inputs tekst: tekst op de knop * @inputs class: extra CSS klassen */ ``` **b. Gebruik van Storybook:** Voor uitgebreide documentatie en voorbeelden kun je [Storybook](https://storybook.js.org/) integreren: ```bash npx sb init ``` Configureer Storybook voor je componentbibliotheek, zodat je interactieve voorbeelden hebt. **c. README-bestand:** Voeg een `README.md` toe in de root van je bibliotheek met uitleg, installatie-instructies en voorbeelden. --- ### 5. Versiebeheer **a. Gebruik Git:** - Initialiseer een git-repository: ```bash git init git add . git commit -m "initie van mijn componentbibliotheek" ``` - Gebruik semver voor versiebeheer: ```bash npm version patch|minor|major git push origin master --tags ``` **b. Releases:** Maak duidelijke releases met beschrijvingen en versie-nummers. --- ### 6. Publiceren naar npm **a. Inloggen op npm:** ```bash npm login ``` **b. Build de bibliotheek:** ```bash ng build mijn-components --prod ``` De build-output staat in `dist/mijn-components/`. **c. Publiceer:** ```bash npm publish dist/mijn-components/ ``` **d. Installatie in andere projecten:** ```bash npm install mijn-components ``` In je project importeer je de module: ```typescript import { MijnComponentsModule } from 'mijn-components'; @NgModule({ imports: [MijnComponentsModule], ... }) export class AppModule {} ``` --- ### Samenvatting - Maak een Angular workspace en een library met `ng generate library`. - Voeg componenten toe en documenteer ze met JSDoc en eventueel Storybook. - Beheer afhankelijkheden via peer dependencies. - Gebruik Git en semver voor versiebeheer. - Bouw en publiceer je bibliotheek naar npm. Met deze aanpak heb je een herbruikbare, goed gedocumenteerde Angular componentbibliotheek die je eenvoudig kunt onderhouden en delen.

Hier is een uitgebreide handleiding voor het opzetten van een aangepaste Angular componentbibliotheek: ## 1. Projectopzet en structuur ### Workspace initialiseren ```bash ng new mijn-componentenbibliotheek --create-application=false cd mijn-componentenbibliotheek ng generate library mijn-ui-lib ``` ### Aanbevolen projectstructuur: ``` projects/ └── mijn-ui-lib/ ├── src/ │ ├── lib/ │ │ ├── components/ │ │ │ ├── button/ │ │ │ │ ├── button.component.ts │ │ │ │ ├── button.component.html │ │ │ │ ├── button.component.scss │ │ │ │ └── button.component.spec.ts │ │ │ └── index.ts │ │ ├── services/ │ │ ├── models/ │ │ └── public-api.ts │ ├── assets/ │ │ └── documentation/ │ └── test/ ├── ng-package.json ├── package.json └── tsconfig.lib.json ``` ## 2. Component implementatie: Knop ### button.component.ts ```typescript import { Component, Input, Output, EventEmitter } from '@angular/core'; export type ButtonVariant = 'primary' | 'secondary' | 'danger' | 'success'; export type ButtonSize = 'small' | 'medium' | 'large'; @Component({ selector: 'mijn-ui-button', templateUrl: './button.component.html', styleUrls: ['./button.component.scss'] }) export class ButtonComponent { @Input() variant: ButtonVariant = 'primary'; @Input() size: ButtonSize = 'medium'; @Input() disabled: boolean = false; @Input() type: string = 'button'; @Input() ariaLabel: string = ''; @Output() clicked = new EventEmitter<Event>(); onClick(event: Event): void { if (!this.disabled) { this.clicked.emit(event); } } get buttonClasses(): string { return `btn btn--${this.variant} btn--${this.size}`; } } ``` ### button.component.html ```html <button [class]="buttonClasses" [type]="type" [disabled]="disabled" [attr.aria-label]="ariaLabel" (click)="onClick($event)"> <ng-content></ng-content> </button> ``` ### button.component.scss ```scss .btn { border: none; border-radius: 4px; cursor: pointer; font-family: inherit; font-weight: 500; transition: all 0.2s ease-in-out; display: inline-flex; align-items: center; justify-content: center; &:focus { outline: 2px solid #0066cc; outline-offset: 2px; } &:disabled { opacity: 0.6; cursor: not-allowed; } // Varianten &--primary { background-color: #0066cc; color: white; &:hover:not(:disabled) { background-color: #0052a3; } } &--secondary { background-color: #e6e6e6; color: #333; &:hover:not(:disabled) { background-color: #d4d4d4; } } &--danger { background-color: #dc3545; color: white; &:hover:not(:disabled) { background-color: #c82333; } } &--success { background-color: #28a745; color: white; &:hover:not(:disabled) { background-color: #218838; } } // Groottes &--small { padding: 6px 12px; font-size: 14px; } &--medium { padding: 8px 16px; font-size: 16px; } &--large { padding: 12px 24px; font-size: 18px; } } ``` ## 3. Public API beheer ### public-api.ts ```typescript export * from './components/button/button.component'; // Exporteer hier alle componenten, services en modellen ``` ### components/index.ts ```typescript export { ButtonComponent } from './button/button.component'; export type { ButtonVariant, ButtonSize } from './button/button.component'; ``` ## 4. Documentatie ### README.md in de library ```markdown # Mijn UI Library Een verzameling herbruikbare Angular componenten. ## Installatie ```bash npm install mijn-ui-lib ``` ## Gebruik Importeer de module in je app: ```typescript import { MijnUiLibModule } from 'mijn-ui-lib'; @NgModule({ imports: [MijnUiLibModule] }) export class AppModule { } ``` ## Componenten ### Button **Import:** ```typescript import { ButtonComponent } from 'mijn-ui-lib'; ``` **Gebruik:** ```html <mijn-ui-button variant="primary" size="medium" (clicked)="onButtonClick($event)"> Klik mij </mijn-ui-button> ``` **Inputs:** - `variant: 'primary' | 'secondary' | 'danger' | 'success'` - Stijl van de knop - `size: 'small' | 'medium' | 'large'` - Grootte van de knop - `disabled: boolean` - Schakelt de knop uit - `type: string` - HTML button type - `ariaLabel: string` - Toegankelijkheid label **Outputs:** - `clicked: EventEmitter<Event>` - Wordt geëmit bij klik ``` ## 5. Build configuratie ### ng-package.json ```json { "$schema": "../../node_modules/ng-packagr/ng-package.schema.json", "dest": "../../dist/mijn-ui-lib", "lib": { "entryFile": "src/public-api.ts" }, "assets": [ "assets/documentation" ] } ``` ### package.json van de library ```json { "name": "mijn-ui-lib", "version": "1.0.0", "description": "Een verzameling herbruikbare Angular componenten", "keywords": ["angular", "components", "ui"], "peerDependencies": { "@angular/common": "^16.0.0", "@angular/core": "^16.0.0" }, "dependencies": { "tslib": "^2.3.0" } } ``` ## 6. Versiebeheer ### Semantic Versioning - **MAJOR** versie: Breaking changes - **MINOR** versie: Nieuwe features (backward compatible) - **PATCH** versie: Bug fixes ### Changelog bijhouden ```markdown # Changelog ## [1.1.0] - 2024-01-01 ### Toegevoegd - Nieuwe button variant 'success' ## [1.0.1] - 2023-12-15 ### Gerepareerd - Focus styling voor buttons ## [1.0.0] - 2023-12-01 ### Eerste release - Button component ``` ## 7. Publiceren naar npm ### Voorbereiding ```bash # Build de library ng build mijn-ui-lib # Test lokaal cd dist/mijn-ui-lib npm pack ``` ### Publicatie ```bash # Login bij npm npm login # Publiceer npm publish ``` ### Automatiseren met scripts Voeg toe aan package.json: ```json { "scripts": { "build:lib": "ng build mijn-ui-lib", "publish:lib": "cd dist/mijn-ui-lib && npm publish", "version:patch": "npm version patch", "version:minor": "npm version minor", "version:major": "npm version major" } } ``` ## 8. Gebruik in projecten ### Installatie ```bash npm install mijn-ui-lib ``` ### In je Angular project ```typescript import { MijnUiLibModule } from 'mijn-ui-lib'; @NgModule({ imports: [MijnUiLibModule], // ... }) export class AppModule { } ``` ```html <mijn-ui-button variant="primary" size="large" (clicked)="handleClick($event)"> Mijn knop </mijn-ui-button> ``` ## 9. Best practices - **Testing**: Schrijf unit tests voor alle componenten - **Storybook**: Overweeg Storybook voor component documentatie - **CI/CD**: Automatiseer builds en tests - **Peer dependencies**: Gebruik peerDependencies voor Angular packages - **Tree shaking**: Zorg dat je library tree-shakeable is - **Accessibility**: Implementeer WCAG richtlijnen Deze structuur zorgt voor een professionele, onderhoudbare componentbibliotheek die eenvoudig te gebruiken en uit te breiden is.