Componentes Dinâmicos

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.

hello-world.component.ts

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;
}

hello-world.component.html

<h1>{{data}}</h1>

example.module.ts

import { NgModule } from "@angular/core";
import { ExampleComponent } from "./example.component";

@NgModule({
  declarations: [
    ExampleComponent,
    HelloWorldComponent
  ],
  imports: [
    CatDynamicComponentModule
  ]
})
export class ExampleModule {}

example.component.ts

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!');
}

example.component.html

<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