0

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

3
  • Isso aí mesmo, para passar dados do componente pai para o filho vc utiliza Input() e do filho para o pai vc utiliza Output() com eventEmitter().
    – LeAndrade
    4/03/2021 às 11:43
  • consegue me dar um exemplo com o código acima? 4/03/2021 às 14:24
  • editei a pergunta pra ficar mais claro 12/03/2021 às 2:43

1 Resposta 1

0

Eu fiz várias mudanças e desta vez eu testei antes, e aqui me parece ter funcionado agora.

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>

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

6
  • não deu certo :/ 12/03/2021 às 2:00
  • editei a pergunta pra ficar mais claro 12/03/2021 às 2:43
  • Fiz de novo e testei, faz um teste e me diz depois. Fica atento nos imports... 12/03/2021 às 19:50
  • no console deu o um ERROR TypeError: Cannot read property 'showValue' of undefined 13/03/2021 às 20:28
  • Aconteceu comigo também, você ajusta colocando o <app-account></app-account> de ntro do html do header. Mas achoque você precisa rever a sua estrutura, pois esses dois componentes na minha humilde opinião não tem relação entre si. Mas faz pelo menos pra testar... 14/03/2021 às 0:11

Você deve fazer log-in para responder a esta pergunta.

Esta não é a resposta que você está procurando? Pesquise outras perguntas com a tag .