italia / italia/design-angular-kit

[Feat] Aggiunta di input al componente <it-modal>

Open
#722 0 comments 0 reactions 0 assignees View on GitHub
Dominant language
TypeScript
Stars
86
Forks
45
PR merge metrics
No merged PRs in 30d

Description

### Esiste già una discussione sul tema che ti interessa, o su un tema simile?

- [x] Ho verificato e non esiste

### Versione della libreria

v21.0.0

### Cosa

Aggiungere i seguenti input a ``:
- title
- description
- icon

In modo da poter passare da questo
```html


Questo è un messaggio di notifica più esteso del solito

In questo caso viene fornito solo un pulsante di conferma della modale.


...

```
a questo
```html


...

```

### Perché

Renderebbe il componente input oriented

### Contesto

_No response_

### Altro

I **content projection** devono comunque rimanere disponibili. Al momento ho creato un wrapper per facilitare la creazione di modali
```ts
@Component({
selector: 'app-modal',
imports: [ItModalComponent],
template: `


{{ modalTitle() }}



{{ description() }}





`,
styles: ``,
})
export class ModalComponent {
readonly modalTitle = input.required();
readonly description = input();
readonly size = input<'sm' | 'lg' | 'xl'>();
readonly scrollable = input(false, { transform: booleanAttribute });

protected readonly hiddenEvent = output();

private readonly modal = viewChild.required('modal');

show(): void {
this.modal().show();
}
}
```

Contributor guide

Open the contributing guide

Assessment

This issue has not been assessed yet.

Get new issues in your inbox

A short digest of beginner-friendly GitHub issues.