Logo Questions Linux Laravel Mysql Ubuntu Git Menu
 

More than one template in same component in AngularJS 1.5

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.

like image 893
wmnitin Avatar asked Jun 18 '16 22:06

wmnitin


People also ask

Can a component have multiple templates Angular?

You can simply extend your base component and overwrite the template. This allows you to have different components with the exact same functionality, but different templates. Save this answer.

Can we use multiple templates for a single component?

Note Although it's possible for a component to render multiple templates, we recommend using an if:true|false directive to render nested templates conditionally instead. Create multiple HTML files in the component bundle.

What are the elements that we can use in Angluar templates?

This template uses typical HTML elements like <h2> and <p> . It also includes Angular template-syntax elements, *ngFor , {{hero.name}} , (click) , [hero] , and <app-hero-detail> . The template-syntax elements tell Angular how to render the HTML to the screen, using program logic and data.

What are the different templates in Angular?

There are two types of templates: Static Template. Dynamic Templates.


1 Answers

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>
like image 188
ozhanli Avatar answered Oct 12 '22 03:10

ozhanli