# 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.

{% tabs %}
{% tab title="hello-world.component.ts" %}

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

{% endtab %}

{% tab title="hello-world.component.html" %}

```html
<h1>{{data}}</h1>
```

{% endtab %}

{% tab title="example.module.ts" %}

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

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

{% endtab %}

{% tab title="example.component.ts" %}

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

{% endtab %}

{% tab title="example.component.html" %}

```html
<cat-dynamic-component [component]="component"></cat-dynamic-component>
```

{% endtab %}
{% endtabs %}

{% hint style="info" %}
**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.
{% endhint %}

### Overview

{% embed url="<https://cat-ui.igordrangel.com.br/components/dynamic-components>" %}
Demonstração
{% endembed %}