0

I was wondering if such mechanism is allowed in Angular:

<app-form-general>
  <p>Hello</p>
</app-form-general>

Angular compiles it and shows app-form-general, but I can't find a way for it to process child element. I wanted to create component with dynamic number of elements, but sadly I guess it's not something obtainable. Or is there something to process internal child data?

Improve this question
2

1 Answer 1

Reset to default
1

You should do in your component 'app-form-general'.

Where ever in your component, you want to show the child component. Add this 'ng-content' 

@Component({
  selector: 'app-any-component', // not app-root
  template:  '<button (click)="add">   
                 <ng-content></ng-content>
              </button>',
  styleUrls: ['./app.component.css']
})
export class AnyComponent{

}

// Other component

 <app-any-component> Hello </app-any-component>

Here is stackblitz

Improve this answer
3
  • 1
    Although this is the answer, I think some more clarification than 'Where ever in your component, you want to show the child component. Add this'. Explain ng-content a little bit maybe? Refer to some documentation.
    – Malcor
    Commented Oct 22, 2019 at 8:13
  • the root of the app cannot use 'ng-content', so perhaps use another example component to make it more clear :)
    – Poul Kruijt
    Commented Oct 22, 2019 at 8:14
  • @PierreDuc Yes, agreed. We cannot use in app-root. It's the same component which he is using.
    – Muhamamd Omar Muneer
    Commented Oct 22, 2019 at 8:16

Not the answer you're looking for? Browse other questions tagged or ask your own question.