Hide modal component at Angular 7

Question

I inserted in my project a modal of Angular Material I would like that instead of it to close when I click the close button, it would be hidden.

That’s possible?

Follows my-dialog.component.ts

import {Component, OnInit, Inject} from '@angular/core';
import {MatDialog, MatDialogRef, MAT_DIALOG_DATA} from '@angular/material';
import {MatCheckboxModule} from '@angular/material/checkbox';
import * as $ from 'jquery';


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


  constructor(
    public dialogRef: MatDialogRef<MyDialogComponent>,
    @Inject(MAT_DIALOG_DATA) public data: any) {}
  

  ngOnInit() {
    $('.enter,.buy').on('click',function(e){
      event.preventDefault();
    });
  }

  save(e){
    e.preventDefault();
    this.dialogRef.close("IT WAS SAVED");
  }

  

}

And header.component.ts from where the modal is called:

import { Component, OnInit } from '@angular/core';
import * as $ from 'jquery';
import { Output, EventEmitter } from '@angular/core';
import {MatDialog} from '@angular/material';
import { MyDialogComponent } from '../my-dialog/my-dialog.component';
import { DialogTestComponent } from '../dialog-test/dialog-test.component';

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

  constructor(public dialog: MatDialog) {}

  @Output() buttonClick = new EventEmitter()
  enable:boolean = true;

  displayBanner(){
    this.enable = this.enable == false ? true : false;
    this.buttonClick.emit(this.enable);
  }


  ngOnInit() {
    $(document).ready(function(){
      $(document).on('mouseenter', '.menu li', function() {
        $(this).children('ul').stop(true,true).slideDown(150);
      });
      $(document).on('mouseleave', '.menu li', function() {
        $(this).children('ul').stop(true,true).slideUp(150);
      });
      $(document).on('click', '.list-courses',function(){
        $('.default').fadeOut(function(){
          $('.courses').fadeIn();
        });
      });
      $(document).on('click', '.list-plans', function(){
        $('.default').fadeOut(function(){
          $('.plans').fadeIn();
        });
      });
      $(document).on('click','.list-my',function(){
        $('.default').fadeOut(function(){
          $('.my').fadeIn();
        });
      });
      $('.back-courses').on('click', function(){
        $('.courses').fadeOut(function(){
          $('.default').fadeIn();
        });
      });
      $('.back-plans').on('click',function(){
        $('.plans').fadeOut(function(){
          $('.default').fadeIn();
        });
      });
      $('.back-my').on('click',function(){
        $('.my').fadeOut(function(){
          $('.default').fadeIn();
        });
      });

      $('.mobile-menu, .courses li, .plans li').on('click',function(){
        $('.mobile-menu').toggleClass('actived');
        $('.panel').slideToggle();
        if($('.courses').is(':visible')){
          $('.courses').fadeOut(function(){
            $('.default').fadeIn();
          });
        } if($('.plans').is(':visible')) {
          $('.plans').fadeOut(function(){
            $('.default').fadeIn();
          });
        }
      });
    });
  }

  showItem = true;

  openDialog(): void {
    const dialogRef = this.dialog.open(MyDialogComponent, {
      width: '360px',
    });

    dialogRef.afterClosed().subscribe(result => {
      console.log('The dialog was closed');
      console.log(result);
      //this.buttonClick.emit(this.enable=false);
      this.displayBanner () 
      this.showItem = false;
    });
  }

  openDialog2(): void {
    const dialogRef2 = this.dialog.open(DialogTestComponent, {
      width: '360px',
    });
  }

  getOut(){
    this.displayBanner ()
    this.showItem = true;
  }
  

}