0

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.

I.e, 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.

Deoxys_0
  • 65
  • 7
  • Are you interested in rendering an "initialised component", i.e. an encapsulated instance of a component that you have already provided the @Input() data to and just want it placed on the screen somewhere? Or do you want a "component reference" where you will place the responsibility of actually feeding the component with data from within the child component? `ViewContainerRef.createComponent()` might be what you're after https://angular.io/api/core/ViewContainerRef https://angular.io/guide/dynamic-component-loader – nate-kumar Jan 11 '23 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 Jan 11 '23 at 16:45

2 Answers2

1

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: enter image description here

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.

Flo
  • 2,232
  • 2
  • 11
  • 18
0
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

Tyzia
  • 116
  • 3
  • I understand this, but what I'm asking for is a way for the child component to be dynamic. In this case, an input using @Input(). – Deoxys_0 Jan 11 '23 at 17:11
  • I appreciate the edit but I'm talking about the ENTIRE component being passed, not just aspects of it. So @Input() would be taking an angular component, not a string. – Deoxys_0 Jan 11 '23 at 17:37
  • I am not sure what is the use case of passing component as Input() data, but maybe this will help you: https://stackoverflow.com/questions/43933783/pass-component-to-a-component-in-angular – Tyzia Jan 11 '23 at 17:50