Use ng-content to show data from parent to child components in Angular.

A common practice in Angular is to share data from parent components to child components by implementing Input() decorator, but now let's discuss how we could achieve this by a simple method which is known as ng-content.

The ng-content directive in Angular is used to project content from the parent component into a child component.

ng-content allows you to define a placeholder in a component where the content from the parent component can be projected. Here's an example:

Parent Component — HTML:

<app-child-component>
   <div>{{title}}</div> 
</app-child-component>

Parent Component — TS:

import { Component } from '@angular/core';

@Component({
  selector: 'app-root',
  templateUrl: './app.component.html',
})
export class AppComponent {
  title = 'this is my parent component';
}

Child Component — HTML:

  <ng-content></ng-content>

If you inspect the elements in the browser the result would be like this:

In this example, the content inside the app-child tags will be projected into the ng-content element in the child component template.

On the other side, the @Input decorator is used to passing data from a parent component to a child component. Here's an example:

Parent Component Class:

import { Component } from '@angular/core';
@Component({
  selector: 'app-parent',
  template: `
    <app-child [message]="title"></app-child>
  `
})
export class ParentComponent {
title = 'this is my parent component';
}

Child Component Class:

import { Component, Input } from '@angular/core';
@Component({
  selector: 'app-child',
  template: `
    <p>{{ message }}</p>
  `
})
export class ChildComponent {
  @Input() message: string;
}

In this example, the title property in the parent component is passed to the message property in the child component using the @Input decorator.

So you could easily achieve this by using ng-content to just show the data from parent to child component.