When I use the following [attr.disabled] with a button it works fine.

isDisabled = true;
<button [attr.disabled] = "isDisabled ? 'disabled' : null"> Click </button>

What to do If I want to do the same with svg tag? The same way does not work.

<svg>
 <use [attr.xlink:href]="show ? '#arrow-top' : '#arrow-bottom'"></use>
</svg>

I need to disable the #arrow.

Also is there a way to combine cursor:not-allowed and pointer-events:none without css ? Tried this and doesnot work.

<svg [style.cursor] = "show ? 'auto' : 'not-allowed'" 
[style.pointerEvents]="show ? 'auto' : 'none'"> .....</svg>