An Angular 2 application is completely split into components. Technically, an Angular 2 component is a reusable custom
tag that is mutable and encapsulated with an embedded state, that is, changes to the state or properties will mutate the UI.
All the components of the application are arranged in a tree structure, with a component as the root node.
Here is an example of how to create a component. It creates a card component that displays an image, title, and description. Place this code in the <script>
tag:
var Card = ng.core.Component({ selector: "card", inputs: ["src", "title", "desc"], templateUrl: "templates/card-template.html", styleUrls: ["templateStyles/card-style.css"] }) .Class({ constructor: function(){ } })
Then, create a file named card-template.html
, and place it in the componentTemplates
directory. Place this code in the file:
<style> .container ...