AngularJS: Dynamically add component from list

Question

So I am working on a project that will allow a user to modify a template. The base template will be made up for components and the user will be able to add or remove components. I found a few things online - such as grapeJS but it is far to intense for this simple application.

Looking for some advice on a way to go about this, or any resources that will help.

Here is a basic example.

Basic template will consist of these components

Header
Text Post
Single Image
Footer

The list of components a user can choose from to add to template mught consist of..

Image Slideshow
Video
2 Column Text Post
Automatic wav file player of Wrecking Ball by Miley Cyrus

The user will be able to select from that above list and append to the template list above.

Any thoughts or inputs to get me going in the right direction would be helpful!

Can the user add these components to any section (Header, Text Post, Single Image, Footer), or just to the Text Post? — Christian Santos, Nov 29 '17 at 16:41
Questions asking us to recommend or find a book, tool, software library, tutorial or other **off-site resource** are off-topic for Stack Overflow as they tend to attract opinionated answers and spam. Instead, describe the problem and what has been done so far to solve it. — georgeawg, Nov 29 '17 at 23:30

score 7 · Answer 1 · answered Nov 29 '17 at 20:48

This should set you in the right direction:

Create your Image Slideshow, Video, 2 Column Text Post, and Miley Cyrus Video as AngularJS components or directives that work on their own.
In the directive/component where you want to dynamically load the components/directives you created above, use $compile to compile your components. Then, use $element to add your compiled element to the DOM.

I've created a barebones implementation of this, where myTemplate represents the template that holds the main template of your application. The directive slideshow represents the Image Slideshow that is dynamically added to the page when the user clicks on Add Component.

HTML

<div>
  <my-template></my-template>
</div>

JavaScript

var myApp = angular.module('myApp',[]);

myApp.directive('myTemplate', function($rootScope, $compile) {
    return {
    controller: function($element, $scope) {
        var vm = this;
        vm.name = "name";

      vm.insert = function() {
        var elStr = "<slideshow></slideshow>";
        var newScope = $rootScope.$new();
        var insertedEl = $compile(elStr)(newScope);
        $element.append(insertedEl);
      };
    },
    controllerAs: "vm",
    template: "<h1>Header</h1><p>Body</p><footer>Footer</footer><button ng-click='vm.insert()'>Add Component</button>"
  }
});

myApp.directive("slideshow", function() {
    return {
    controller: function() {
        this.text = "THIS IS A SLIDESHOW";
    },
    controllerAs: "vm",
    template: "<h1>{{vm.text}}</h1>"
  }
});

Click here for a working JSFiddle.

AngularJS: Dynamically add component from list

1 Answers1

Linked