Conditionally create an input field only in Angular 2 or 4: Tip + Best /, which way to do it

Question

I tried to answer someone elses question . And, realizing this, there was a little uncertainty in my mind about a few things. I hope someone can provide feedback on numbered points 1..4:

Task: Conditionally make the input field read-only

Corresponding HTML section:

<input type="text" placeholder="Club Name" #clubName>

Add this to the Typescript component.

// class properties
@ViewChild('clubName')
inp:HTMLInputElement; // Could also use interface Element

// conditionally set in some other methods of class
inp.setAttribute('readonly', 'readonly');
inp.removeAttribute('readonly');

I must say that for me this is a gray area.

• Is linking to HTMLInputElementor Elementdirectly from @ViewChildin Angular 2+ bad practice? Only, I have often seen examples with ElementRefor bind to nativeElementon ElementRef.

VS Studio Intelli-sense , , . .. setAttribute removeAttribute, .. ( , )

---

2. , , , HTML-:

   ---

<input [attr.readonly]= "isReadOnly">

IIRC , get Typescript:

get isReadOnly() :boolean {
}

?

---

3. , HTML:

   ---

<input [attr.readonly]= "isReadOnly()">

Typescript

isReadOnly() :boolean {
}

?

---

4. , ?

: * ngIF, . , .

Answer 1

(Angular 4):

<input [readonly]="isReadOnly">

att.readonly, , readonly , false. [readonly] Angular, , isReadOnly .

HTML , :

<input readonly>

Answer 2

, . , , pct. 2 - :

<input [attr.readonly]= "isReadOnly">

:

isReadOnly: boolean;

:

// when you want to be read-only
isReadOnly = true;
// whe you want to be editable
isReadOnly = false;