Submit in a "form" component hidden div in another component

I have two components, one (formNewPost) inside another (container-posts). I would like to know if it is possible to use HostBinding and HostListener in this case.

Follow the code ...

container-posts.component.html

<div class="row" id="formPost" #showFormNewPost="bs-collapse" [collapse]="isOpen">
      <div class="col">
        <hr>
        <div class="row mb-3">
          <div class="col">
            <p class="h5">Nova postagem</p>
          </div>
          <div class="col text-right">
            <a (click)="showFormNewPost.hide()" [routerLink]="">
              <fa name="times" class="mr-2"></fa>Fechar</a>
          </div>
        </div>
        <div class="row">
          <div class="col">
            <div>
              <app-form-post></app-form-post>
            </div>
            <hr class="mb-5">
          </div>
        </div>
        <hr>
      </div>
    </div>

container-posts.component.ts

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

    @Component({
      selector: 'app-container-posts',
      templateUrl: './container-posts.component.html',
      styleUrls: ['./container-posts.component.scss']
    })
    export class ContainerPostsComponent implements OnInit {
      formPost = true;
      isOpen = true;
      constructor() { }

      ngOnInit() {
      }

    }

form-post.component.html

<div class="col text-right">
    <button type="button" class="btn btn-info shadow-none mr-2" title="Rascunho">Rascunho</button>
    <button type="submit" class="btn btn-primary shadow-none" title="Salvar" (click)="showFormNewPost.hide()">Postar</button>
</div>