How to get inner html of Angular6 component and add it to component template?

Question

I want to be able to pass components and other html into other components in this way:

<app-container-component>
  <h3>All these items should be displayed in parent component</h3>
  <app-another-component></app-another-component>
</app-container-component>

How can I read inner items of container-component and render them inside component template?

Chris Stillwell · Accepted Answer · 2021-01-05 22:16:35Z

2

You can use the concept of "@Input","@Output-EventEmitter".By using these properties you can pass data from parent component to child component using @Input decorator and from child to parent using @output decorator. In your case app-container-component is the parent component and app-another-component is child component. You can access the below URL for the complete understanding of these decorators:-

https://angular.io/guide/component-interaction

Also in case if you want to pass HTML of component to other then you can use ContentChild or TemplateReferenceVariable. Refer below URL for other options:-

How can I pass in generic HTML to an Angular 2 component?

I hope this helps you.

edited Jan 5, 2021 at 22:16

Chris Stillwell

10.6k10 gold badges74 silver badges82 bronze badges

answered Jun 29, 2018 at 17:11

Abhishek Sharma

3601 silver badge10 bronze badges

Sign up to request clarification or add additional context in comments.

1 Comment

Oleksandr Bilenko Over a year ago

Hi! Thank you for answer. Seems that <ng-content></ng-content> is what I searched for

Collectives™ on Stack Overflow

How to get inner html of Angular6 component and add it to component template?

1 Answer 1

1 Comment

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

1 Comment

Your Answer

Sign up or log in

Post as a guest

Linked

Related