CODEWITHSUNDEEP
angularjs
gunwin
gunwin

Reputation: 4832

AngularJS child components

How is it possible to have nested components with AngularJS, ie:

var parentComponent = {
    template: `<div class='parent'>CHILD HERE</div>`
};

var childComponent = {
template: `<h1>Child Component</h1>`,
}

angular.module('demoApp', [])
.component('parent', parentComponent)
.component('child', childComponent)

The HTML would be:

<div ng-app="demoApp">
    <parent>
        <child></child>
    </parent>
</div>

The rendered result would be: <div class='parent'><h1>Child Component</h1></div>

JSFIDDLE: https://jsfiddle.net/2qbky4eu/2/

Upvotes: 0

Views: 28

Answers (1)

gunwin
gunwin

Reputation: 4832

This can be done using the transclude property.

var parentComponent = {
    template: `<div class='parent'><ng-transclude></ng-transclude></div>`,
    transclude: true
};

var childComponent = {
template: `<h1>Child Component</h1>`,
}

angular.module('demoApp', [])
.component('parent', parentComponent)
.component('child', childComponent)

https://jsfiddle.net/du4oLr9z/

Upvotes: 1

Related Questions