npm package discovery and stats viewer.

Discover Tips

  • General search

    [free text search, go nuts!]

  • Package details

    pkg:[package-name]

  • User packages

    @[username]

Sponsor

Optimize Toolset

I’ve always been into building performant and accessible sites, but lately I’ve been taking it extremely seriously. So much so that I’ve been building a tool to help me optimize and monitor the sites that I build to make sure that I’m making an attempt to offer the best experience to those who visit them. If you’re into performant, accessible and SEO friendly sites, you might like it too! You can check it out at Optimize Toolset.

About

Hi, 👋, I’m Ryan Hefner  and I built this site for me, and you! The goal of this site was to provide an easy way for me to check the stats on my npm packages, both for prioritizing issues and updates, and to give me a little kick in the pants to keep up on stuff.

As I was building it, I realized that I was actually using the tool to build the tool, and figured I might as well put this out there and hopefully others will find it to be a fast and useful way to search and browse npm packages as I have.

If you’re interested in other things I’m working on, follow me on Twitter or check out the open source projects I’ve been publishing on GitHub.

I am also working on a Twitter bot for this site to tweet the most popular, newest, random packages from npm. Please follow that account now and it will start sending out packages soon–ish.

Open Software & Tools

This site wouldn’t be possible without the immense generosity and tireless efforts from the people who make contributions to the world and share their work via open source initiatives. Thank you 🙏

© 2024 – Pkg Stats / Ryan Hefner

@clarium/ngce-services

v0.0.1-beta

Published

A comprehensive set of Angular services designed to accelerate UI development.

Downloads

15

Readme

Here is a similar README file structure for ngce-services:


ngce-services

npm npm bundle size npm downloads license

ngce-services is a comprehensive collection of Angular services that simplify common development tasks, such as HTTP requests, authentication, data caching, and more. Designed for efficiency and scalability, ngce-services helps developers integrate powerful functionalities into their Angular applications with ease.

Table of Contents

Features

  • Ready-to-use Angular services for common tasks like HTTP requests, authentication, and caching.
  • Lightweight and optimized for performance.
  • Compatible with Angular versions 8.0.0 to 18.2.0.
  • Follows Angular best practices and patterns for dependency injection.
  • Easily customizable to fit your application’s needs.
  • Supports both standalone and multi-module Angular applications.

Installation

To install ngce-services, you can use npm. If the package is private, ensure you are logged in to your npm account with the correct permissions.

Public Installation (if the package is public):

npm install @clarium/ngce-services --save

Private Installation (if the package is private):

Make sure you have access to your organization’s private npm packages:

npm install @clarium/ngce-services --save

Also, install the necessary peer dependencies if they are not already included in your project:

npm install @angular/common @angular/core rxjs tslib --save

Getting Started

Once the package is installed, you can start using the services in your Angular application by importing the StorageService into your root module (app.module.ts) or directly in your components:

import { StorageService } from '@clarium/ngce-services';

@NgModule({
  declarations: [AppComponent],
  imports: [
    BrowserModule
  ],
  providers: [StorageService],
  bootstrap: [AppComponent]
})
export class AppModule {}

Usage

Basic Example

Here’s how to use the ngce-storage-service :

In your component:

import { StorageService } from '@clarium/ngce-services';

export class AppComponent {
  constructor(private _storage: StorageService) {}

  setData(input: string) {
    this._storage.setItem('test', input)
  }  
  getData() {
    return this._storage.getItem('test')
  }
}

In your template:

<button (click)="getData()">Fetch Data</button>

Configuring Services

You can easily configure the behavior of services :

import { Component } from '@angular/core';
import { RouterOutlet } from '@angular/router';
import { NgceComponentsModule, SnackbarService } from '@clarium/ngce-components';
import { StorageService } from '@clarium/ngce-services';

@Component({
  selector: 'app-root',
  standalone: true,
  imports: [RouterOutlet,  NgceComponentsModule],
  providers: [SnackbarService, StorageService],
  templateUrl: './app.component.html',
  styleUrl: './app.component.css'
})
export class AppComponent {
  title = 'test-app';
  constructor(private _snackbar: SnackbarService, private _storage: StorageService) {}
  submit() {
    this._storage.setItem('test','Hello from snackbar')
    this._snackbar.show(this._storage.getItem('test') || 'hello');
  }
}

Documentation

For detailed documentation and configuration options for each service, refer to the official documentation.

Included services:

  • api-service: A service for making HTTP requests.
  • http-error-handler: Handling errors on making HTTP Requests.
  • http-utility: A service for constructing URLs.
  • storage-service: Simplified access to local and session storage.
  • And many more...

Visit the documentation for the full list and examples.

License

This library is licensed under the MIT License. See the LICENSE file for more information.