Conditionally display child component and its content within parent component

Question

I'd like to conditionally display a child component (including its ContentChildren) within a parent component's template.

app.component.html

<parent>
  <child #initial>
    <span>Player</span>
  </child>
  <child label="Intro">
    <span>Intro</span>
  </child>
  <child label="Content">
    <span>Content</span>
  </child>
</tabs>

desired result

<parent>
  <child>
    <span>Player</span>
  </child>
</parent>

parent.component.ts

@Component({
  selector: 'parent',
  template: `<!--Display {{current}} and its ContentChildren-->`,
  styleUrls: ['./tabs.component.scss']
})

export class ParentComponent implements OnInit {
  @ContentChildren(ChildComponent) childs;
  @ContentChild("initial") initial;
  @ContentChild("open") current;
  ngOnInit(): void {
    if (this.initial) this.current = this.initial;
  }
}

child.component.ts

@Component({
  selector: 'child',
  template: `<ng-content></ng-content>`,
})

export class ChildComponent {
  @Input() label: string;
}

Attempt for parent.component.html

<ng-container *ngFor="let child in childs">
  <child *ngIf="child == current"></child> //ContentChildren as defined in 'app.component.html' are lost now 
</ng-container>

@Vega It works witch ngIf, but the child component's <ng-content> is lost — Kode Bryant
– Kode Bryant, Commented Aug 24, 2017 at 16:26
@Vega I've tried so, but as the ContentChildren of child are defined outside of the parent component, they must remain dynamic. I've added my attempt with a wrapper in the question — Kode Bryant
– Kode Bryant, Commented Aug 24, 2017 at 16:40

Rajez · Accepted Answer · 2017-08-24 16:44:44Z

1

You can do by usingngSwitch.

<parent>
  <div [ngSwitch]="current">
      <child1 *ngSwitchCase="'Intro'" label="Intro">
          <span>Intro</span>
      </child1>

      <child2 *ngSwitchCase="'Content'" label="Content">
          <span>Content</span>
      </child2>
  </div>
</parent>

If you don't want the ngSwitch and need to change the entire template dynamically, hope the following answer will be helpful Dynamic template URLs in Angular 2 Ask

edited Aug 24, 2017 at 16:44

answered Aug 24, 2017 at 16:15

Rajez

4,0771 gold badge16 silver badges21 bronze badges

Sign up to request clarification or add additional context in comments.

2 Comments

Kode Bryant Over a year ago

the problem with that is that <ng-content> of the child component is static now, but it must be dynamic.

Rajez Over a year ago

@Michel Cool If you need to change dynamically , the linked answer may be useful

Collectives™ on Stack Overflow

Conditionally display child component and its content within parent component

1 Answer 1

2 Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

2 Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related