> For the complete documentation index, see [llms.txt](https://appsecurity.gitbook.io/devops/llms.txt). Markdown versions of documentation pages are available by appending `.md` to page URLs; this page is available as [Markdown](https://appsecurity.gitbook.io/devops/ppc/ppc-langs/frontend/js-ts/frameworks/web/angular/osnovy-freimvorka/rabota-s-komponentami/dynamic-component-loader.md).

# Dynamic components

Компоненты не всегда обязаны быть определены заранее. Их можно создавать на лету.

## Создаем Anchor directive

```typescript
// src/app/ad.directive.ts
import { Directive, ViewContainerRef } from '@angular/core';

@Directive({
  selector: '[adHost]',
})
export class AdDirective {
  constructor(public viewContainerRef: ViewContainerRef) { }
}
```

Инжектим `ViewContainerRef` для доступа к отображению. `@Directive` декоратор резерввирует имя селектора.

## Loading components

```typescript
// src/app/ad-banner.component.ts
...
    template: `
    <ng-template adHost></ng-template>
    `
...

```

Элемент \<ng-template> отлично подходит для динамических компонентов, тк не отображает другие доп данные

...

Короч надо на конкретном примере разбирать в документации <https://angular.io/guide/dynamic-component-loader>