codehaus-components v1.0.9

codehaus-components

Pré-Requisitos para utilizar o codehaus-components:

• @angular/cdk
• @angular/material

Caso seu projeto não tenha instalado os módulos acima, execute os seguintes comandos:

$ npm install @angular/cdk

$ npm install @angular/material

Agora vamos instalar o codehaus-components:

Instale o módulo

$ npm install codehaus-components --save

Para utilizar o codehaus-components é necessário utilizar as seguintes versões:

Descrição: O loader tem como objetivo congelar a tela e mostrar o loader padrão da Dotz.

Adicione o módulo LoaderModule em seu módulo:

import { NgModule } from '@angular/core';
import { CommonModule } from '@angular/common';
import { ExampleComponent } from './example.component';
import { RouterModule } from '@angular/router';
import { exampleRoutes } from './example.routing';
import { LoaderModule } from 'codehaus-components';

@NgModule({
  declarations: [ExampleComponent],
  imports: [
     CommonModule,
     RouterModule.forChild(exampleRoutes),
     LoaderModule,
  ],
})
export class ExampleModule { }

Depois basta instanciar o loaderService no seu componente e usar as propriedades show() e hide() para manipular o loader.

Veja no exemplo a seguir:

import { Component, AfterViewInit } from '@angular/core';
import { LoaderService } from 'codehaus-components';

@Component({
  selector: 'app-home',
  templateUrl: './home.component.html',
  styleUrls: ['./home.component.scss']
})
export class HomeComponent implements AfterViewInit {

  constructor(
    private loaderService: LoaderService,
  ) {
    this.loaderService.show();
  }

  ngAfterViewInit() {
    this.loaderService.hide();
  }

Descrição: O fileUpload é um componente para subir arquivos para o front.

Adicione o módulo FileUploadModule em seu módulo:

import { NgModule } from '@angular/core';
import { CommonModule } from '@angular/common';
import { ExampleComponent } from './example.component';
import { RouterModule } from '@angular/router';
import { exampleRoutes } from './example.routing';
import { FileUploadModule } from 'codehaus-components';

@NgModule({
  declarations: [ExampleComponent],
  imports: [
     CommonModule,
     RouterModule.forChild(exampleRoutes),
     LoaderModule,
     FileUploadModule,
  ],
})
export class ExampleModule { }

Agora adicione em seu HTML o componente:

<codehaus-file-upload
  label="Envie os arquivos aqui..."
  accept="image/*"
  [multiple]="false"
  (onFileAdd)="salvarArquivos($event)"
  (onFileRemove)="AtualizarLista($event)">
</codehaus-file-upload>

Eventos:

• OnFileAdd: Quando você adiciona algum arquivo no file-upload, esse evento irá retornar a lista de todos os files[].
• OnFileRemove: Esse evento retorna a lista de files[] atualizada (sem o arquivo removido)

Veja no exemplo, um componente recebendo essas listas:

<codehaus-file-upload
  ...
  (onFileAdd)="files = $event"
  (onFileRemove)="files = $event">
</codehaus-file-upload>

FileUploadService

Limpando a lista de upload

Para limpar a lista de arquivos, utilize o file-upload-service com o método clear. Veja no exemplo abaixo:

import { fileUploadService } from 'codehaus-components';


export class yourComponent {
  
  constructor(
    private fileUploadService: fileUploadService
  ) {
    //método para limpar a lista de arquivos
    this.fileUploadService.clear();
  }
}

Descrição: Esse componente é responsável por realizar uma contagem regressiva.

Basta adicionar o módulo CountdownTimerModule e adicionar o <codehaus-countdown-timer> no html.

Veja no exemplo:

Adicionando no módulo:

import { CountdownTimerModule } from 'codehaus-components';

@NgModule({
  imports: [
    CommonModule,
    CountdownTimerModule,
  ],
  ...

No HTML:

<codehaus-countdown-timer
  [timeLeft]="19000"
  (onFinish)="refreshToken()">
</codehaus-countdown-timer>

• TimeLeft: valor em milisegundos
• onFinish: Evento quando acabar o tempo