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