Passing Content to a Child Component

Vueslot

<script setup lang="ts">
import CardBox from './CardBox.vue'
</script>

<template>
  <CardBox>
    Hello from the parent
  </CardBox>
</template>

// CardBox.vue
<template>
  <section>
    <slot />
  </section>
</template>

It uses slots so the child component can render content received from the parent in a specific place in the template.

Vue docs

Reactchildren

function App() {
  return (
    <CardBox>
      Hello from the parent
    </CardBox>
  )
}

// CardBox.tsx
type CardBoxProps = {
  children: React.ReactNode
}

function CardBox({ children }: CardBoxProps) {
  return <section>{children}</section>
}

It uses the special children prop so the child component can render nested content sent by the parent.

React docs

Angularng-content

import { Component } from '@angular/core'
import { CardBoxComponent } from './card-box.component'

@Component({
  selector: 'app-root',
  standalone: true,
  imports: [CardBoxComponent],
  template: `
    <app-card-box>
      Hello from the parent
    </app-card-box>
  `,
})
export class AppComponent {}

// card-box.component.ts
import { Component } from '@angular/core'

@Component({
  selector: 'app-card-box',
  standalone: true,
  template: `
    <section>
      <ng-content />
    </section>
  `,
})
export class CardBoxComponent {}

It uses ng-content to project into the child component the content declared between its tags from the parent.

Angular docs