Extract href from string and again bind the updated data to the element in Angular

I am getting one string like this in innerHtml

<div class="wrapper" [innerHTML]="data.testString">


data.testString contains data like below,

data.testString="<p>some info, email <a href="mailto:test@test.com">test@test.com</a> info </p>";


I want to add aria-label for the anchor tag.

<a aria-label="test@test.com" href="mailto:test@test.com">test@test.com</a>


so I have added below code in .ts file

ngAfterViewInit(): void {

var myData = this.data.testString;
var element = myData!.match!(/href="([^"]*)/)![1];


var ariaLabel = "EmailId " + element;

this.data.testString=
this.data.testString!.replace('<a', '<a aria-label = "' + ariaLabel + '" ');

}
}



But I am getting below error

global-error-handler.ts:26 TypeError: Cannot assign to read only property 'testString' of object '[object Object]'


How to resolve this?

Continue reading...