Criando um Sistema de Mensagens Reutilizáveis com Angular Material
Vamos descobrir como criar um simples sistema de mensagem para exibir em suas aplicações Angular utilizando o Material Design. O objetivo é fornecer uma base sólida para a implementação de mensagens, aproveitando as facilidades oferecidas pelo Angular Material para uma experiência de usuário consistente, agradável e reutilizável em toda a aplicação.
Pré-requisitos
Antes de começar, é importante garantir que tenha as ferramentas necessárias instaladas no ambiente de desenvolvimento.
- Node.js e NPM: Certifique-se de ter instalado o Node.js e do NPM em sua máquina. Neste artigo eu uso a versão 20.11.1 do Node.js e 10.2.4 do NPM.
- Angular CLI: Utilizaremos o Angular CLI para gerar e gerenciar nosso projeto Angular. Instale-o globalmente utilizando o seguinte comando:
npm install -g @angular/cliCriando o Projeto
Vamos começar criando um novo projeto Angular. Abra o terminal no diretório onde ficara o projeto e execute o seguinte comando:
ng new nome-do-projetoOBS: Pode escolher qualquer opção durante a criação do projeto, pois não afetara a implementação do serviço de mensagem diretamente.
Adicionando o Pacote do Angular Material
O Angular possui um pacote chamado @angular/material, que fornece uma ampla gama de componentes e estilos baseados no Material Design do Google. Para adicionar este pacote ao nosso projeto, basta executar o seguinte comando:
ng add @angular/materialCriando os Arquivos
Agora que temos nosso projeto Angular configurado e o pacote do Angular Material adicionado, vamos criar os arquivos necessários para nosso serviço de mensagem. Usando o Angular CLI nós conseguimos gerar automaticamente os arquivos necessários.
1. Arquivo de Interface:
ng generate interface message/interface/message2. Arquivo de Serviço:
ng generate service message/service/message3. Arquivo de Componente:
ng generate component message/component/messageImplementação dos Arquivos
Neste ponto, temos os arquivos necessários gerados. Agora, vamos nos concentrar na implementação de cada um deles.
Interface
A interface de mensagem definirá a estrutura dos objetos de mensagem que nosso aplicativo utilizará. Isso nos ajudará a manter consistência e clareza em todo o código. No exemplo abaixo está uma interface bem simples, com apenas um valor que representa a mensagem a ser exibida, você pode alterar da forma que quiser para deixar mais completo.
export interface Message {
message: string;
}Componente
Este componente será responsável por exibir as mensagens na interface do usuário. Podemos personalizá-lo de acordo com as necessidades do projeto e integrá-lo facilmente com o Material Design para obter um visual moderno e atraente.
- Arquivo: message.component.ts
import { Component, inject } from '@angular/core';
import {
MatSnackBarAction,
MatSnackBarActions,
MatSnackBarLabel,
MatSnackBarRef,
MAT_SNACK_BAR_DATA
} from '@angular/material/snack-bar';
import { MatButtonModule } from '@angular/material/button';
import { Message } from '../../interface/message';
@Component({
selector: 'app-message',
standalone: true,
imports: [
MatButtonModule,
MatSnackBarLabel,
MatSnackBarActions,
MatSnackBarAction,
],
templateUrl: './message.component.html',
styleUrl: './message.component.scss',
})
export class MessageComponent {
protected mensagemRef = inject(MatSnackBarRef);
protected message: Message = inject(MAT_SNACK_BAR_DATA);
}2. Arquivo: message.component.html
<span class="message" matSnackBarLabel> {{ message.message }} </span>
<span matSnackBarActions>
<button
mat-button
matSnackBarAction
(click)="mensagemRef.dismissWithAction()">
Yes
</button>
<button
mat-button matSnackBarAction
(click)="mensagemRef.dismiss()">
No
</button>
</span>3. Arquivo: message.component.scss
:host {
display: flex;
}
.message {
color: hotpink;
}Service
Esta service será responsável por gerenciar a lógica relacionada às mensagens desta aplicação.
import { Injectable, inject } from '@angular/core';
import { Message } from '../interface/message';
import { MatSnackBar } from '@angular/material/snack-bar';
import { MessageComponent } from '../component/message/message.component';
@Injectable({
providedIn: 'root',
})
export class MessageService {
protected messageBar = inject(MatSnackBar);
public openMessageBar(message: Message) {
const messageRef = this.messageBar.openFromComponent(
MessageComponent,
{
duration: 5000,
verticalPosition: 'bottom',
horizontalPosition: 'center',
data: message,
}
);
return messageRef;
}
}Nesta service é criado uma função para exibir a mensagem. O método ‘openFromComponent’ do MatSnackBar possuí algumas configurações extras como duração da mensagem, posição na tela e dados que poderão ser usados no componente de mensagem.
Resultado
Para ver se está funcionando, implemente o MessageService e Message Interface no componente que deseja com um botão para exibir a mensagem:
import { Component, inject } from '@angular/core';
import { MessageService } from './message/service/message.service';
import { Message } from './message/interface/message';
@Component({
selector: 'app-root',
standalone: true,
imports: [],
template: `
<button (click)="openMessage(this.actionMessage)">Open Message</button>
`,
styles: ''
})
export class AppComponent {
protected messageService = inject(MessageService);
protected actionMessage: Message = {
message: 'Make an Action? '
}
openMessage(message: Message) {
const messageRef = this.messageService.openMessageBar(message);
messageRef.afterOpened().subscribe(() => {
console.log('The Message has Opened!');
});
messageRef.onAction().subscribe(() => {
console.log('An Action as Activated!');
});
messageRef.afterDismissed().subscribe(() => {
console.log('The Message has Closed!');
});
}
}O método ‘afterOpened’ é acionado quando a mensagem é exibida na tela, ‘onAction’ é acionado quando o usuário pressiona o botão de ação do componente e o método ‘afterDismissed’ é disparado quando a mensagem para de ser exibida, seja por tempo ou por ação do usuário.
Conclusão
Seguindo os passos acima, você aprendeu como criar um serviço de mensagem no Angular, utilizando o Material Design para uma experiência visualmente agradável e reutilizável em qualquer parte do projeto.
Informações Adicionais
Quero deixar claro que não sou especialista no assunto. Se cometi algum erro ou passei informações incorretas, fique à vontade para corrigir. Também estou aberto a sugestões de melhoria ou qualquer feedback que me ajude a melhorar.
