Как создать гиперссылку в файле Typescript? Угловой 16+

Вместо того, чтобы хранить фактический HTML-код в строке, почему бы просто не сохранить URL-адрес в константах.

export const LINK1 = 'https://sample.com/';

Затем в компоненте вы можете сохранить это в переменной и использовать в HTML.

ТС

import { LINK1 } from './path-to-constants';
...

...
@Component({ ... });
export class SomeComponent {
    link = LINK1;
    ...
    

HTML:

<a [href] = "link">LINK 1</a>

Если вы определенно хотите сохранить HTML как строку, вы можете использовать [innerHTML] для преобразования строки в HTML.

Недостатком этого подхода является то, что функции Angular, такие как привязка свойств и привязка событий, не работают с использованием этого метода.

КОНСТАНТЫ

export const LINK1 = '<a href='https://sample.com/'>LINK 1</a>';

ТС

import { LINK1 } from './path-to-constants';
...

...
@Component({ ... });
export class SomeComponent {
    link = LINK1;
    ...
    

HTML:

<span [innerHTML] = "link"></span>

Я не вижу веской причины, по которой LINK1 является константой. По моему мнению, поскольку вы выбрали Angular в качестве среды разработки, LINK1 должен быть компонентом. Таким образом, вы можете использовать его где угодно, например <app-link1 />, и фреймворк будет правильно и безопасно обрабатывать его.

Вот пример компонента

// link1.component.ts
@Component({
  selector: 'app-link1',
  standalone: true,
  imports: [CommonModule],
  templateUrl: './link1.component.html',
  styleUrls: ['./link1.component.scss'],
  changeDetection: ChangeDetectionStrategy.OnPush
})
export class Link1Component {}

<!-- link1.component.html -->
<a href='https://sample.com/'>LINK 1</a>

<!-- example usage of the component -->
...
<app-link1 />
...

Таким образом, у вас есть возможность предоставлять href и текст ссылки в качестве входных данных, когда захотите.