Get the App
SLTechnology News&Howtos  ›  Development  › 

How to embed content in a component with Angular2's ng-content instruction

Shulou Source: shulou.com Published: 2022-06-03 19:28:35 11月12日 Update

This article is about how Angular2's ng-content directive embeds content in the component. The editor thinks it is very practical, so share it with you as a reference and follow the editor to have a look.

Ng-content instructions can embed template code in components to facilitate customization of reusable components.

For example: the header of the page is a general component, the navigation menu style has been set, only need to add the menu content in the header tag.

Use the ng-content tag to add the menu tag content contained in the parent component template to the specified location. The select attribute supports css selectors, such as "# id", ".class", "[name=value]", etc.

Template for the header component:

{{title}}

Checkbox

How to use the parent component:

Aa bb cc through the local variable call subcomponent method through the ViewChild call subcomponent method thank you for reading! On "Angular2 ng-content instructions in the component how to embed content" this article is shared here, I hope the above content can be of some help to you, so that you can learn more knowledge, if you think the article is good, you can share it out for more people to see it!

Tags: Components content instructions methods tags templates more articles menus good practical code location usage variables just properties articles styles see Apple Docker Huawei Linux macOS MariaDB Microsoft MySQL NVidia OPPO Reno vpn macOS NVidia MariaDB MySQL