0

Componentizando um botão (Básico)

Aluizio Junior
Aluizio Junior

1 - Vamos criar um componente que será o nosso botão componentizado:

ng generate component botao-componente


Este será o código do botao-componente.componente.ts:


import { Component, EventEmitter, Input, OnInit, Output } from '@angular/core';

@Component({
selector: 'app-botao-componente',
templateUrl: './botao-componente.component.html'
})
export class BotaoComponenteComponent implements OnInit {

constructor() { }

@Input() rotuloGenerico!: string;
@Input() tipoGenerico!: string;
@Output() eventoGenerico = new EventEmitter<any>();

evento(){
this.eventoGenerico.emit();
}
ngOnInit(): void {
}
}


Nosso botão vai receber um rótulo, um tipo e terá uma função simples no seu OnClick.


2 – O botao-componente.componente.html vai ficar assim:


<button 
[type]="tipoGenerico"
(click)="evento()"> 
{{rotuloGenerico}} 
</button>


O componente já está pronto para ser reutilizado.

Note que o atributo do botão foi passado com colchetes, a ação com parênteses e o label com interpolação.


3 – Vamos criar um outro componente e nele vamos criar dois botões:

ng generate component home.


O código da home.component.ts vai ficar da seguinte maneira:

import { Component, OnInit } from '@angular/core';

@Component({
selector: 'app-home',
templateUrl: './home.component.html',
styleUrls: ['./home.component.css']
})
export class HomeComponent implements OnInit {

constructor() { }

enviar(){
alert("Enviando...");
}

limpar() {
alert("Limpando...");
}

ngOnInit(): void {
}
}


Nada demais no código acima. Somente criamos duas funções para fins de testes.


4 – No home.component.html vamos usar o seguinte código:


<app-botao-componente
tipoGenerico="submit"
rotuloGenerico="Enviar"
(eventoGenerico)="enviar()"
>
</app-botao-componente>



Nada demais por aqui… 


Por fim, chame o <app-home></app-home> no app.component.html e teste o código.


Tenho um desenho aqui que pode servir para que tenha uma visão um pouco mais global do que está se passando nessa componentização que foi feita:






Recomendação de leitura:

https://angular.io/guide/inputs-outputs


Até mais!

0
0

Comentários (0)

Entusiasta de Tecnologias Web

Brasil