2

I have three components, panel1, panel2, panel3. panel1 is always present. I want to hide panel2 until panel1 has been interacted with. This works fine because panel1 is always there.

The problem is when I want to hide/show panel3 until panel2 is interacted with. The problem the ngIf doesn't work because panel2 doesn't exist yet.

<div class="row">
  <div class="col-md-8 col-centered">
    <panel1 #p1 [answerKey]="survey.answerKey" (questionAnswered)="calculate($event)"></panel1>
  </div>
</div>
<div class="row" *ngIf="p1.isPanelComplete()">
  <div class="col-md-8 col-centered">
    <panel2 #p2 [answerKey]="survey.answerKey" (questionAnswered)="calculate($event)"></panel2>
  </div>
</div>
<div class="row" *ngIf="(p2.isPanelComplete())"> <!-- Problem Here -->
  <div class="col-md-8 col-centered">
    <panel3 #p3 [answerKey]="survey.answerKey" (questionAnswered)="calculate($event)"></panel3>
  </div>
</div>

I tried to get around it with checking for both panel 1 and 2 like this

<div class="row" *ngIf="(p1.isPanelComplete() && p2.isPanelComplete())"> <!-- Problem Here -->
  <div class="col-md-8 col-centered">
     <panel3 #p3 [answerKey]="survey.answerKey" (questionAnswered)="calculate($event)"></panel3>
   </div>
</div>

but that doesn't seem to work either. I've read not to use [hidden] so I'm trying to avoid that. Any other ways to get around this?

Update for Gunter's Answer

Ok I created the directive

import {Output, EventEmitter, Directive, ElementRef, Renderer, Input} from '@angular/core';

@Directive({selector: 'onCreate'})
export class OnCreate {
  @Output() onCreate = new EventEmitter();

  ngOnInit() {
    this.onCreate.emit('dummy');
  }
}

I had to change directive p2 to p2c because I still need to ref the method in the component from the #p2. I don't get an error but it doesn't seem to fire. Trying to debug.

<div class="row">
        <div class="col-md-8 col-centered">
            <panel1 #p1 [answerKey]="survey.answerKey" (questionAnswered)="calculate($event)"></panel1>
        </div>
    </div>
    <div class="row" *ngIf="p1.isPanelComplete()">
        <div class="col-md-8 col-centered">
            <panel2 #p2 (onCreate)="p2c = true" [answerKey]="survey.answerKey" (questionAnswered)="calculate($event)"></panel2>
        </div>
    </div>
    <div class="row" *ngIf="p2c && p2.isPanelComplete()">
        <div class="col-md-8 col-centered">
            <panel3 #p3 [answerKey]="survey.answerKey" (questionAnswered)="calculate($event)"></panel3>
        </div>
    </div>
030
  • 10,842
  • 12
  • 78
  • 123
Mastro
  • 1,477
  • 2
  • 22
  • 52

1 Answers1

0

You could use a directive like

@Directive(selector: 'onCreate')
export class OnCreate {
  @Output() onCreate:EventEmitter = new EventEmitter();

  ngOnInit() {
    this.onCreate.emit('dummy');
  }
}

<panel2 (onCreate)="p2 = true" [answerKey]="survey.answerKey" (questionAnswered)="calculate($event)"></panel2>

...

<div class="row" *ngIf="p1.isPanelComplete() && p2">
Günter Zöchbauer
  • 623,577
  • 216
  • 2,003
  • 1,567
  • No, it can't be both, or actually a component **is** a directive. You can put the same functionality in the component as well. The directive as in my answer is just easier to reuse if this is of any value. – Günter Zöchbauer Sep 10 '16 at 19:50
  • Yeah, I realized after I asked it, it was separate. Ok I can't really get this to work because I need to ref p2.isPanelComplete() method from the #p2. I tried changing p2 = true to p2c = true and I don't get an error but it never fires. I'll edit question, cause I can't fit it in here. – Mastro Sep 10 '16 at 20:09
  • You could [hide the elements](http://stackoverflow.com/questions/35578083/what-is-the-equivalent-of-ngshow-and-nghide-in-angular2/35578093#35578093) instead of removing it (that's what `*ngIf="..."` does) – Günter Zöchbauer Sep 10 '16 at 20:13