I just learned about transclusion in Angular, but I don't know in which scenario would be good to use it, or what's the purpose of it.
if there is any difference? or perhaps it is a good practice to use one of them? or why would you do use transclusion for?
Let's say I have this component, why would I transclude data into it instead of just writing it inside it: scenario 1:
import { Component } from '@angular/core';
@Component({
selector: 'my-component',
template: `
<div class="my-component">
'My component works!'
</div>
`
})
export class MyComponent {}
scenario 2 (tranclusion):
import { Component } from '@angular/core';
@Component({
selector: 'my-component',
template: `
<div class="my-component">
<ng-content></ng-content>
</div>
`
})
export class MyComponent {}
and in the app component
<div class="app">
<my-component>
'My component works!'
</my-component>
</div>
and it would be something similar with child-parent components
<div class="my-component">
<child-component></child-component>
</div>
vs
Parent component:
<div class="my-component">
<ng-content></ng-content>
</div>
app component:
<div class="app">
<my-component>
<child-component></child-component>
</my-component>
</div>
This is a good question and will become apparent the more time you spend with Angular. Remembering that components exist to compartmentalize behavior, it's worth thinking which behavior your compartmentalizing.
Let's say you want to input names in your app, and you always want the names to appear and interact the same with your user. In this case, it makes sense to create a names component which inputs names the same way everywhere, and the form needing the name never needs to care about how names are rendered or collected. In this case, a parent-child relationship, where the child fully encapsulates its own behavior (and all child behavior) makes sense.
Conversely, let's pretend that you want to create a card with variable content. You know that you want the borders to always be the same, the title to have the same font, the padding to be the same. But the stuff in the middle will change, and it doesn't really matter relative to the styling of the card. This is a perfect opportunity for transclusion. You create a component which encapsulate a certain set of styling and behavior, while being agnostic to content passed into it. If you want to put an input into the card, the parent can do so and tie that input directly into its own form instead of creating a new child just for that case.
In summary - transclusion gives you the opportunity to reuse a component in flexible ways keeping certain behavior and styles consistent in low effort ways. A traditional parent-child relationship sans transclusion allows you to fully encapsulate a specific (and deterministic) behavior so that the parent can use it fully ignorant of any of its contents