Olá, pessoal! Nessa vigésima sexta aula do treinamento, iremos trabalhar com a visibilidade dos botões.
Inicialmente, ao carregar o formulário, apenas o botão Cadastrar deve ficar visível. Os botões Alterar, Remover e Cancelar devem iniciar ocultos. Posteriormente, ao selecionar um aluno, o botão Cadastrar é ocultado e os demais tornam-se visíveis.
Veja abaixo as implementações realizadas no arquivo principal.ts:
import { Component } from '@angular/core';
@Component({
selector: 'app-principal',
imports: [ReactiveFormsModule],
templateUrl: './principal.html',
styleUrl: './principal.css',
})
export class Principal {
// Visibilidade dos botões
btnCadastrar = true;
}
Podemos implementar a estrutura do formulário que está no arquivo principal.html:
<!-- Formulário -->
<form>
<input type="hidden">
<input type="text" placeholder="Nome" class="form-control">
<input type="number" placeholder="Nota 1" class="form-control">
<input type="number" placeholder="Nota 2" class="form-control">
@if (btnCadastrar) {
<input type="button" class="btn btn-primary">
} else {
<input type="button" class="btn btn-primary">
<input type="button" class="btn btn-primary">
<input type="button" class="btn btn-primary">
}
</form>
Abaixo compartilho nossa aula no YouTube, onde explico como implementar essa camada no projeto: