how to open unsafe URL's from angular8? - angularjs

Question

I am trying to open a hyperlink change://problem/12345678 as below from angular8 UI but it always gets redirected go unsafe:change://problem/12345678 and doesnt open the link,I looked at AngularJS changes URLs to "unsafe:" in extension page and tried to use ng-href and running into below error,is there a simpler way to do this in angular8?
<table mat-table [dataSource]="newPost.posts" multiTemplateDataRows
class="table table-bordered table-info" style="text-align:center" *ngIf="enteredValue != ''">
<ng-container matColumnDef="{{column}}" *ngFor="let column of columnsToDisplay; let idx=index">
<th style="color: black;" mat-header-cell *matHeaderCellDef> {{column}} </th>
<span *ngIf="idx == 0">
<td style="color: black;" mat-cell *matCellDef="let element">
{{element[column]}} </td>
</span>
<span *ngIf="idx == 5">
<table mat-cell *matCellDef="let element">
<tr *ngFor="let gerrit of element[column]">
{{gerrit}}
</tr>
</table>
</span>
<span *ngIf="idx != 0 && idx != 5">
<td style="color: black;" mat-cell *matCellDef="let element"> {{element[column]}} </td>
</span>
</ng-container>
Error:-
Uncaught Error: Template parse errors:
Can't bind to 'ng-href' since it isn't a known property of 'a'. (" <span *ngIf="idx2 == 0">
<td mat-cell *matCellDef="let big_beast"> <a
[ERROR ->]ng-href="change://problem/{{big_beast[tempy]}}">{{big_beast[tempy]}} </a>
</td>
"): ng:///AppModule/RadarInputComponent.html#109:15
at syntaxError (compiler.js:2175)
at TemplateParser.parse (compiler.js:11169)
at JitCompiler._parseTemplate (compiler.js:25541)
at JitCompiler._compileTemplate (compiler.js:25529)
at compiler.js:25473
at Set.forEach (<anonymous>)
at JitCompiler._compileComponents (compiler.js:25473)
at compiler.js:25386
at Object.then (compiler.js:2166)
at JitCompiler._compileModuleAndComponents (compiler.js:25385)

Answer 1

You have to use DomSanitizer#bypassSecurityTrustUrl:
class FooComponent {
public constructor(private sanitizer: DomSanitizer) {}
public getUrl(column: string) {
return this.sanitizer.bypassSecurityTrustUrl(`change://problem/${column}`)
}
}
and in the template:
<a [attr.href]="getUrl(element[column])">{{ element[column] }}</a>