{"flag":true,"single":true,"pageTitle":"ng-content in Angular | insert html from parent to child component| Angular 15+","post":{"id":64,"user_id":"1","slug":"ng-content-in-angular-directives-angular-12--crbm","title":"ng-content in Angular | insert html from parent to child component| Angular 15+","body":"<p><strong>ng-content<\/strong> is a built-in Angular directive that allows you to create a <strong>content projection<\/strong>, which is a way of <strong>passing HTML content from a parent component to a child component. <\/strong>It works as a placeholder within the child component's template, where the parent component's content will be inserted.<\/p>\r\n<p>Using ng-content enables you to create reusable and customizable components, as it allows the child component to define a structure while letting the parent component determine the content.<\/p>\r\n<p><strong>ie.<\/strong><\/p>\r\n<p><strong>Products.component.html \/\/parent<\/strong><\/p>\r\n<pre class=\"language-markup\"><code>&lt;div&gt;\r\n\t&lt;app-single-product&gt;\r\n\t\t&lt;h5 class=\"card-title\"&gt;Card title 1&lt;\/h5&gt;\r\n\t&lt;\/app-single-product&gt;\r\n\t&lt;app-single-product&gt;\r\n\t\t&lt;h5 class=\"card-title\"&gt;Card title 2&lt;\/h5&gt;\r\n\t&lt;\/app-single-product&gt;\r\n&lt;\/div&gt;<\/code><\/pre>\r\n<p><strong>single-product.component.html \/\/child<\/strong><\/p>\r\n<pre class=\"language-markup\"><code>&lt;div class=\"card\" style=\"width: 18rem;\"&gt;\r\n  &lt;div class=\"card-body\"&gt;\r\n    &lt;ng-content&gt;&lt;\/ng-content&gt;\r\n    &lt;p class=\"card-text\"&gt;Best card.&lt;\/p&gt;\r\n    &lt;a href=\"#\" class=\"btn btn-primary\"&gt;Go somewhere&lt;\/a&gt;\r\n  &lt;\/div&gt;\r\n&lt;\/div&gt;<\/code><\/pre>\r\n<p><strong>ng content&nbsp; <\/strong>render all html that is given inside&nbsp; <strong>&lt;app-single-product&gt; &lt;\/app-single-product&gt;<\/strong><\/p>","category_id":"13","is_private":"0","created_at":"2023-03-28T01:55:13.000000Z","updated_at":"2023-04-02T22:33:49.000000Z","category":{"id":13,"user_id":"1","name":"Angular","slug":"angular-rfjp","parent_id":"12","created_at":"2023-03-24T03:25:15.000000Z","updated_at":"2023-03-24T03:25:15.000000Z"},"user":{"id":1,"name":"R GONDAL","email":"rizikmw@gmail.com","email_verified_at":null,"two_factor_confirmed_at":null,"current_team_id":"1","profile_photo_path":null,"created_at":"2023-03-12T10:49:33.000000Z","updated_at":"2025-01-10T12:59:00.000000Z","profile_photo_url":"https:\/\/ui-avatars.com\/api\/?name=R+G&color=7F9CF5&background=EBF4FF"}},"pageDesc":"ng-content is a built-in Angular directive that allows you to create a content projection, which is a way of passing HTML content from a par - ng-content in Angular | insert html from parent to child component| Angular 15+ (Updated: April 2, 2023) - Read more about ng-content in Angular | insert html from parent to child component| Angular 15+ at my programming site [SITE]","categories":[]}