Template & TemplateUrl
Both
template & templateUrl used to render html content in an angular
application.
In our last session, we used in-lined template. An
in-line template can be used but its only recommended for a short content.
To add in-line template
we are using a pair of backtick character (`).
@Component({
selector: 'my-app',
templateUrl: `
<div align="center">
<h1>Welcome to {{myData}} Application</h1>
</div>
`,
styleUrls: ['./app.component.css']
})
Even we can use either a single quote or
a double quote too to append an in-lined template in component, but when it is
suppose to be for one line.
@Component({
selector: 'my-app',
template: '<div
align="center"><h1>Welcome to {{myData}}
Application</h1></div>',
styleUrls: ['./app.component.css']
})
OR
@Component({
selector: 'my-app',
template: "<div><h1>Welcome
to {{myData}} Application</h1></div>",
styleUrls: ['./app.component.css']
})
When there is a
multi-lined html expected we need to render it through backtick character only.
But it’s a recommendation and advantage to use templateUrl instead an in-lined template because of no IDE intellisense, formatting feature not supported, maintainability is difficult, losing readability, violating SoC etc...
The advantage of having
a templateUrl is we can get benefited from all those are not supported by template
discussed in last line.
@Component({
selector: 'my-app',
templateUrl: './app.component2.html',
styleUrls: ['./app.component.css']
})
No comments:
Post a Comment