In React, you can pass entire ponents into other ponents, and then easily display those ponents 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 ponents? How do you do this with ponents? 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.

I.e, I want to convert the following React code into Angular, where children is another React ponent 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 ing from a (limited) React background.

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

In React, you can pass entire ponents into other ponents, and then easily display those ponents 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 ponents? How do you do this with ponents? 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.

I.e, I want to convert the following React code into Angular, where children is another React ponent 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 ing from a (limited) React background.

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

• javascript
• reactjs
• angular

• Are you interested in rendering an "initialised ponent", i.e. an encapsulated instance of a ponent that you have already provided the @Input() data to and just want it placed on the screen somewhere? Or do you want a "ponent reference" where you will place the responsibility of actually feeding the ponent with data from within the child ponent? ViewContainerRef.createComponent() might be what you're after angular.io/api/core/ViewContainerRef angular.io/guide/dynamic-ponent-loader – nate-kumar Commented Jan 11, 2023 at 16:40
• @nate-kumar I think I just want the reference, but I could be wrong; I'm having to translate React code to Angular and it's very confusing at times. It seems like the original code (which isn't mine) is just a wrapper, so I'm trying to recreate that. – Deoxys_0 Commented Jan 11, 2023 at 16:45

2 Answers 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 ponent, too. So like this:

<div>
    <btn>
        <div><span>Hello! </span><button>I'm a button inside a button!?</button></div>
        <app-my-custom-ponent [data]="bindAnything"></app-my-custom-ponent>
    </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 ponents.

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 ponent. For example, you could have a Card ponent that accepts content provided by another ponent.

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

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

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

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

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

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

More on Angular ponents munication: https://angular.io/guide/ponent-interaction