Boa noite pessoa, estou em um projeto onde queria adicionar aquele botão que oculta e mostra alguma informação. Mas o complicado é que este botão está em um componente e a informação a ser ocultada está em outro. Por exemplo:
header.componente.html
<div>
<div class="btn-hidden btn-feature">
<img title="Ocultar" (click)="btnHide()">
</div>
</div>
header.component.ts
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;
}
}
Aqui seria o componente com a informação a ser ocultada
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 {
}
}
Assim funcionou de certa forma, se eu altero para showValue = false ou showValue = true, muda os valores aqui:
<div>
<p *ngIf="!showValue" class="card-account-amount">{{ value | currency: 'BRL' }}</p>
<p *ngIf="showValue" class="card-account-amount">R$ --</p>
</div>
Mas não muda os valores clicando no botão do componente Header, isso que estou travado. Somente se eu alterar no arquivo.ts do AccountComponent