# ng-ui-chat

> Simple Angular chat library

Latest version **1.0.4** (published 2018-10-23) · MIT license · 0 weekly downloads

## Install

```sh
npm install ng-ui-chat
pnpm add ng-ui-chat
yarn add ng-ui-chat
bun add ng-ui-chat
```

## Health

**Score 25/100 (F)** — status: abandoned.

Positive: has types; no vulnerabilities; high quality score.

Warnings: low downloads; no esm support.

Negative: abandoned; low maintenance score.

## Facts

| | |
|---|---|
| Version | 1.0.4 |
| Published | 2018-10-23 |
| First published | 2018-10-20 |
| Weekly downloads | 0 |
| License | MIT |
| TypeScript types | bundled |
| Module format | CommonJS |
| Dependencies | 11 |
| Unpacked size | 110.2 KB |
| Known vulnerabilities | 0 |
| Install scripts | no |
| Maintainers | simonghrt |

## Links

- npm: https://www.npmjs.com/package/ng-ui-chat
- npm.io page: https://npm.io/package/ng-ui-chat

## Dependencies (11)

- [rxjs](https://npm.io/package/rxjs.md) >=5.1.0
- [core-js](https://npm.io/package/core-js.md) >=2.4.1
- [zone.js](https://npm.io/package/zone.js.md) >=0.7.6
- [@angular/core](https://npm.io/package/@angular/core.md) >=2.4.0
- [@angular/http](https://npm.io/package/@angular/http.md) >=2.4.0
- [@angular/forms](https://npm.io/package/@angular/forms.md) >=2.4.0
- [@angular/common](https://npm.io/package/@angular/common.md) >=2.4.0
- [@angular/router](https://npm.io/package/@angular/router.md) >=3.4.0
- [@angular/compiler](https://npm.io/package/@angular/compiler.md) >=2.4.0
- [@angular/platform-browser](https://npm.io/package/@angular/platform-browser.md) >=2.4.0
- [@angular/platform-browser-dynamic](https://npm.io/package/@angular/platform-browser-dynamic.md) >=2.4.0

## Recent versions

- 1.0.4 (latest) — 2018-10-23
- 1.0.3 — 2018-10-23
- 1.0.2 — 2018-10-23
- 1.0.1 — 2018-10-21
- 1.0.0 — 2018-10-20

## README

# NgChat

Simple Angular chat library

<img src="screenshot.gif" alt="list" width="270"/>

## Getting started

Create an Angular project with Angular CLI

Install package from npm

``` bash
npm install ng-ui-chat --save
```

Include module in your application

``` js
import { NgModule } from '@angular/core';
import { BrowserModule } from '@angular/platform-browser';
import { ChatModule } from 'ng-ui-chat';

@NgModule({
  imports: [
    BrowserModule,
    ChatModule
  ],
  declarations: [ AppComponent ],
  exports: [ AppComponent ]
})
export class AppModule {}
```

## Examples

In your html file :

``` html
    <chat [messages]="messages" (inputSent)="onInputReceived($event)"></chat>
```

In your ts file :

``` js
import { Component } from '@angular/core';

@Component({
  selector: 'app-root',
  templateUrl: './app.component.html',
  styleUrls: ['./app.component.css']
})
export class AppComponent {
    messages = [];

    onInputReceived(input: string) {
        const newMessage = {"text": input, "date":"", "userOwner":true};
        this.messages.push(newMessage);
        const newAnswer = {"text": "You said : " + input, "date": "", "userOwner": false};
        this.messages.push(newAnswer); 
    }
}
```

## Options

Several options are available (they all have default values) :

``` html
<chat [messages]="messages" [colorBackRight]="'#DD0000'" [colorFontRight]="'#DDDDDD'"
    [colorBackLeft]="'#00DD00'" [colorFontLeft]="'#DDDDDD'" (inputSent)="onInputReceived($event)"
    [width]="'250px'" [height]="'500px'" [border]="'1px solid black'"></chat>
```

## Author

[Simon Gheeraert](https://github.com/simonghrt)

## TODO

- [] Add tests
- [] Add examples
- [] Add date in messages
- [] More available options
- [] Make a general option object that will be passed to the element
- [] Use ng-packagr for publication
- [] Use more recent version of Angular
- [] Improve input design

---
_Source: https://npm.io/package/ng-ui-chat · Machine-readable twin of the npm.io package page. Health data is recomputed on every publish._