Hiding another component element in Angular

Question

Good evening person, I’m on a project where I wanted to add that button that hides and shows some information. But the tricky thing is that this button is in one component and the information to be hidden is in another. For example:

header.componente.html

<div>
        <div class="btn-hidden btn-feature">
          <img title="Ocultar" (click)="btnHide()">
        </div>
</div>

header.componentts.

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

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

   @Input() showValue;

  constructor() { }

  btnHide() {
    console.log(this.showValue);
    this.showValue = !this.showValue;
  }
}

Here would be the component with the information to be hidden

Details.component.html

<div>
    <p *ngIf="!showValue" class="card-account-amount">{{ value | currency: 'BRL' }}</p>
    <p *ngIf="showValue" class="card-account-amount">R$ --</p>
</div>

Details.component.ts

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

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

  @Input() showValue = true;

  constructor() { }

  ngOnInit(): void {
  }

}

So it worked in a way, if I switch to showValue = false or showValue = true, change the values here:

<div>
    <p *ngIf="!showValue" class="card-account-amount">{{ value | currency: 'BRL' }}</p>
    <p *ngIf="showValue" class="card-account-amount">R$ --</p>
</div>

But it does not change the values by clicking on the button of the Header component, which I am locked in. Only if I change the.ts file of Accountcomponent

Answer 1

I made several changes and this time I tested before, and here it seems to me to have worked now.

header-dashboad-Component.ts

import { Component, OnInit, ViewChild } from '@angular/core';
import { AccountComponent } from "../../users/account/account.component";

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

    @ViewChild(AccountComponent) accountComponent: AccountComponent;

    constructor() { }

    ngOnInit(): void { }

    btnHide() {
        let current = this.accountComponent.showValue;
        this.accountComponent.showValue = (current) ? false : true;
    }

}

header-Dashboard-Component.html

<p>header-dashboard works!</p>

<button (click)="btnHide()">Hide Values</button>

<app-account>
    <!-- This is a child of to Up -->
</app-account>

Account-Component.ts

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

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

    public showValue = false;

    constructor() { }

    ngOnInit(): void { }

}

Account-Component.html

<p *ngIf="showValue">account works!</p>

<p [textContent]="showValue"></p>

Source: https://angular.io/api/core/ViewChild