CODEWITHSUNDEEP
angularangular6angular-components
Oleksandr Bilenko
Oleksandr Bilenko

Reputation: 175

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

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?

Upvotes: 1

Views: 1477

Answers (1)

Abhishek Sharma
Abhishek Sharma

Reputation: 360

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.

Upvotes: 2

Related Questions