Angular 2 cacher et montrer un élément en utilisant *ngIf avec booléen

Question

Je veux afficher et masquer un élément en utilisant un bouton qui se trouve dans un autre composant.

J'ai donc un tableau de bord avec une quantité de chambres et un en-tête.

HTML du DashboardComponent avec app-header et app-chamber :

 <app-header></app-header>
    <div class="container">
      <div class="row">
        <app-chamber [kamers]="kamers"></app-chamber>
      </div>
    </div>

J'ai ce HTML avec le *ngIf dans mon ChamberComponent :

<div class="col-sm-6 col-md-4 col-lg-3 cardcol" *ngFor="let kamer of kamers; let i = index">
      <md-card class="chamber wit" *ngIf="kamer.patient == null">
         <p *ngIf="showId">{{kamer.id}}</p>
      </md-card>
</div>

Dans le HeaderComponent, j'ai un bouton qui doit afficher et masquer l'élément :

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

  @Input() aList;

  dashboardComponent:DashboardComponent;

  chamberComponent:ChamberComponent;

  constructor(dashboardComponent: DashboardComponent, chamberComponent:ChamberComponent) {
    this.dashboardComponent = dashboardComponent;
    this.chamberComponent = chamberComponent;

  }

  ngOnInit() {

  }

// THIS GETS CALLED BY A BUTTON CLICK
  toggleId(){
    this.chamberComponent.toggleId();
  }

}

puis mon code ChamberComponent :

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

      @Input() kamers;
      showId:boolean;

      constructor() {
        this.showId=false;
      }

      ngOnInit() {

      }

      toggleId = () => {
          this.showId = !this.showId;
      }

    }

Ainsi, lorsque je clique sur le bouton, la valeur change (j'ai enregistré cela dans la console) mais la vue n'est pas mise à jour

Lorsque je place dans mon ChamberComponent un bouton qui appelle la fonction toggleId(), la vue est mise à jour et l'élément est affiché ou masqué.

Mais j'ai besoin de le faire basculer à partir d'un bouton sur mon en-tête.

Answer 1

Plunker

Il y avait un petit décalage entre les @Input() kamers et le modèle *ngIf="kamer.patient == null" .

• Il suffit de changer l'entrée en kamer .

Modèle HTML

<md-card class="chamber wit" *ngIf="kamer.patient === null">
   <p *ngIf="showId">{{kamer.id}}</p>
</md-card>

<button (click)="toggleId()">Toggle</button>

Composant

@Component({
  selector: 'material-app',
  templateUrl: 'app.component.html'
})
export class AppComponent {

  kamer = {
    patient: null,
    id: '1'
  };
  showId = false;

  ngOnInit() {

  }

  toggleId() {
    this.showId = !this.showId;
  }

}

Mise à jour (1) - Plunker (1)

Utilisez @ViewChild

Pour référencer les fonctions d'un composant enfant, utilisez ViewChild

• Lieu @ViewChild('child') child; dans le composant parent
• Dans le modèle parent, les fonctions enfants sont référencées comme suit : <button (click)="child.toggleId()">Toggle</button>

Composante parentale

@Component({
  selector: 'material-app',
  template: `
    <material-child #child></material-child>
    <button (click)="child.toggleId()">Toggle</button>
  `
})
export class AppComponent {

  @ViewChild('child') child;

}

Modèle d'enfant

<md-card class="chamber wit" *ngIf="kamer.patient === null">
   <p *ngIf="showId">{{kamer.id}}</p>
</md-card>

Composante enfant

@Component({
  selector: 'material-child',
  templateUrl: 'app.component.html'
})
export class ChildComponent {

  kamer = {
    patient: null,
    id: '1'
  };
  showId = false;

  ngOnInit() {

  }

  toggleId() {
    this.showId = !this.showId;
  }

}

Mise à jour (2) - Plunker (2)

Utilisez @Output() + EventEmitter

Pour étendre la configuration précédente afin d'utiliser un composant frère, vous pouvez

• Faites en sorte que le frère ou la sœur émette un événement en utilisant une fonction Émetteur d'événements
• Écoutez l'événement émis dans le composant parent, et appelez la fonction enfant nécessaire en utilisant ViewChild

Composante de la fratrie

@Component({
  selector: 'material-sibling',
  template: `
    <button (click)="toggle.emit()">Toggle</button>
  `
})
export class SiblingComponent {
  @Output() toggle = new EventEmitter();
}

Composante parentale

@Component({
  selector: 'material-app',
  template: `
    <material-child #child></material-child>
    <material-sibling (toggle)="child.toggleId()"></material-sibling>
  `
})
export class AppComponent {

  @ViewChild('child') child;

}

Modèle d'enfant

<md-card class="chamber wit" *ngIf="kamer.patient === null">
   <p *ngIf="showId">{{kamer.id}}</p>
</md-card>

Composante enfant

@Component({
  selector: 'material-child',
  templateUrl: 'app.component.html'
})
export class ChildComponent {

  kamer = {
    patient: null,
    id: '1'
  };
  showId = false;

  ngOnInit() {

  }

  toggleId() {
    this.showId = !this.showId;
  }

}