How to input a component into another component in Angular?

Question

In React, you can pass entire components into other components, and then easily display those components in the respective div. This referring not to imports, but rather function parameters so what is displayed will vary.

In Angular, you use @Input() and @Output() to do the same thing with values and functions, but what about components? How do you do this with components? I'm not talking about imports handled by the module file or at the top of the file; I'm talking about parameters that will vary based on the runtime of your program.

Ie, I want to convert the following React code into Angular, where children is another React component passed in via ReactNode:

const ReactComponent = (props) => {
  return (
    <div>
      {props.children}
    </div>
  );
};

Also I apologize if any of my terminology is incorrect; I'm new to Angular and I'm coming from a (limited) React background.

I tried using @Input() with a parameter of type "any" but this doesn't seem right.

Answer 1

parent.component.html
<div>
   <child-component></child-component>
</div>

child.component.ts
@Component({ selector: 'child-component' })
export class ChildComponent {}

This is a very quick way to show how Angular components can be nested. In this example you have a parent component template file (parent.component.html) and inside this file you can include any other component by their selector. In the example I include 'child-component' and show child component ts file.

If you want to make child component dynamic (if I understand you correctly - to pass data from parent to child) and for example pass string value into it, you can:

parent.component.html
<div>
   <child-component name="Andrei"></child-component>
</div>

child.component.ts
@Component({ selector: 'child-component' })
export class ChildComponent {
  @Input() name: String;
}

More on Angular components communication: https://angular.io/guide/component-interaction

Answer 2

Dynamically, like React, you can use ng-content . This is the opposite of Reacts { props.children }

Use it so ( Component - Code Behind )

@Component({
  selector: 'btn',
  template: `
    <button class='btn' (click)="do()">
      <ng-content></ng-content>
    </button>
  `
})
export class ButtonComponent{
  do(){
    console.log("Ok")
  }  
}

And the HTML

<div>
    <btn>
        This is a dynamic Button
    </btn>
</div>

This is a dynamic Button can be a component, too. So like this:

<div>
    <btn>
        <div><span>Hello! </span><button>I'm a button inside a button!?</button></div>
        <app-my-custom-component [data]="bindAnything"></app-my-custom-component>
    </btn>
</div>

The Result can be look like this:

And here you can play with this on Stackblitz .

Read all about it in the official documentation here .

Content projection This topic describes how to use content projection to create flexible, reusable components.

To view or download the example code used in this topic, see the live example / download example.

Content projection is a pattern in which you insert, or project, the content you want to use inside another component. For example, you could have a Card component that accepts content provided by another component.