Hyper-jobs-chat-consultation-component NPM

hyper-jobs-chat-consultation-component

Instalação

Para instalar esta biblioteca, execute:

$ npm install hyper-jobs-chat-consultation-component --save

Consumindo sua biblioteca

Uma vez que você publicou sua biblioteca para npm, você pode importar sua biblioteca em qualquer aplicativo angular executando:

$ npm install hyper-jobs-chat-consultation-component

depois importe em seu Angular AppModule:

import { BrowserModule } from '@angular/platform-browser';
import { NgModule } from '@angular/core';

import { AppComponent } from './app.component';

// Importe seu módulo de rotas
import { AppRoutingModule } from './app.routing.module';
// Importe a biblioteca hyper-jobs-chat-consultation-component
import { ChatBoxConsultationModule } from 'hyper-jobs-chat-consultation-component';

@NgModule({
  declarations: [
    AppComponent
  ],
  imports: [
    BrowserModule,

    // Importe o módulo ChatBoxConsultationModule passando o environment para o forRoot 
    ChatBoxConsultationModule.forRoot(environment),
    // Crie ou use seu módulo de rotas existente
    AppRoutingModule
  ],
  providers: [],
  bootstrap: [AppComponent]
})
export class AppModule { }

Uma vez que sua biblioteca é importada, você pode usar seus componentes, diretrizes e pipes em seu aplicativo Angular:

<h1>Exemplo 1</h1>
<chatbox-consultation [enableChat]="true" [enableConsultation]="true"></chatbox-consultation>
<hr>
<h1>Exemplo 2</h1>
<!--Um parametro opcional [chatUserSelected]="10" com o id do usuário pode ser passado para que o mesmo ja apareça selecionado-->
<chatbox-consultation [enableChat]="true" [enableConsultation]="true" [chatUserSelected]="10"></chatbox-consultation>

Folhas de Estilo(CSS)

É necessário adicionar dois css no arquivo index.html dando um identificador para cada um:

<link id="css_hj_ui" rel="stylesheet" href="">

No arquivo app.component.ts verifico qual ambiente estou utilizando e mudo a url dos css's:

import { Component, OnInit, Inject } from '@angular/core';
import { DOCUMENT } from '@angular/platform-browser';
import { environment } from './../environments/environment';
   
constructor(
    @Inject(DOCUMENT) private document
  )
  { }
ngOnInit() {
  this.document.getElementById('css_hj_ui').setAttribute('href', environment.assets + 'css/hj-ui.css');
}