Wie kann ich ViewChild in Angular in einer anderen Komponente anzeigen?

Um ein `@ViewChild`-Element in einer anderen Komponente anzuzeigen, kannst du Angulars `@Input`-Dekorator verwenden, um die Referenz des Elements an die andere Komponente zu übergeben. Hier ist ein Beispiel, wie das gemacht werden kann:

1. **Erstelle die Quellkomponente (SourceComponent):**

```typescript
import { Component, ViewChild, AfterViewInit } from '@angular/core';
import { ChildComponent } from './child.component';

@Component({
selector: 'app-source',
template: `
<app-child #childComponent></app-child>
<button (click)="sendChildToOtherComponent()">Send to Other Component</button>
`
})
export class SourceComponent implements AfterViewInit {
@ViewChild('childComponent') childComponent!: ChildComponent;

ngAfterViewInit() {
// ViewChild ist jetzt initialisiert
}

sendChildToOtherComponent() {
// Hier könntest du eine Methode aufrufen, um die Referenz zu übergeben
}
}
```

2. **Erstelle die Zielkomponente (TargetComponent):**

```typescript
import { Component, Input } from '@angular/core';
import { ChildComponent } from './child.component';

@Component({
selector: 'app-target',
template: `
<ng-container *ngIf="childComponent">
<ng-container *ngTemplateOutlet="childComponent.template"></ng-container>
</ng-container>
`
})
export class TargetComponent {
@Input() childComponent!: ChildComponent;
}
```

3. **Erstelle die Kindkomponente (ChildComponent):**

```typescript
import { Component, TemplateRef, ViewChild } from '@angular/core';

@Component({
selector: 'app-child',
template: `
<ng-template #template>
<p>Child Component Content</p>
</ng-template>
`
})
export class ChildComponent {
@ViewChild('template', { static: true }) template!: TemplateRef<any>;
}
```

4. **Verwende die Komponenten in einer übergeordneten Komponente (AppComponent):**

```typescript
import { Component, ViewChild } from '@angular/core';
import { SourceComponent } from './source.component';
import { TargetComponent } from './target.component';

@Component({
selector: 'app-root',
template: `
<app-source #sourceComponent></app-source>
<app-target [childComponent]="sourceComponent.childComponent"></app-target>
`
})
export class AppComponent {
@ViewChild('sourceComponent') sourceComponent!: SourceComponent;
}
```

In diesem Beispiel wird die `ChildComponent`-Instanz von der `SourceComponent` an die `TargetComponent` übergeben und dort angezeigt. Beachte, dass `ngTemplateOutlet` verwendet wird, um den Inhalt der `ChildComponent` anzuzeigen.