Skip to content

Commit

Permalink
Merge remote-tracking branch 'origin/development' into development
Browse files Browse the repository at this point in the history
# Conflicts:
#	README.md
  • Loading branch information
pavankjadda committed Jan 30, 2024
2 parents d77cfe1 + c6b0dd6 commit ce93c20
Showing 1 changed file with 46 additions and 50 deletions.
96 changes: 46 additions & 50 deletions README.md
Original file line number Diff line number Diff line change
Expand Up @@ -2,7 +2,10 @@

<p align="center">

![build](https://github.com/stevermeister/ngx-cookie-service/workflows/CI/badge.svg?branch=master)


[![Build](https://github.com/stevermeister/ngx-cookie-service/actions/workflows/ci.yml/badge.svg)](https://github.com/stevermeister/ngx-cookie-service/actions/workflows/ci.yml)
![npm bundle size](https://img.shields.io/bundlephobia/minzip/ngx-cookie-service)
<a href="https://www.npmjs.com/ngx-cookie-service">
<img src="https://img.shields.io/npm/v/ngx-cookie-service.svg?logo=npm&logoColor=fff&label=NPM+package&color=limegreen" alt="Ngx Cookie Service on npm" />
</a>
Expand All @@ -14,52 +17,26 @@
</p>

Angular service to read, set and delete browser cookies. Originally based on
the [ng2-cookies](https://www.npmjs.com/package/ng2-cookies) library. The experienced team
behind [Studytube](https://www.studytube.nl/) will take care of our cookie service from now on.
the [ng2-cookies](https://www.npmjs.com/package/ng2-cookies) library. This service is lightweight, and its bundle size is **1.3 Kb** to ensure fast loading times and optimal performance.

## Installation

```bash
npm install ngx-cookie-service --save
npm i ngx-cookie-service

# or

yarn add ngx-cookie-service
```

## Usage

Add the cookie service to your `app.module.ts` as a provider:

```typescript
import {CookieService} from 'ngx-cookie-service';

@NgModule({
...
providers:[CookieService],
...
})

export class AppModule {
}
```

Then, import and inject it into a constructor:
## Demo

```typescript
constructor(private cookieService: CookieService)
{
this.cookieService.set('Test', 'Hello World');
this.cookieValue = this.cookieService.get('Test');
}
```
https://stackblitz.com/~/github.com/pavankjadda/ngx-cookie-service-demo

That's it!

### Angular 14+
## Usage

1. Angular 14 introduced support for standalone components.
If you are using just standalone components, you can import the service directly into the component
1. In standalone components, import the CookieService directly into the component

```typescript
import { CookieService } from 'ngx-cookie-service';
Expand All @@ -72,8 +49,8 @@ That's it!
})
export class HelloComponent {
constructor(private cookieService: CookieService) {
this.cookieService.set('Test', 'Hello World');
this.cookieValue = this.cookieService.get('Test');
this.cookieService.set('token', 'Hello World');
console.log(this.cookieService.get('token'));
}
}
```
Expand All @@ -93,11 +70,36 @@ That's it!
cookieService = inject(CookieService);

constructor() {
this.cookieService.set('Test', 'Hello World');
this.cookieValue = this.cookieService.get('Test');
this.cookieService.set('token', 'Hello World');
console.log(this.cookieService.get('token'));
}
}
```
### Angular 13 or below
Add the cookie service to your `app.module.ts` as a provider:

```typescript
import {CookieService} from 'ngx-cookie-service';

@NgModule({
...
providers:[CookieService],
...
})

export class AppModule {
}
```

Then, import and inject it into a constructor:

```typescript
constructor(private cookieService: CookieService)
{
this.cookieService.set('token', 'Hello World');
console.log(this.cookieService.get('token'));
}
```

## Server Side Rendering

Expand All @@ -119,7 +121,7 @@ Only install `ngx-cookie-service-ssr` library (and skip `ngx-cookie-service`) fo
available in SSR because `document` object is not available. To overcome this, navigate to `server.ts` file in your
SSR
project, and replace the following code

```typescript
server.get('*', (req, res) => {
res.render(indexHtml, { req, providers: [{ provide: APP_BASE_HREF, useValue: req.baseUrl }] });
Expand All @@ -129,12 +131,14 @@ Only install `ngx-cookie-service-ssr` library (and skip `ngx-cookie-service`) fo
with this

```typescript
import { REQUEST as SSR_REQUEST } from "ngx-cookie-service-ssr";

server.get('*', (req, res) => {
res.render(indexHtml, {
req,
providers: [
{ provide: APP_BASE_HREF, useValue: req.baseUrl },
{ provide: 'REQUEST', useValue: req },
{ provide: SSR_REQUEST, useValue: req },
{ provide: 'RESPONSE', useValue: res },
],
});
Expand All @@ -146,22 +150,14 @@ server.get('*', (req, res) => {
cookies in SSR. Then proceed to use `ngx-cookie-service` as usual.
4. See the [sample repo](https://github.com/pavankjadda/angular-ssr-docker) for more details.

## Demo

https://stackblitz.com/edit/angular-ivy-1lrgdt?file=src%2Fapp%2Fapp.component.ts

## Supported Versions

`ViewEngine` support has been removed on 13.x.x. For Angular versions 13.x.x or later use the latest version of the
library. For versions <=12.x.x, use 12.0.3 version
We follow angular [LTS versions](https://angular.dev/reference/versions#actively-supported-versions). The latest version of the library supports Angular 17.x.x. Angular 14.x.x or below is not supported.

| Angular Version | Supported Version |
| ---------------------- | ----------------- |
|------------------------|-------------------|
| 17.x.x | 17.x.x |
| 16.x.x | 16.x.x |
| 15.x.x | 15.x.x |
| 14.x.x | 14.x.x |
| 13.x.x | 13.x.x |
| <=12.x.x (View Engine) | 12.0.3 |

# API

Expand Down

0 comments on commit ce93c20

Please sign in to comment.