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.
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.
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.
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.
There are two types of templates: Static Template. Dynamic Templates.
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>
If you love us? You can donate to us via Paypal or buy me a coffee so we can maintain and grow! Thank you!
Donate Us With