https://github.com/laudebugs/dynamic-components-angular

Angular Starter App with Angular Material
https://github.com/laudebugs/dynamic-components-angular

angular angularmaterial

Last synced: 5 days ago
JSON representation

Angular Starter App with Angular Material

• Host: GitHub
• URL: https://github.com/laudebugs/dynamic-components-angular
• Owner: laudebugs
• Created: 2023-03-31T19:24:00.000Z (over 1 year ago)
• Default Branch: main
• Last Pushed: 2023-12-15T02:15:37.000Z (11 months ago)
• Last Synced: 2024-04-17T04:58:45.381Z (7 months ago)
• Topics: angular, angularmaterial
• Language: TypeScript
• Homepage: https://www.laudebugs.me/dev/dynamic-components-angular
• Size: 447 KB
• Stars: 0
• Watchers: 1
• Forks: 1
• Open Issues: 3
• Metadata Files:
  • Readme: README.md

Awesome Lists containing this project

README

        
# Dynamic Components in Angular

> A repository to demonstrate the use of dynamic components in Angular

[Read referenced article here](https://www.laudebugs.me/dev/dynamic-components-angular)

[Stackblitz](https://stackblitz.com/edit/angular-ivy-lzyecr)

## Glossary

### `ViewContainerRef`

A reference to the container where one or more views can be attached.

[Reference](https://angular.io/api/core/ViewContainerRef)

### `@ViewChild`

A property decorator that configures a view query.

[Reference](https://angular.io/api/core/ViewChild)

## Directives

### `movieHost`

Directive to anchor where to host the dynamic component.

```ts

import { Directive, ViewContainerRef } from '@angular/core'

@Directive({ selector: '[movieHost]' })

export class MovieHostDirective {

    constructor(private viewContainerRef: ViewContainerRef) {}

}

```