Cat UI
GitHub
  • Comece por aqui
    • 1. Instalação
      • Icones
      • Bootstrap
    • 2. Aplicando Tema
    • 3. Estrutura da aplicação
    • 4. Segurança
      • OpenID (Opcional)
      • Claims (Optional)
  • Menu
    • Sidenav
    • Toolbar
    • Dropdown
    • Tab
  • Exibição de Dados
    • Datatable
    • Componentes Dinâmicos
    • Exportação e Download de Dados
      • .csv
      • .xlsx
      • Visualizar .pdf
      • Download base64
    • Chip
  • Formulário
    • Formulário Dinâmico
    • Lista de Itens
    • Campos Personalizados
    • Stepper
    • Expansive Panel
    • Filtro Sobre Demanda
  • Janelas e Alertas
    • Dialog
    • Confirm
    • Alert
    • Snackbar
    • SideWindow
    • Notifications
    • Tooltip
  • Loaders
    • Spinner
    • Loader Page
  • Botões
    • Button
  • Abstrações
    • ServiceBase
    • ComponentBase
    • CRUDComponentBase
    • FormBase
  • Guias
    • Criando uma Aplicação de CRUD
      • Criando Projeto
      • Estrutura
      • Tela de Login
      • Menu
      • Tela de Adoção
      • Serviço HTTP
      • Lista de Pets
      • Formulário de Cadastro e Edição
      • Excluir Pet
      • Conclusão
Powered by GitBook
On this page

Was this helpful?

  1. Exibição de Dados

Componentes Dinâmicos

PreviousDatatableNextExportação e Download de Dados

Last updated 2 years ago

Was this helpful?

O componente dinâmico foi criado com o objetivo de permitir a customização de certos componentes nativos do Cat UI, visando maior liberdade de customização por parte do desenvolvedor.

import { Component } from '@angular/core';
import { CatDynamicComponentDataInterface } from "@cat-ui/dynamic-component";

@Component({
  templateUrl: 'hello-world.component.html'
})
export class HelloWorldComponent implements CatDynamicComponentDataInterface {
  public data?: string;
}
<h1>{{data}}</h1>
import { NgModule } from "@angular/core";
import { ExampleComponent } from "./example.component";

@NgModule({
  declarations: [
    ExampleComponent,
    HelloWorldComponent
  ],
  imports: [
    CatDynamicComponentModule
  ]
})
export class ExampleModule {}
import { Component } from "@angular/core";
import { CatDynamicComponent } from "@cat-ui/dynamic-component";
import { HelloWorldComponent } from "./hello-world.component";

@Component({
  templateUrl: 'example.component.html'
})
export class ExampleComponent {
  component = new CatDynamicComponent(HelloWorldComponent, 'Olá Mundo!');
}
<cat-dynamic-component [component]="component"></cat-dynamic-component>

Importante

O componente que desejar incluir com o componente dinâmico, por padrão, deverá implementar a interface CatDynamicComponentDataInterface, obrigando incluir o atributo data, onde o valor que passar na declaração da classe será injetado.

Overview

CatUi
Demonstração
Logo