Modal

Para que o serviço Modal funcione corretamente, é necessário seguir alguns pequenos passos.

Componente#

O Modal é dividido em duas estruturas: Serviço e Componente e para que funcione corretamente, ambas devem estar implementadas em seu código.

Começaremos com o com ponente, que é a base para o bom funcionamento: Inclua o a tag abaixo na página que chamará a modal, preencha os atributos e, entre as tags poderá adicionar qualquer conteúdo que deseje. É comum na área do content (entre as tags), includir todas as variações de conteúdo permitidas na tela e via variavel definir qual será exibida ou oculta.

Atributos da tag#

AtributoInput/OutputTipoObrigatórioValores padrões
cancelClick@OutputfunctionNão-
confirmClick@OutputfunctionSim-
cancelButtonText@InputStringSim-
confirmButtonText@InputStringSim-
cancelButtonText e confirmButtonText

Estes atributos devem ser preenchidos com o texto que será exibido nos botões

cancelClick e confirmClick

Os outputs são necessário para informar o que os botões de confirmação e cancelamento devem fazer. Para que a modal seja fechada após clicar neles, chame o método do serviço: close().

<ugl-modal
(cancelClick)="cancel()"
(confirmClick)="confirm()"
[cancelButtonText]="'Cancel'"
[confirmButtonText]="'Confirm'">
<p>Text</p>
</ugl-modal>
cancel() {
this.modal.closeModal();
}
confirm() {
this.modal.closeModal();
}

O serviço#

Após adicionar a tag contendo os atributos, é hora de implementar o serviço e executar a abertura da modal. A modal oferece 4 métodos de abertura, ambos seguindo um padrão muito semelhantes:

this.modal.<type>(<title>, <message>, <Has Icon?>);

Warning#

this.modal.error(
'Error',
'Lorem ipsum dolor sit amet consectetur adipisicing elit. Beatae, rem.',
true
);

img

Error#

this.modal.warning(
'Warning',
'Lorem ipsum dolor sit amet consectetur adipisicing elit. Beatae, rem.',
true
);

img

Success#

this.modal.success(
'Success',
'Lorem ipsum dolor sit amet consectetur adipisicing elit. Beatae, rem.',
true
);

img

Info#

this.modal.info(
'Info',
'Lorem ipsum dolor sit amet consectetur adipisicing elit. Beatae, rem.',
true
);

img