角2 - 入力値に基づくテンプレートの属性の追加

Question

requiredを入力に設定した場合にのみ追加します。

<input-block 
    name="formName" 
    label="my label" 
    placeholder="test" 
    required 
></input-block> 

コンポーネント：

@Component({ 
    selector: 'input-block', 
    inputs: ['name', 'label', 'placeholder', 'required'], 
    template: ` 
     <label class="input-block"> 
      <span class="name">{{label}}</span> 
      <input type="text" 
       name="{{name}}" 
       placeholder="{{placeholder}}" 
       <!-- no idea: {{required ? 'required : ''}} --> 
      > 
     </label> 
    ` 
}) 

Answer 1

その

<input type="text" 
     #myInput 
     name="{{name}}" 
     placeholder="{{placeholder}}" 
     [attr.required]="myInput.value ? "required" : null">