Angular 2/4: How do I make readonly work with my custom component

Question

I have a custom component which has a label and a input box. I want to make the input box readonly. How do I achieve the below?

<custom-component [readonly]=true>

My custom component template is below

<div>
    <div><label>Hello</label></div>
    <div><input class="input input-lg" id="float-input" type="text" size="30" pInputText [(ngModel)]="value"
           (change)="onChange(value)" (keydown)="onChange(value)" (keyup)="onChange(value)"
           (keypress)="onChange(value)">
    </div>
</div>

checkout https://stackoverflow.com/questions/2874688/how-to-disable-an-input-type-text — Dhyey, Dec 29 '17 at 12:43

alvaropanizo · Accepted Answer · 2017-12-29T13:01:43.383

Define a Input variable in your component:

@Input() readOnly: Boolean;

use from your parent call like you indicate upside:

<custom-component [readOnly]="true"></custom-component>

and use this input variable to define the read-only value in your form:

<input class="input input-lg" 
  id="float-input" type="text" size="30" 
  pInputText [readonly]="readOnly"
  (change)="onChange(value)" (keydown)="onChange(value)" 
  (keyup)="onChange(value)" (keypress)="onChange(value)"/>

Sandip Jaiswal · Answer 2 · 2017-12-29T13:19:44.380

You cannot directly make your component to readonly. Just take a input in your component and use it in your component to make readonly to input

<custom-component [readonlyComp]="true">

In your component take a Input

@Input() readonlyComp: boolean;

Use readonlyComp in your component template.

<div>
    <div><label>Hello</label></div>
    <div><input class="input input-lg" id="float-input" type="text" size="30" pInputText [(ngModel)]="value" [readonly]="readonlyComp"
           (change)="onChange(value)" (keydown)="onChange(value)" (keyup)="onChange(value)"
           (keypress)="onChange(value)">
    </div>
</div>

Hope it will help

Angular 2/4: How do I make readonly work with my custom component

2 Answers2