Fade in / fade out effect at Angular 7

Question

I need to make a form disappear gradually by clicking a button, how can I insert this effect using Angular 7 ngIf?

Answer 1

I use an ngTemplate to open a modal inside the component, so the fade in/out effect works, if I open the modal in another component, the effect does not happen.

I don’t know if my code will solve your problem, but I’ll leave it here to help you.

I use Formgroup to manage form information in the.ts component.

html component.

<a (click)="goBack()" class="btn btn-warning btn-md m-3">
  <span class="glyphicon glyphicon-backward"></span> &lt;&lt; Voltar
</a>
<a class="btn btn-success m-3 float-right" [routerLink]="['new']">Criar Usuário Permissão</a>
<div class="m-5">
    <h3>Usuário Permissões </h3>
</div>

<table class="table table-light mx-3 text-secondary">
  <thead class="thead-light">
    <tr>
      <th>ID</th>
      <th>Usuário</th>
      <th>Perfil</th>
      <th>Setor</th>
      <th>Funcionalidade</th>
      <th>Permissão</th>
      <th>Ações</th>
    </tr>
  </thead>
  <tbody>
    <tr>
      <td></td>
    </tr>
  </tbody>
  <tfoot>
    <tr *ngFor="let up of usuarioPermissoes">
      <th>{{ up.id_usuario_permissao }}</th>
      <th>{{ up.login }}</th>
      <th>{{ up.nome_perfil }}</th>
      <th>{{ up.nome_setor }}</th>
      <th>{{ up.nome_funcionalidade }}</th>
      <ng-container *ngIf="up.permissao == 1; else elsePermissao">
        <th>Sim</th>
      </ng-container>
      <ng-template #elsePermissao>
        <th>Não</th>
      </ng-template>

      <th><button class="btn btn-sm btn-info mr-2" (click)="onEdit(up.id_usuario_permissao)">Editar</button>
        <button class="btn btn-sm btn-danger" (click)="onDelete(up.id_usuario_permissao)">Deletar</button>
      </th>
    </tr>
  </tfoot>
</table>

<ng-template #deleteModal>
  <div class="modal-body text-center">
    <p>Tem certeza que quer deletar?</p>
    <button type="button" class="btn btn-default" (click)="onConfirmDelete()">Sim</button>
    <button type="button" class="btn btn-primary" (click)="onDeclineDelete()">Não</button>
  </div>
</ng-template>

<ng-template #editModal>

  <form [formGroup]="usuarioPermissoesForm">
    <div class="modal-header">
      <h4 class="modal-title">Editar</h4>
      <button type="button" class="close" data-dismiss="modal" (click)="onDeclineEdit()">&times;</button>
    </div>

    <!-- Modal body -->
    <div class="modal-body">
      <div class="form-group">
        <label for="usuario">Usuario: </label>
        <input type="text" id="usuario" class="form-control" formControlName="login" [readonly]="true">
      </div>

      <div class="form-group">
        <label for="perfil">Perfil: </label>
        <input  id="perfil" class="form-control"  formControlName="nome_perfil" [readonly]="true">
      </div>

      <div class="form-group">
        <label for="setor">Setor: </label>
        <input type="text" id="setor" class="form-control" formControlName="nome_setor" [readonly]="true">
      </div>

      <div class="form-group">
        <label for="funcionalidade">Funcionalidade: </label>
        <input type="text" id="funcionalidade" class="form-control" formControlName="nome_funcionalidade" [readonly]="true">
      </div>

      <div class="form-group">
          <label for="permissao">Permissão: </label>
          <div class="form-check">
            <input class="form-check-input" type="radio" name="optPermissao" id="checkinfo_1" value="1" [checked]="usuarioPermissoesForm.controls['permissao'].value == 1"> Sim
          </div>
          <div class="form-check">
            <input class="form-check-input" type="radio" name="optPermissao" id="checkinfo_0" value="0" [checked]="usuarioPermissoesForm.controls['permissao'].value == 0"> Não
          </div>
      </div>
    </div>

    <!-- Modal footer -->
    <div class="modal-footer">
      <button type="button" class="btn btn-default" (click)="onConfirmEdit()">Sim</button>
      <button type="button" class="btn btn-primary" (click)="onDeclineEdit()">Não</button>
    </div>
  </form>

</ng-template>

ts component.

import { Component, OnInit, ViewChild } from '@angular/core';
import { BsModalService, BsModalRef } from 'ngx-bootstrap/modal';
import { FormBuilder, FormGroup, Validators } from "@angular/forms";
import { Router } from "@angular/router";
import { Location } from '@angular/common';

import { UsuarioPermissoes } from '../../interface/usuario-permissoes';
import { UsuarioPermissoesService } from '../../services/usuario-permissoes.service';

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

  public usuarioPermissoes: UsuarioPermissoes[];
  usuarioPermissao: UsuarioPermissoes;
  usuarioPermissoesForm: FormGroup;
  deleteModalRef: BsModalRef;
  editmodalRef: BsModalRef;
  deleteId: number;
  editId: number;
  auxSplitFunc: any;

  @ViewChild('deleteModal') deleteModal;
  @ViewChild('editModal') editModal;


  constructor(private usuarioPermissoesService: UsuarioPermissoesService,
              private bsModalService: BsModalService,
              private router: Router,
              private formBuilder: FormBuilder,
              private location: Location,) { }

  ngOnInit() {
    this.getList();

    this.usuarioPermissoesForm = this.formBuilder.group({
      id_usuario_permissao: [null],
      id_setor: [null, Validators.required],
      nome_setor: [null, Validators.required],
      id_perfil: [null, Validators.required],
      nome_perfil: [null, Validators.required],
      id_usuario: [null, Validators.required],
      login: [null, Validators.required],
      id_funcionalidade: [null, Validators.required],
      nome_funcionalidade: [null, Validators.required],
      permissao: [null],


    });

  }

  getList() {
    this.usuarioPermissoesService.getList().subscribe(
      (usuarioPermissoes: UsuarioPermissoes[]) => {this.usuarioPermissoes = usuarioPermissoes},
      (error) => {console.log(error); }
    );
  }

  onDelete(id: number) {
    this.deleteId = id;
    this.deleteModalRef = this.bsModalService.show(this.deleteModal, {class: 'modal-sm'});
  }
  onConfirmDelete() {
    this.delete(this.deleteId);
    this.deleteModalRef.hide();
  }
  onDeclineDelete() {
    this.deleteModalRef.hide();
  }
  private delete(id: number) {
    this.usuarioPermissoesService.delete(id).subscribe(
      (response) => {console.log(response); this.getList(); },
      (error) => {console.log(error); }
    );
  }

  onEdit(id: number) {
    this.editId  = id;
    this.editmodalRef = this.bsModalService.show(this.editModal);
    this.usuarioPermissoesService.getId(id).subscribe(
      (usuarioPermissao) => {this.updateForm(usuarioPermissao); }
    );
  }
  private updateForm(item) {
    this.usuarioPermissoesForm.patchValue({
      id_usuario_permissao: item[0].id_usuario_permissao,
      id_usuario: item[0].id_usuario,
      login: item[0].login,
      id_setor:  item[0].id_setor,
      nome_setor: item[0].nome_setor,
      id_perfil:  item[0].id_perfil,
      nome_perfil: item[0].nome_perfil,
      id_funcionalidade: item[0].id_funcionalidade,
      nome_funcionalidade: item[0].nome_funcionalidade,
      permissao: item[0].permissao
    });
  }
  onConfirmEdit() {
    const auxPerm:any = document.querySelectorAll('input[name="optPermissao"]:checked');

    auxPerm.forEach(x => {
      this.auxSplitFunc = x.id.split('_',2);
      this.usuarioPermissoesForm.patchValue({

        permissao: this.auxSplitFunc[1]
      });
    });

    this.usuarioPermissoesService.update(this.usuarioPermissoesForm.value).subscribe(
      () => {this.getList(); }
    );
    this.editmodalRef.hide();
  }
  onDeclineEdit() {
    this.editmodalRef.hide();
  }

  goBack() {
    this.location.back();
  }
}