Как скрыть / показать компонент, используя ngif на основе логического значения из отдельного компонента - PullRequest
Новая
       20

Как скрыть / показать компонент, используя ngif на основе логического значения из отдельного компонента

0 голосов
/ 17 апреля 2019

Я пытаюсь показать / скрыть элемент в родительском компоненте, когда пользователь нажимает кнопку дочернего компонента.Я не уверен, что делаю что-то не так или, может быть, у меня совершенно неправильный подход

Родительский компонент 

<div *ngIf="show">Hello World</div>
<div *ngIf="!show">Goodbye World</div>

Дочерний компонент 

<button (click)="showHello()">
 <i class="fas fa-plus"></i>
</button>

Дочерний компонент.ts файл 

show: boolean = false;

showHello() {
    this.show = !this.show;
    console.log('show', this.show);
 }

1 Ответ

1 голос
/ 17 апреля 2019

Родитель: 

<hello #hello></hello>
<p>
  {{hello.show}}
</p>

ребенок: 

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

@Component({
  selector: 'hello',
  template: `<button (click)="showHello()">
              Show
              </button>`,
  styles: [`h1 { font-family: Lato; }`]
})
export class HelloComponent  {
  show: boolean = false;

  showHello() {
      this.show = !this.show;
      console.log('show', this.show);
  }
}

Живая демоверсия

...