Trusted answers to developer questions
Trusted Answers to Developer Questions

Related Tags

angular
html

What is ng-content in Angular?

Fahad Farid

Grokking Modern System Design Interview for Engineers & Managers

Ace your System Design Interview and take your career to the next level. Learn to handle the design of applications like Netflix, Quora, Facebook, Uber, and many more in a 45-min interview. Learn the RESHADED framework for architecting web-scale applications by determining requirements, constraints, and assumptions before diving into a step-by-step design process.

The ng-content tag is used for content projection. It is basically a placeholder to hold the dynamic content until it is parsed. Once the template is parsed, Angular replaces the tag with content.

This tag is similar to using the curly-parenthesis in JS{{this. state. id}} except that the value comes from the component’s execution, not the state.

Let’s create a dynamic button that updates the label’s value given the input in another file:

index.ts
btn.html
<div>
<btn>
This is a dynamic Button
</btn>
</div>

This code adds a dynamic value to the label for the button when parsing the ButtonComponent. This will allow us to reuse the component wherever needed.

Then, when we place the component in the HTML file.

Note: Angular will know what text to place inside the label and will, therefore, display the content to the users.

Use ng-content to quickly execute reusable code in multiple places without having to set up.

RELATED TAGS

angular
html

CONTRIBUTOR

Fahad Farid
Copyright ©2022 Educative, Inc. All rights reserved

Grokking Modern System Design Interview for Engineers & Managers

Ace your System Design Interview and take your career to the next level. Learn to handle the design of applications like Netflix, Quora, Facebook, Uber, and many more in a 45-min interview. Learn the RESHADED framework for architecting web-scale applications by determining requirements, constraints, and assumptions before diving into a step-by-step design process.

Keep Exploring