{"id":6106,"date":"2015-07-29T12:15:03","date_gmt":"2015-07-29T09:15:03","guid":{"rendered":"http:\/\/www.webcodegeeks.com\/?p=6106"},"modified":"2015-07-23T13:24:10","modified_gmt":"2015-07-23T10:24:10","slug":"introduction-angular-2-fundamentals-components","status":"publish","type":"post","link":"https:\/\/www.webcodegeeks.com\/javascript\/angular-js\/introduction-angular-2-fundamentals-components\/","title":{"rendered":"Introduction to Angular 2 &#8211; The fundamentals of Components"},"content":{"rendered":"<p>Although the internals of Angular 2 are still changing a lot, the public API for building components is already quite stable. In this post we will go through on how we can build components with this new version of Angular, based on some code examples (the code is available <a href=\"https:\/\/github.com\/jhades\/blog.jhades.org\/tree\/master\/angular2-components\">here<\/a>).<\/p>\n<p>In this post we will learn the essentials of how to build Angular 2 components, and a bit also on how <em>not<\/em> to build them:<\/p>\n<ul>\n<li>Angular 2 &#8211; where to start?<\/li>\n<li>Components &#8211; the component public API<\/li>\n<li>Internals of Components &#8211; the Controller<\/li>\n<li>Properties and how bindings work<\/li>\n<li>Do&#8217;s and dont&#8217;s of Properties<\/li>\n<li>Events<\/li>\n<li>Do&#8217;s and dont&#8217;s of Events<\/li>\n<li>Conclusions<\/li>\n<\/ul>\n<h3>Where to start &#8211; Browser components<\/h3>\n<p>Let&#8217;s start by looking into how browser components work, taking for example the browser native component <code>select<\/code>:<\/p>\n<pre class=\" brush:php\">&lt;select&gt;\r\n    &lt;option value=\"volvo\"&gt;Volvo&lt;\/option&gt;\r\n    &lt;option value=\"saab\"&gt;Saab&lt;\/option&gt;\r\n    &lt;option value=\"audi\"&gt;Audi&lt;\/option&gt;\r\n&lt;\/select&gt;<\/pre>\n<p>This component like all browser components has some interesting properties:<\/p>\n<ul>\n<li>we don&#8217;t need to be aware of it&#8217;s internal structure in order to be able to reason about the component. We only need to know its public API.<\/li>\n<li>we don&#8217;t need to look at other parts of the application to know what this component is doing and how it will behave<\/li>\n<\/ul>\n<p>Angular 2 allows us to build UI components that are in every way similar to native browser components: encapsulated, reusable, and easy to reason about.<\/p>\n<h3>The Angular 2 component API in a nutshell<\/h3>\n<p>This is an example of an Angular component: a dropdown component, similar to the <code>select<\/code> native component but for example with support for disabled elements and other extra features:<\/p>\n<pre class=\" brush:php\">&lt;dropdown dropdown-height=\"200px\" dropdown-width=\"200px\"\r\n   [options]=\"refData.COUNTRIES\"\r\n   (selection)=\"onSelection($event)\"\r\n&lt;\/dropdown&gt;<\/pre>\n<p>Here is what is going on here:<\/p>\n<ul>\n<li>this component has an input property <code>options<\/code>, via which we provide a list of countries. Properties are the <strong>input<\/strong> that a component receives, and we use them to pass in an input <em>model<\/em> into the component. Based on the model the view will be built accordingly.<\/li>\n<li>the component emits an output event named <code>selection<\/code> when a new option is selected. Events are the <strong>output<\/strong> that a component produces. They report to the outside world a relevant change of the component internal state.<\/li>\n<\/ul>\n<h2>The internal structure of a component<\/h2>\n<p>Every component has two main internal parts:<\/p>\n<ul>\n<li>An internal Html\/CSS tree that encapsulates how the component view is built<\/li>\n<li>a Controller class, which coordinates the interaction between the view and the input model<\/li>\n<\/ul>\n<p>Given this, let&#8217;s now go through the 2 main component concepts (properties and events) with examples.<\/p>\n<h3>Understanding Properties<\/h3>\n<p>Let&#8217;s start with properties, and for that let&#8217;s introduce the <code>color-me<\/code> component, which can be used like this:<\/p>\n<pre class=\" brush:php\">&lt;div class='container'&gt;\r\n    &lt;color-me [sample-color]=\"'blue'\"&gt;&lt;\/color-me&gt;        \r\n&lt;\/div&gt;<\/pre>\n<p>And here is what the component looks live:<\/p>\n<p><a href=\"http:\/\/www.webcodegeeks.com\/wp-content\/uploads\/2015\/07\/color-me.png\"><img decoding=\"async\" class=\"aligncenter size-full wp-image-6108\" src=\"http:\/\/www.webcodegeeks.com\/wp-content\/uploads\/2015\/07\/color-me.png\" alt=\"color-me\" width=\"281\" height=\"76\" \/><\/a><\/p>\n<p>As we can see the <code>color-me<\/code> component is just an input box where we can type the name of a color and see it painted in a sample square.<\/p>\n<h3>How properties work<\/h3>\n<p>The component looks like a native browser component, with the exception of the <code>[sample-color]<\/code> notation. This means that the string <code>blue<\/code> is passed as an input property to the component.<\/p>\n<p>The input property will be automatically binded to a controller property, so we can use it inside the component.<\/p>\n<h2>The Component Controller<\/h2>\n<p>This is how the controller of the <code>color-me<\/code> component is implemented:<\/p>\n<pre class=\" brush:php\">@Component({\r\n    selector: \"color-me\",\r\n    properties: ['color: sampleColor']\r\n})\r\n@View({\r\n    templateUrl: 'color-me.html' \r\n})\r\nexport class ColorMe {\r\n}<\/pre>\n<p>As we can see, the <code>sampleColor<\/code> input property is binded to the controller, and renamed to <code>color<\/code>. This property is generally available inside the controller via <code>this.color<\/code>. It&#8217;s used for example to startup the view with an initial color.<\/p>\n<h2>The component View<\/h2>\n<p>This is how the component view is internally implemented in <code>color-me.html<\/code>:<\/p>\n<pre class=\" brush:php\">&lt;div class='color-me'&gt; \r\n    &lt;h4&gt;Type red, green, yellow, etc.&lt;\/h4&gt;\r\n    &lt;input type=\"text\" #input (keyup) [value]=\"color\"&gt;\r\n    &lt;div class='color-panel' [style.background]=\"input.value\"&gt;&lt;\/div&gt; \r\n&lt;\/div&gt;<\/pre>\n<p>A bit more is going on here:<\/p>\n<ul>\n<li>a local variable input is defined using <code>#input<\/code><\/li>\n<li>The input property <code>value<\/code> of the input box is being filled in with the color name via <code>[value]=\"color\"<\/code><\/li>\n<li>The background CSS property is binded to the value of the input box via <code>[style.background]=\"input.value\"<\/code><\/li>\n<\/ul>\n<p>So here we see that properties are not only a mechanism for passing data inside a component. They can be generally used to write to any valid DOM element property, such as for example the property <code>input.value<\/code>, which contains the input text field value, or <code>style.background<\/code> which contains the color of the sample rectangle.<\/p>\n<h2>When is the color applied<\/h2>\n<p>In this case the color is applied as the user types into the input box. This only happens because there is an event listener hooked inside the component on the <code>keyup<\/code> event, which causes change detection to be triggered when the user types.<\/p>\n<p>Try to remove the empty <code>(keyup)<\/code> listener, and the color will no longer be applied.<\/p>\n<h2>How NOT to use properties<\/h2>\n<p>Properties are meant to pass input data to a component, that preferably might change over time.Properties should be avoided in these cases:<\/p>\n<ul>\n<li>when passing constant string values to the component, such as for example <code>[width]=\"100px\"<\/code>. For that, use the <a href=\"https:\/\/angular.io\/docs\/js\/latest\/api\/core\/AttributeAnnotation-class.html\">Attribute<\/a> annotation instead.<\/li>\n<li>when trying to pass a command to the component, instructing the component to trigger a given action. This is to be avoided because it creates a tight coupling between the caller of the command and the component itself. Ideally the component should only receive input data and react to it. The provider of the data should have no information of how the data gets rendered or which actions it triggers.<\/li>\n<\/ul>\n<h3>Events<\/h3>\n<p>The second main concept of the component API is <strong>Events<\/strong>. Let&#8217;s start by introducing the <code>scroll-me<\/code> component:<\/p>\n<pre class=\" brush:php\">&lt;div class='container'&gt;\r\n    &lt;h3&gt;Component events example&lt;\/h3&gt;\r\n    &lt;scroll-me&gt;&lt;\/scroll-me&gt;\r\n&lt;\/div&gt;<\/pre>\n<p>And here is how the component looks like:<\/p>\n<p><a href=\"http:\/\/www.webcodegeeks.com\/wp-content\/uploads\/2015\/07\/scroll-me.png\"><img decoding=\"async\" class=\"aligncenter size-full wp-image-6109\" src=\"http:\/\/www.webcodegeeks.com\/wp-content\/uploads\/2015\/07\/scroll-me.png\" alt=\"scroll-me\" width=\"165\" height=\"225\" \/><\/a><\/p>\n<p>The component just scrolls a list up and down, when the corresponding buttons are clicked. This is the template of the component, and we can see the <code>click<\/code> event being binded on the down button with the <code>(click)=\"expression\"<\/code> syntax:<\/p>\n<pre class=\" brush:php\">&lt;div class='scroll-me' &gt;\r\n    &lt;button id='scroll-up' class='btn btn-primary scroll-btn'&gt;Up&lt;\/button&gt;\r\n    &lt;div class='selection' [scroll-top]=\"scroll\"&gt;\r\n        &lt;div *ng-for=\"#country of countries;\"&gt;\r\n        {{country.description}}\r\n    &lt;\/div&gt;\r\n    &lt;\/div&gt;\r\n    &lt;button class='btn btn-primary scroll-btn' (click)=\"onClick()\"&gt;Down&lt;\/button&gt;\r\n&lt;\/div&gt;<\/pre>\n<p>Again in this example we are binding directly to a DOM property via the <code>[scroll-top]<\/code> binding. This binding allows to write directly to the Javascript <code>scrollTop<\/code> property of the selection <code>div<\/code>, which is another example of how Angular 2 encourages direct use of the DOM API.<\/p>\n<p>But did you see it it? the Up button does not have a <code>(click)<\/code> binding, but the component still works! Let&#8217;s take a look at the controller code to see what is going on:<\/p>\n<pre class=\" brush:php\">@Component({\r\n  selector: \"scroll-me\"\r\n})\r\n@View({\r\n  templateUrl: 'scroll-me.html',\r\n  directives: [NgFor]\r\n})\r\nclass ScrollMe {\r\n  countries: Array&lt;Object&gt; = new ReferenceData().COUNTRIES;\r\n  scroll:number = 0;\r\n\r\n  constructor() {\r\n    document.getElementById('scroll-up').addEventListener('click', \r\n        () =&gt; this.scroll -= 30 );\r\n  }\r\n\r\n  onClick() {\r\n    this.scroll += 30;\r\n  }\r\n}<\/pre>\n<p>We can see that in the constructor of the component an event listener is being manually added to the up button. There is nothing special about that code, it&#8217;s just the pure DOM API event subscription API.<\/p>\n<p>The angular syntax for binding events via <code>(click)<\/code> is mainly an abbreviated way to do the same as this code.<\/p>\n<h3>How does the event get detected then?<\/h3>\n<p>The event gets detected via the Angular 2 change detection mechanism, which runs at the end of each virtual machine turn. This mechanism is based on the notion of Zones, see this <a href=\"http:\/\/blog.jhades.org\/introduction-to-angular2-the-main-goals\/\">previous post<\/a> for more about it.<\/p>\n<h3>Do&#8217;s and dont&#8217;s of Events<\/h3>\n<p>The event mechanism is easier to misuse than the properties mechanism. With properties we really have to go out of our way to pass in a command object of some sort to trigger an action inside the object.<\/p>\n<p>With events, its very easy to fall into the situation of using an event to trigger an action in an external component. The key thing to bear in mind about events, is that in order to keep the event emitter decoupled from the subscriber, the emitter should only report about changes on it&#8217;s internal state: for example a selection occurred in a dropdown component.<\/p>\n<p>This way the emitting component stays decoupled from the event subscribers, and does not have any information on what the event is being used for.<\/p>\n<h3>Conclusions<\/h3>\n<p>The Angular 2 API is much simpler to learn and use correctly than the Angular 1 API: there are a lot less concepts and they are much simpler to reason about.<\/p>\n<p>The components are better isolated and if the notions of properties and events are well applied, its simpler to write truly reusable components that can be understood just by looking at an html template.<\/p>\n<p>To start trying out the Angular 2 component API, you can find all the running code from this post <a href=\"https:\/\/github.com\/jhades\/blog.jhades.org\/tree\/master\/angular2-components\">here<\/a>, or clone the <a href=\"https:\/\/github.com\/search?utf8=%E2%9C%93&amp;q=angular2-seed\">angular2-seed<\/a> repository to start with a clean and ready to use project.<\/p>\n<div class=\"attribution\">\n<table>\n<tbody>\n<tr>\n<td><span class=\"reference\">Reference: <\/span><\/td>\n<td><a href=\"http:\/\/blog.jhades.org\/introduction-to-angular-2-fundamentals-of-components-events-properties-and-actions\/\">Introduction to Angular 2 &#8211; The fundamentals of Components<\/a> from our <a href=\"http:\/\/www.webcodegeeks.com\/wcg\/\">WCG partner<\/a> Aleksey Novik at the <a href=\"http:\/\/blog.jhades.org\/\">The JHades Blog<\/a> blog.<\/td>\n<\/tr>\n<\/tbody>\n<\/table>\n","protected":false},"excerpt":{"rendered":"<p>Although the internals of Angular 2 are still changing a lot, the public API for building components is already quite stable. In this post we will go through on how we can build components with this new version of Angular, based on some code examples (the code is available here). In this post we will &hellip;<\/p>\n","protected":false},"author":53,"featured_media":909,"comment_status":"open","ping_status":"closed","sticky":false,"template":"","format":"standard","meta":{"footnotes":""},"categories":[25],"tags":[],"class_list":["post-6106","post","type-post","status-publish","format-standard","has-post-thumbnail","hentry","category-angular-js"],"yoast_head":"<!-- This site is optimized with the Yoast SEO plugin v26.5 - https:\/\/yoast.com\/wordpress\/plugins\/seo\/ -->\n<title>Introduction to Angular 2 - The fundamentals of Components - Web Code Geeks - 2026<\/title>\n<meta name=\"description\" content=\"Although the internals of Angular 2 are still changing a lot, the public API for building components is already quite stable. In this post we will go\" \/>\n<meta name=\"robots\" content=\"index, follow, max-snippet:-1, max-image-preview:large, max-video-preview:-1\" \/>\n<link rel=\"canonical\" href=\"https:\/\/www.webcodegeeks.com\/javascript\/angular-js\/introduction-angular-2-fundamentals-components\/\" \/>\n<meta property=\"og:locale\" content=\"en_US\" \/>\n<meta property=\"og:type\" content=\"article\" \/>\n<meta property=\"og:title\" content=\"Introduction to Angular 2 - The fundamentals of Components - Web Code Geeks - 2026\" \/>\n<meta property=\"og:description\" content=\"Although the internals of Angular 2 are still changing a lot, the public API for building components is already quite stable. In this post we will go\" \/>\n<meta property=\"og:url\" content=\"https:\/\/www.webcodegeeks.com\/javascript\/angular-js\/introduction-angular-2-fundamentals-components\/\" \/>\n<meta property=\"og:site_name\" content=\"Web Code Geeks\" \/>\n<meta property=\"article:publisher\" content=\"https:\/\/www.facebook.com\/webcodegeeks\" \/>\n<meta property=\"article:published_time\" content=\"2015-07-29T09:15:03+00:00\" \/>\n<meta property=\"og:image\" content=\"https:\/\/www.webcodegeeks.com\/wp-content\/uploads\/2014\/10\/angularjs-logo.jpg\" \/>\n\t<meta property=\"og:image:width\" content=\"150\" \/>\n\t<meta property=\"og:image:height\" content=\"150\" \/>\n\t<meta property=\"og:image:type\" content=\"image\/jpeg\" \/>\n<meta name=\"author\" content=\"Aleksey Novik\" \/>\n<meta name=\"twitter:card\" content=\"summary_large_image\" \/>\n<meta name=\"twitter:creator\" content=\"@https:\/\/twitter.com\/JhadesDev\" \/>\n<meta name=\"twitter:site\" content=\"@webcodegeeks\" \/>\n<meta name=\"twitter:label1\" content=\"Written by\" \/>\n\t<meta name=\"twitter:data1\" content=\"Aleksey Novik\" \/>\n\t<meta name=\"twitter:label2\" content=\"Est. reading time\" \/>\n\t<meta name=\"twitter:data2\" content=\"8 minutes\" \/>\n<script type=\"application\/ld+json\" class=\"yoast-schema-graph\">{\"@context\":\"https:\/\/schema.org\",\"@graph\":[{\"@type\":\"Article\",\"@id\":\"https:\/\/www.webcodegeeks.com\/javascript\/angular-js\/introduction-angular-2-fundamentals-components\/#article\",\"isPartOf\":{\"@id\":\"https:\/\/www.webcodegeeks.com\/javascript\/angular-js\/introduction-angular-2-fundamentals-components\/\"},\"author\":{\"name\":\"Aleksey Novik\",\"@id\":\"https:\/\/www.webcodegeeks.com\/#\/schema\/person\/8cd4db06200cf7da43e00f1c3201b9cb\"},\"headline\":\"Introduction to Angular 2 &#8211; The fundamentals of Components\",\"datePublished\":\"2015-07-29T09:15:03+00:00\",\"mainEntityOfPage\":{\"@id\":\"https:\/\/www.webcodegeeks.com\/javascript\/angular-js\/introduction-angular-2-fundamentals-components\/\"},\"wordCount\":1347,\"commentCount\":0,\"publisher\":{\"@id\":\"https:\/\/www.webcodegeeks.com\/#organization\"},\"image\":{\"@id\":\"https:\/\/www.webcodegeeks.com\/javascript\/angular-js\/introduction-angular-2-fundamentals-components\/#primaryimage\"},\"thumbnailUrl\":\"https:\/\/www.webcodegeeks.com\/wp-content\/uploads\/2014\/10\/angularjs-logo.jpg\",\"articleSection\":[\"Angular.js\"],\"inLanguage\":\"en-US\",\"potentialAction\":[{\"@type\":\"CommentAction\",\"name\":\"Comment\",\"target\":[\"https:\/\/www.webcodegeeks.com\/javascript\/angular-js\/introduction-angular-2-fundamentals-components\/#respond\"]}]},{\"@type\":\"WebPage\",\"@id\":\"https:\/\/www.webcodegeeks.com\/javascript\/angular-js\/introduction-angular-2-fundamentals-components\/\",\"url\":\"https:\/\/www.webcodegeeks.com\/javascript\/angular-js\/introduction-angular-2-fundamentals-components\/\",\"name\":\"Introduction to Angular 2 - The fundamentals of Components - Web Code Geeks - 2026\",\"isPartOf\":{\"@id\":\"https:\/\/www.webcodegeeks.com\/#website\"},\"primaryImageOfPage\":{\"@id\":\"https:\/\/www.webcodegeeks.com\/javascript\/angular-js\/introduction-angular-2-fundamentals-components\/#primaryimage\"},\"image\":{\"@id\":\"https:\/\/www.webcodegeeks.com\/javascript\/angular-js\/introduction-angular-2-fundamentals-components\/#primaryimage\"},\"thumbnailUrl\":\"https:\/\/www.webcodegeeks.com\/wp-content\/uploads\/2014\/10\/angularjs-logo.jpg\",\"datePublished\":\"2015-07-29T09:15:03+00:00\",\"description\":\"Although the internals of Angular 2 are still changing a lot, the public API for building components is already quite stable. In this post we will go\",\"breadcrumb\":{\"@id\":\"https:\/\/www.webcodegeeks.com\/javascript\/angular-js\/introduction-angular-2-fundamentals-components\/#breadcrumb\"},\"inLanguage\":\"en-US\",\"potentialAction\":[{\"@type\":\"ReadAction\",\"target\":[\"https:\/\/www.webcodegeeks.com\/javascript\/angular-js\/introduction-angular-2-fundamentals-components\/\"]}]},{\"@type\":\"ImageObject\",\"inLanguage\":\"en-US\",\"@id\":\"https:\/\/www.webcodegeeks.com\/javascript\/angular-js\/introduction-angular-2-fundamentals-components\/#primaryimage\",\"url\":\"https:\/\/www.webcodegeeks.com\/wp-content\/uploads\/2014\/10\/angularjs-logo.jpg\",\"contentUrl\":\"https:\/\/www.webcodegeeks.com\/wp-content\/uploads\/2014\/10\/angularjs-logo.jpg\",\"width\":150,\"height\":150},{\"@type\":\"BreadcrumbList\",\"@id\":\"https:\/\/www.webcodegeeks.com\/javascript\/angular-js\/introduction-angular-2-fundamentals-components\/#breadcrumb\",\"itemListElement\":[{\"@type\":\"ListItem\",\"position\":1,\"name\":\"Home\",\"item\":\"https:\/\/www.webcodegeeks.com\/\"},{\"@type\":\"ListItem\",\"position\":2,\"name\":\"JavaScript\",\"item\":\"https:\/\/www.webcodegeeks.com\/category\/javascript\/\"},{\"@type\":\"ListItem\",\"position\":3,\"name\":\"Angular.js\",\"item\":\"https:\/\/www.webcodegeeks.com\/category\/javascript\/angular-js\/\"},{\"@type\":\"ListItem\",\"position\":4,\"name\":\"Introduction to Angular 2 &#8211; The fundamentals of Components\"}]},{\"@type\":\"WebSite\",\"@id\":\"https:\/\/www.webcodegeeks.com\/#website\",\"url\":\"https:\/\/www.webcodegeeks.com\/\",\"name\":\"Web Code Geeks\",\"description\":\"Web Developers Resource Center\",\"publisher\":{\"@id\":\"https:\/\/www.webcodegeeks.com\/#organization\"},\"potentialAction\":[{\"@type\":\"SearchAction\",\"target\":{\"@type\":\"EntryPoint\",\"urlTemplate\":\"https:\/\/www.webcodegeeks.com\/?s={search_term_string}\"},\"query-input\":{\"@type\":\"PropertyValueSpecification\",\"valueRequired\":true,\"valueName\":\"search_term_string\"}}],\"inLanguage\":\"en-US\"},{\"@type\":\"Organization\",\"@id\":\"https:\/\/www.webcodegeeks.com\/#organization\",\"name\":\"Exelixis Media P.C.\",\"url\":\"https:\/\/www.webcodegeeks.com\/\",\"logo\":{\"@type\":\"ImageObject\",\"inLanguage\":\"en-US\",\"@id\":\"https:\/\/www.webcodegeeks.com\/#\/schema\/logo\/image\/\",\"url\":\"https:\/\/www.webcodegeeks.com\/wp-content\/uploads\/2022\/06\/exelixis-logo.png\",\"contentUrl\":\"https:\/\/www.webcodegeeks.com\/wp-content\/uploads\/2022\/06\/exelixis-logo.png\",\"width\":864,\"height\":246,\"caption\":\"Exelixis Media P.C.\"},\"image\":{\"@id\":\"https:\/\/www.webcodegeeks.com\/#\/schema\/logo\/image\/\"},\"sameAs\":[\"https:\/\/www.facebook.com\/webcodegeeks\",\"https:\/\/x.com\/webcodegeeks\"]},{\"@type\":\"Person\",\"@id\":\"https:\/\/www.webcodegeeks.com\/#\/schema\/person\/8cd4db06200cf7da43e00f1c3201b9cb\",\"name\":\"Aleksey Novik\",\"image\":{\"@type\":\"ImageObject\",\"inLanguage\":\"en-US\",\"@id\":\"https:\/\/www.webcodegeeks.com\/#\/schema\/person\/image\/\",\"url\":\"https:\/\/secure.gravatar.com\/avatar\/fdd3c156085cc7c72b32afe338e88a3a3c4979223e6a66abc62a37f99eb65056?s=96&d=mm&r=g\",\"contentUrl\":\"https:\/\/secure.gravatar.com\/avatar\/fdd3c156085cc7c72b32afe338e88a3a3c4979223e6a66abc62a37f99eb65056?s=96&d=mm&r=g\",\"caption\":\"Aleksey Novik\"},\"description\":\"Software developer, Likes to learn new technologies, hang out on stackoverflow and blog on tips and tricks on Java\/Javascript polyglot enterprise development.\",\"sameAs\":[\"http:\/\/blog.jhades.org\/\",\"https:\/\/x.com\/https:\/\/twitter.com\/JhadesDev\"],\"url\":\"https:\/\/www.webcodegeeks.com\/author\/aleksey-novik\/\"}]}<\/script>\n<!-- \/ Yoast SEO plugin. -->","yoast_head_json":{"title":"Introduction to Angular 2 - The fundamentals of Components - Web Code Geeks - 2026","description":"Although the internals of Angular 2 are still changing a lot, the public API for building components is already quite stable. In this post we will go","robots":{"index":"index","follow":"follow","max-snippet":"max-snippet:-1","max-image-preview":"max-image-preview:large","max-video-preview":"max-video-preview:-1"},"canonical":"https:\/\/www.webcodegeeks.com\/javascript\/angular-js\/introduction-angular-2-fundamentals-components\/","og_locale":"en_US","og_type":"article","og_title":"Introduction to Angular 2 - The fundamentals of Components - Web Code Geeks - 2026","og_description":"Although the internals of Angular 2 are still changing a lot, the public API for building components is already quite stable. In this post we will go","og_url":"https:\/\/www.webcodegeeks.com\/javascript\/angular-js\/introduction-angular-2-fundamentals-components\/","og_site_name":"Web Code Geeks","article_publisher":"https:\/\/www.facebook.com\/webcodegeeks","article_published_time":"2015-07-29T09:15:03+00:00","og_image":[{"width":150,"height":150,"url":"https:\/\/www.webcodegeeks.com\/wp-content\/uploads\/2014\/10\/angularjs-logo.jpg","type":"image\/jpeg"}],"author":"Aleksey Novik","twitter_card":"summary_large_image","twitter_creator":"@https:\/\/twitter.com\/JhadesDev","twitter_site":"@webcodegeeks","twitter_misc":{"Written by":"Aleksey Novik","Est. reading time":"8 minutes"},"schema":{"@context":"https:\/\/schema.org","@graph":[{"@type":"Article","@id":"https:\/\/www.webcodegeeks.com\/javascript\/angular-js\/introduction-angular-2-fundamentals-components\/#article","isPartOf":{"@id":"https:\/\/www.webcodegeeks.com\/javascript\/angular-js\/introduction-angular-2-fundamentals-components\/"},"author":{"name":"Aleksey Novik","@id":"https:\/\/www.webcodegeeks.com\/#\/schema\/person\/8cd4db06200cf7da43e00f1c3201b9cb"},"headline":"Introduction to Angular 2 &#8211; The fundamentals of Components","datePublished":"2015-07-29T09:15:03+00:00","mainEntityOfPage":{"@id":"https:\/\/www.webcodegeeks.com\/javascript\/angular-js\/introduction-angular-2-fundamentals-components\/"},"wordCount":1347,"commentCount":0,"publisher":{"@id":"https:\/\/www.webcodegeeks.com\/#organization"},"image":{"@id":"https:\/\/www.webcodegeeks.com\/javascript\/angular-js\/introduction-angular-2-fundamentals-components\/#primaryimage"},"thumbnailUrl":"https:\/\/www.webcodegeeks.com\/wp-content\/uploads\/2014\/10\/angularjs-logo.jpg","articleSection":["Angular.js"],"inLanguage":"en-US","potentialAction":[{"@type":"CommentAction","name":"Comment","target":["https:\/\/www.webcodegeeks.com\/javascript\/angular-js\/introduction-angular-2-fundamentals-components\/#respond"]}]},{"@type":"WebPage","@id":"https:\/\/www.webcodegeeks.com\/javascript\/angular-js\/introduction-angular-2-fundamentals-components\/","url":"https:\/\/www.webcodegeeks.com\/javascript\/angular-js\/introduction-angular-2-fundamentals-components\/","name":"Introduction to Angular 2 - The fundamentals of Components - Web Code Geeks - 2026","isPartOf":{"@id":"https:\/\/www.webcodegeeks.com\/#website"},"primaryImageOfPage":{"@id":"https:\/\/www.webcodegeeks.com\/javascript\/angular-js\/introduction-angular-2-fundamentals-components\/#primaryimage"},"image":{"@id":"https:\/\/www.webcodegeeks.com\/javascript\/angular-js\/introduction-angular-2-fundamentals-components\/#primaryimage"},"thumbnailUrl":"https:\/\/www.webcodegeeks.com\/wp-content\/uploads\/2014\/10\/angularjs-logo.jpg","datePublished":"2015-07-29T09:15:03+00:00","description":"Although the internals of Angular 2 are still changing a lot, the public API for building components is already quite stable. In this post we will go","breadcrumb":{"@id":"https:\/\/www.webcodegeeks.com\/javascript\/angular-js\/introduction-angular-2-fundamentals-components\/#breadcrumb"},"inLanguage":"en-US","potentialAction":[{"@type":"ReadAction","target":["https:\/\/www.webcodegeeks.com\/javascript\/angular-js\/introduction-angular-2-fundamentals-components\/"]}]},{"@type":"ImageObject","inLanguage":"en-US","@id":"https:\/\/www.webcodegeeks.com\/javascript\/angular-js\/introduction-angular-2-fundamentals-components\/#primaryimage","url":"https:\/\/www.webcodegeeks.com\/wp-content\/uploads\/2014\/10\/angularjs-logo.jpg","contentUrl":"https:\/\/www.webcodegeeks.com\/wp-content\/uploads\/2014\/10\/angularjs-logo.jpg","width":150,"height":150},{"@type":"BreadcrumbList","@id":"https:\/\/www.webcodegeeks.com\/javascript\/angular-js\/introduction-angular-2-fundamentals-components\/#breadcrumb","itemListElement":[{"@type":"ListItem","position":1,"name":"Home","item":"https:\/\/www.webcodegeeks.com\/"},{"@type":"ListItem","position":2,"name":"JavaScript","item":"https:\/\/www.webcodegeeks.com\/category\/javascript\/"},{"@type":"ListItem","position":3,"name":"Angular.js","item":"https:\/\/www.webcodegeeks.com\/category\/javascript\/angular-js\/"},{"@type":"ListItem","position":4,"name":"Introduction to Angular 2 &#8211; The fundamentals of Components"}]},{"@type":"WebSite","@id":"https:\/\/www.webcodegeeks.com\/#website","url":"https:\/\/www.webcodegeeks.com\/","name":"Web Code Geeks","description":"Web Developers Resource Center","publisher":{"@id":"https:\/\/www.webcodegeeks.com\/#organization"},"potentialAction":[{"@type":"SearchAction","target":{"@type":"EntryPoint","urlTemplate":"https:\/\/www.webcodegeeks.com\/?s={search_term_string}"},"query-input":{"@type":"PropertyValueSpecification","valueRequired":true,"valueName":"search_term_string"}}],"inLanguage":"en-US"},{"@type":"Organization","@id":"https:\/\/www.webcodegeeks.com\/#organization","name":"Exelixis Media P.C.","url":"https:\/\/www.webcodegeeks.com\/","logo":{"@type":"ImageObject","inLanguage":"en-US","@id":"https:\/\/www.webcodegeeks.com\/#\/schema\/logo\/image\/","url":"https:\/\/www.webcodegeeks.com\/wp-content\/uploads\/2022\/06\/exelixis-logo.png","contentUrl":"https:\/\/www.webcodegeeks.com\/wp-content\/uploads\/2022\/06\/exelixis-logo.png","width":864,"height":246,"caption":"Exelixis Media P.C."},"image":{"@id":"https:\/\/www.webcodegeeks.com\/#\/schema\/logo\/image\/"},"sameAs":["https:\/\/www.facebook.com\/webcodegeeks","https:\/\/x.com\/webcodegeeks"]},{"@type":"Person","@id":"https:\/\/www.webcodegeeks.com\/#\/schema\/person\/8cd4db06200cf7da43e00f1c3201b9cb","name":"Aleksey Novik","image":{"@type":"ImageObject","inLanguage":"en-US","@id":"https:\/\/www.webcodegeeks.com\/#\/schema\/person\/image\/","url":"https:\/\/secure.gravatar.com\/avatar\/fdd3c156085cc7c72b32afe338e88a3a3c4979223e6a66abc62a37f99eb65056?s=96&d=mm&r=g","contentUrl":"https:\/\/secure.gravatar.com\/avatar\/fdd3c156085cc7c72b32afe338e88a3a3c4979223e6a66abc62a37f99eb65056?s=96&d=mm&r=g","caption":"Aleksey Novik"},"description":"Software developer, Likes to learn new technologies, hang out on stackoverflow and blog on tips and tricks on Java\/Javascript polyglot enterprise development.","sameAs":["http:\/\/blog.jhades.org\/","https:\/\/x.com\/https:\/\/twitter.com\/JhadesDev"],"url":"https:\/\/www.webcodegeeks.com\/author\/aleksey-novik\/"}]}},"_links":{"self":[{"href":"https:\/\/www.webcodegeeks.com\/wp-json\/wp\/v2\/posts\/6106","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/www.webcodegeeks.com\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/www.webcodegeeks.com\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/www.webcodegeeks.com\/wp-json\/wp\/v2\/users\/53"}],"replies":[{"embeddable":true,"href":"https:\/\/www.webcodegeeks.com\/wp-json\/wp\/v2\/comments?post=6106"}],"version-history":[{"count":0,"href":"https:\/\/www.webcodegeeks.com\/wp-json\/wp\/v2\/posts\/6106\/revisions"}],"wp:featuredmedia":[{"embeddable":true,"href":"https:\/\/www.webcodegeeks.com\/wp-json\/wp\/v2\/media\/909"}],"wp:attachment":[{"href":"https:\/\/www.webcodegeeks.com\/wp-json\/wp\/v2\/media?parent=6106"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/www.webcodegeeks.com\/wp-json\/wp\/v2\/categories?post=6106"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/www.webcodegeeks.com\/wp-json\/wp\/v2\/tags?post=6106"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}