1

I'm trying to show some text underneath my header when the image I have is clicked. OnClick, it should show the paragraph of text underneath. However, I'm stuck on what is wrong with my current implementation.

Here's my html code so far:

I have a question and next to it is a plus sign for example. When I click on the plus sign, showAnswer goes from false to true and then it should showAnswer but the page loads with all the content already shown. How can I fix that? 

<h1 class="question"> Foo?
    <img (click)="showAnswer = !showAnswer" style="float:right;" src="images/ic-add.png"
     class="ic_add"/></h1>
<p *ngIf="showAnswer" class="answer" > Bar</p>
<hr/>
<h1 class="question" >ABC
    <img (click)="showAnswer = !showAnswer" style="float:right;" src="images/ic-add.png" class="ic_add"/>
</h1>
<p  *ngIf="showAnswer" class="answer">123</p>
<hr/>

ts: 

export class QuestionsComponent {   

    public showAnswer = false; 

    constructor(){                
    }

}
Euridice01
  • 2,510
  • 11
  • 44
  • 76

1 Answers1

2

There is no problem in your code.

I have made an example.

You could check it.

UPDATED

Support multiple question by ngFor.

//our root app component
import {Component, View, CORE_DIRECTIVES, FORM_DIRECTIVES} from 'angular2/angular2'
import {Question} from './question'

@Component({
  selector: 'my-app',
  bindings: []
})
@View({
  template: `
      <question *ng-for="#el of questionArray; #idx = index"></question>
  `,
  directives: [CORE_DIRECTIVES, FORM_DIRECTIVES, Question]
})
export class App {
  questionArray: Object[] = [1,2];
}




import {Component, View, CORE_DIRECTIVES} from 'angular2/angular2'

@Component({
  selector: 'question',
  bindings: []
})
@View({
  template: `
    <h1 class="question"> Foo?
        <img (click)="clicked()" style="float:right;" src="images/ic-add.png"
         class="ic_add"/></h1>
    <p *ng-if="showAnswer" class="answer"> Bar</p>
    <hr/>
  `,
  directives: [CORE_DIRECTIVES]
})
export class Question {

  showAnswer: bool = false;

  clicked() {
    this.showAnswer = !this.showAnswer;
  }
}
fumihwh
  • 1,239
  • 7
  • 13
  • Oh I noticed one thing... I only want the clicked on icon to show the element/text underneath it and not all the hidden elements on the page. Looks like here, if i click on the image, it show alls the hidden text. – Euridice01 Jan 24 '17 at 04:47
  • @Euridice01 I've updated the example. You can check it. – fumihwh Jan 24 '17 at 05:11
  • Thank you, just curious. Why did you use two components instead of one? – Euridice01 Jan 24 '17 at 05:28
  • oop and if you want one component to manage two statement, you have to make `Question` have two field `showAnswer1` and `showAnswer2`. I think it is not what you want. – fumihwh Jan 24 '17 at 05:33
  • Yeah that's not what I want. Also, if I have X amount of questions and answers, would this approach this work? And the view notation no longer exists in Angular 2. I mean it's deprecated I believe. – Euridice01 Jan 24 '17 at 14:22
  • check [new example](http://plnkr.co/edit/5aLMRptX5pdRX0GnIBOs?p=preview). I'm also new to angular2. Yes, `@View` is deprecated. – fumihwh Jan 24 '17 at 15:15