How to move *ngIf conditions from template to typescript file in angular 2

Question

I am new to angular 2.I have to display Yes and No label based on certain conditions.The same label should get replaced.For that,I am writing *ngIf condition in my template file with OR operators.It makes my template look clumsy so I want to declare those *ngIf condition in my typescript file and use the variable instead in my template with *ngIf.

Also, is there any way to achieve 'Yes' and 'No' placeholders with one md-input?If yes, then how to do that?

My template-

<md-input *ngIf="cond1 || cond2" placeholder="Yes"></md-input>
<md-input *ngIf="cond3||cond4||cond5" placeholder="No"></md-input>

<input type="button" [disabled]="placeholder==='YES'" value="Save">

How to do that?

Günter Zöchbauer · Accepted Answer · 2016-11-07 14:28:42Z

5

<md-input [placeholder]="placeholder"></md-input>

class MyComponent {

  get placeholder() {
    if (cond1 || cond2) {
      return 'YES';
    } else if (cond3 || cond4 || cond5) {
      return 'NO';
    }
  }
}

answered Nov 7, 2016 at 14:28

Günter Zöchbauer

661k235 gold badges2.1k silver badges1.6k bronze badges

Sign up to request clarification or add additional context in comments.

11 Comments

techie_questie Over a year ago

Can we use get like that or it should be a function?

Günter Zöchbauer Over a year ago

You can remove get and then use it like [placeholder]="placeholder()". This way you also can pass parameters.

techie_questie Over a year ago

cool! but the value is not changing now.Its always showing Yes.

Günter Zöchbauer Over a year ago

Seems to indicate that cond1 || cond2 is always true

techie_questie Over a year ago

cond 1 to cond 5 are select dropdown values.The placeholder value should get updated based on the value selected from the dropdown.

|

Collectives™ on Stack Overflow

How to move *ngIf conditions from template to typescript file in angular 2

1 Answer 1

11 Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

11 Comments

Your Answer

Sign up or log in

Post as a guest

Related