Declare variable in template in Angular 2

Question

I want give my users an opportunity to choose which type of input to use to select color: type='text' or type='color'. So, I wrote this template:

 <input [type]="colorInputTypeText ? 'text' : 'color'">
 <input type="checkbox" [(ngModel)]="colorInputTypeText" name="colorInputTypeText">

And in my-component.ts:

@Component({
    ...
})
export class MyComponent {
    colorInputTypeText = true;
    ...
}

My question is: is it allright to declare colorInputTypeText as a field of MyComponent class, or I should declare it somehow locally in template? If the right answer is "in template", how to do that?

Thanks.

Bernardo Pacheco · Accepted Answer · 2016-08-02 14:23:14Z

2

There isn't a problem to declare a field in a class as you did.

But, if you don't want to touch your class, you can do it only in the template:

<input [type]="colorInputTypeText ? 'text' : 'color'">

<input type="checkbox" name="colorInputTypeText" #cb (change)="colorInputTypeText = cb.checked">

Angular creates a colorInputTypeText for you under the hood.

The colorInputTypeText is a boolean variable. By default it's false, so the the checkbox is unchecked. If you want the default value equals true, you have to add the checked attribute like this:

<input type="checkbox" name="colorInputTypeText" checked #cb (change)="colorInputTypeText = cb.checked">

Personally I prefer this solution because your class don't need to declare an extra property and the logic in the template is easy to understand.

edited Aug 2, 2016 at 14:23

answered Aug 2, 2016 at 2:35

Bernardo Pacheco

1,4451 gold badge14 silver badges23 bronze badges

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

4 Comments

sinedsem Over a year ago

what is init value for colorInputTypeTextin this case? can I modify it?

sinedsem Over a year ago

This doesn't 100% work. Before I first time check/uncheck checkbox, colorInputTypeText is undefined, so it become initialised and works only after 1st click on checkbox.

Bernardo Pacheco Over a year ago

undefined in javascript is a falsy value, so the checkbox is unchecked. If you want to initialize with a true value you have to add the checked attribute in the input field as I said.

sinedsem Over a year ago

But it isn't set to true until change event occurs. Anyway, you inspired me to improve your answer to make it work. Check it out.

sinedsem · Accepted Answer · 2016-08-02 19:51:06Z

2

Note: this answer was inspired by @Bernardo Pacheco, so please, don't forget to upvote his answer.

Here is the solution:

<input [type]="cb.checked ? 'color' : 'text'" id="color" name="color">
<input type="checkbox" name="inputTypeColor" checked #cb [(ngModel)]="cb.checked">

answered Aug 2, 2016 at 19:51

sinedsem

5,7737 gold badges31 silver badges47 bronze badges

Collectives™ on Stack Overflow

Declare variable in template in Angular 2

2 Answers 2

4 Comments

Comments

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

4 Comments

Comments

Related