14

Can I use more than one template in AngularJS 1.5 components ? I have one component having one attribute, so I want to load different template based on that attribute name. How can I achieve loading of templates based on attribute name of element?

jsConfigApp.component('show', {
templateUrl: 'component/show.html',  //How to change it based on attribute value?
bindings:{
    view:"@"
},
controller: function () {
    console.log(this.view)
    if (this.view = "user") {
       console.log("user")
    } else if (this.view = "user") {
        console.log("shop")
    } else {
        console.log("none")
    }      
}
})

Thanks.

wmnitin
  • 3,387
  • 1
  • 13
  • 19

2 Answers2

25

What about passing template as an parameter to component? For example create a component like:

module.component('testComponent', {
    controllerAs: 'vm',
    controller: Controller,
    bindings: {
        template  : '@'
    },
    templateUrl: function($element, $attrs) {
        var templates = {
            'first' :'components/first-template.html',
            'second':'components/second-template.html',
            'third' :'components/third-template.html'
        }
        return templates[$attrs.template];
    }
});

And using component as below may help

<test-component template='first'></test-component>
ozhanli
  • 1,456
  • 18
  • 25
  • 1
    This is such an elegant solution. It should be the accepted answer. Thank you! – hkong Jun 14 '17 at 16:41
  • 6
    this only works if you use 'hard-coded' value of template= attribute inside tag. Since you need something like this solution doesn't work because of no-interpolated value – DicBrus Dec 24 '17 at 09:25
9

I use two ways for making dynamic template of a component in 1.5.x:

1) Pass via attr property:

templateUrl: function($element, $attrs) {
      return $attrs.template;
}

2) Inject a service into template and get template from there:

templateURL function:

templateUrl: function($element, $attrs,TemplateService) {
      console.log('get template from service:' + TemplateService.getTemplate());
      return TemplateService.getTemplate();
}

In getTemplate function return template url based on variable

getTemplate: function(){
     if (this.view = "user") {
          return "user.html";
    } else if (this.view = "user") {
          return "shop.html";
    } else {
        console.log("none")
    } 
    return "shop.html";       
}

Pass variable 'view' to factory firstly via a set method.

If you need more change in html template, back to use directive and use compile service with more support.

Vu Quyet
  • 1,675
  • 1
  • 16
  • 22
  • I used this answer as opposed to the more highly voted answer. Using the service method in this answer allows you to avoid hard coding templates. See no-interpolation note by @DicBrus below. – P.Brian.Mackey Dec 27 '17 at 16:53