how to open unsafe URL's from angular8?

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"> 
                            <a href="change://problem/{{element[column]}}">{{element[column]}} </a> </td>
                    </span>
                    <span *ngIf="idx == 5">
                        <table mat-cell *matCellDef="let element"> 
                            <tr *ngFor="let gerrit of element[column]">
                                <a href={{gerrit}} target="_blank">{{gerrit}} </a>
                            </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>