Dynamicaly generate links in view in Angular

Welcome Bob Balkonsky!

We can put this functionality into a separate component,

@Component({
  selector: 'app-custom-string-transformer',
  template: `{{parsed.before || ''}}<a *ngIf="parsed.url" (click)="handleUrlClick(parsed.url)">{{parsed.url}}</a>{{parsed.after || ''}}`,
  styles: [`a { color: blue; text-decoration: underline; cursor: pointer;}`]
})
export class StringTransformerComponent implements OnInit {

  @Input() str: string
  @Output() onUrlClicked: EventEmitter<string> = new EventEmitter<string>();

  parsed: ParsedString = {} as ParsedString

  ngOnInit(): void {
    this.parsed = this._parseStr(this.str)

  }

  _parseStr(str: string): ParsedString {
    const [full, before, url, after] = str.match(/(.*)%url%(.+)%url%(.*)/)
    return {before, url, after}
  }

  handleUrlClick(url: string): void {
    this.onUrlClicked.emit(url);
  }
}

Demo: https://stackblitz.com/edit/angular-nakjdb?file=src%2Fapp%2Fstring-transformer.component.ts

You can use [innerHTML]: TS:

 url = `my beutifull super <a style="cursor:pointer" target="_blank" href="https://www.google.com/">URLLINK</a> with no doorway!`

HTML:

<div [innerHTML]="url"></div>

example: https://stackblitz.com/edit/angular-8ah7dd?file=src%2Fapp%2Fapp.component.html

You can simply split the text on %url% and assemble the parts in your template:

ts:

//Create array to hold parts of string
linkText: string[] = [];

//Split your string on %url% delimiter to get start text, url and end text as separate strings
  ngOnInit()
  {
    let myUrl = 'my beutifull super %url%URLLINK%url% with no doorway!';
    this.linkText  = myUrl.split('%url%');
  }

html:

//build text and link using array
<p>{{linkText[0]}}<a (click)="urlHandler(linkText[1])">{{linkText[1]}}</a>{{linkText[2]}}</p>

StackBlitz example