Getting Started

Welcome to dasch.ng! This guide will help you get started with using the libraries from the dasch-ng monorepo in your projects.

Installation

All libraries are published to npm under the @dasch-ng scope. You can install them individually based on your needs:

Angular Libraries

# Gravatar hash generation
npm install @dasch-ng/gravatar

# Angular utilities (pipes, directives, helpers)
npm install @dasch-ng/ng-utils

# Angular Material right-side sheet
npm install @dasch-ng/material-right-sheet

# MutationObserver wrapper
npm install @dasch-ng/mutation-observer

# ResizeObserver wrapper
npm install @dasch-ng/resize-observer

# Form validators
npm install @dasch-ng/validators

TypeScript Libraries

# TypeScript decorators
npm install @dasch-ng/decorators

# Custom RxJS operators
npm install @dasch-ng/rxjs-operators

# Web utilities
npm install @dasch-ng/web-utils

Usage

Each library has its own documentation page with detailed usage examples. Here's a quick overview:

Angular Pipes Example

import { IsNullPipe } from '@dasch-ng/ng-utils';

@Component({
  standalone: true,
  imports: [IsNullPipe],
  template: `
    @if (user$ | async | isNull) {
      <div>No user loaded</div>
    }
  `,
})
export class MyComponent {
  user$ = this.userService.currentUser$;
}

Decorator Example

import { Debounce } from '@dasch-ng/decorators';

export class SearchComponent {
  @Debounce(300)
  onSearch(query: string) {
    // This method will be debounced by 300ms
    this.searchService.search(query);
  }
}

RxJS Operator Example

import { tapCatch } from '@dasch-ng/rxjs-operators';
import { of } from 'rxjs';

const stream$ = someObservable$.pipe(
  tapCatch((error) => {
    console.error('Error occurred:', error);
    return of(null); // fallback value
  }),
);

Development Setup

If you want to contribute or develop locally:

# Clone the repository
git clone https://github.com/DaSchTour/dasch-ng.git
cd dasch-ng

# Install dependencies
npm install

# Build all libraries
nx run-many -t build

# Run tests
nx run-many -t test

# Lint and format
nx run-many -t lint --fix
nx format:write

Next Steps

• Browse the Libraries to find utilities for your project
• Check the API Reference for detailed documentation
• Read about the Architecture of the monorepo

Support

• Report Issues
• Discussions
• Documentation