Altering text within Angular .html

Question

I hope I can make sense with this question

is it possible to alter your text label within Angular .html layout depending on some criteria in your query? For example below, possibly I'd like to interactively alter the "placeholder="Service Date" to something other than 'Service Date', depending on some criteria in my query in the corresponding .ts file, some indicator field. Effectively, if indicator='x' then placeholder="something else"

is that possible to accomplish?

<div class="row">
    <mat-form-field>
       <input matInput placeholder="Service Date" name="serviceDate" value="
          {{claim.serviceDate | date}}" disabled="disabled">
    </mat-form-field>
</div>

Well, you're able to alter the value, right? Why not try a similar technique with placeholder? — Heretic Monkey
– Heretic Monkey, Commented Mar 15, 2018 at 21:36
Did you try placeholder="{{indicator=='x'? 'something else':'Service Date'}}" — Naga Sai A
– Naga Sai A, Commented Mar 15, 2018 at 21:41

Hugo Noro · Accepted Answer · 2018-03-15 21:38:51Z

1

By setting the placeholder as a binding you can then use an expression that can be evaluated either in the component or the view itself

<input matInput [placeholder]=“<any expression>” name="serviceDate" value="
      {{claim.serviceDate | date}}" disabled="disabled">

Where <any expression> can be a variable, a ternary expression or anything that can be evaluated.

answered Mar 15, 2018 at 21:38

Hugo Noro

3,2732 gold badges17 silver badges19 bronze badges

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

Comments

Yerkon · Accepted Answer · 2018-03-16 08:35:20Z

0

It is good practice to move(wrap) some expression logic into method of class and use it in template. It's helps to keep template clean and easy to test.

Template:

<div class="row">
        <mat-form-field>
           <input matInput placeholder="{{getPlaceholder()}}" name="serviceDate" value="
              {{claim.serviceDate | date}}" disabled="disabled">
        </mat-form-field>
    </div>

Component class:

  class SomeComponent:
    {
      getPlaceholder(): string {
        return this.indicator == x ? "placeHolder1" : "placeHolder2";
      }
    }

edited Mar 16, 2018 at 8:35

answered Mar 16, 2018 at 8:29

Yerkon

4,8182 gold badges21 silver badges32 bronze badges

Collectives™ on Stack Overflow

Altering text within Angular .html

2 Answers 2

Comments

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Related