Components Directives article

.jsbeautifyrc

@@ -0,0 +1,9 @@
+{
+  "end_with_newline": true,
+  "indent_char": " ",
+  "indent_size": 2,
+  "preserve_newlines": true,
+  "max_preserve_newlines": 2,
+  "brace_style": "collapse,preserve-inline",
+  "space_after_anon_function": false
+}

.vscode/settings.json

@@ -1,7 +1,7 @@
 // Place your settings in this file to overwrite default and user settings.
 {
   "editor.tabSize": 2,
-  "editor.renderWhitespace": true,
+  "editor.renderWhitespace": "boundary",
   "editor.insertSpaces": true,
   "editor.detectIndentation": true
 }

cms/articles/1480153229/article-1480153229.component.js

@@ -0,0 +1,127 @@
+import { Component } from '@angular/core';
+import { DomSanitizer } from '@angular/platform-browser';
+import highlight from 'highlight.js';
+
+import { xblogTableContentService } from 'xblog-cores/modules';
+import { resourceUtils } from 'xblog-cores/utils';
+
+export var article1480153229Component = Component({
+  selector: 'article',
+  templateUrl: './templates/article-1480153229.html',
+  host: {
+    '[class.xblog-article-1480153229]': 'true'
+  }
+}).Class({
+  constructor: [
+    DomSanitizer,
+    xblogTableContentService,
+
+    function(sanitizer, tableContentService) {
+      this.id = 1480153229;
+      this.sanitizer = sanitizer;
+      this.tableContentService = tableContentService;
+    }
+  ],
+
+  ngOnInit: function() {
+    this.tableContents = this.tableContentService
+      .getBuilder()
+      .addHeadings([{
+          id: 'What is Component?',
+          name: 'What is Component?'
+        },
+        {
+          id: 'Component\'s Metadata Properties',
+          name: 'Component\'s Metadata Properties'
+        },
+        {
+          id: 'What is Directive?',
+          name: 'What is Directive?'
+        },
+        {
+          id: 'Directive\'s Metadata Properties',
+          name: 'Directive\'s Metadata Properties'
+        }
+      ])
+      .addSubHeadings([{
+        headingId: 'my-heading',
+        id: 'my-subheading',
+        name: 'My subheading'
+      }, ])
+      .build();
+
+    this.components = {
+      simpleComponent: {
+        sourceCode: {
+          name: 'A Simple Component',
+          link: resourceUtils.getGithubArticleFileLink(this.id, 'ng-on-changes/example.component.js')
+        },
+        codeBlocks: this.getCodeBlock(getSimpleComponent)
+      },
+      complexComponent: {
+        sourceCode: {
+          exampleComponent: {
+            name: 'Component has some attributes'
+          }
+        },
+        codeBlocks: this.getCodeBlock(getComplexComponent)
+      },
+      simpleDirective: {
+        sourceCode: {
+          name: 'A Simple Directive',
+          link: resourceUtils.getGithubArticleFileLink(this.id, 'ng-on-changes/example.component.js')
+        },
+        codeBlocks: this.getCodeBlock(getSimpleDirective)
+      },
+    };
+  },
+
+  getCodeBlock: function(getter, lang) {
+    var _langs = lang ? [lang] : ['javascript', 'html', 'css'];
+
+    var _codeBlock = highlight.highlightAuto(getter().replace('', '').replace(/^    /gm, ''), _langs).value;
+
+    return this.sanitizer.bypassSecurityTrustHtml(_codeBlock);
+  }
+});
+
+function getSimpleComponent() {
+  return `
+    import { Component } from '@angular/core';
+
+    export const AppComponent = Component({
+      selector: 'my-app',
+      template: '<h1>My First Component</h1>'
+    })
+    .Class({
+      constructor: function(){ }
+    });`;
+}
+
+function getComplexComponent() {
+  return `
+    import { Component } from '@angular/core';
+
+    export const HeroListComponent = Component({
+      ...
+      inputs: ['hero'],
+      outputs: ['heroUpdated'],
+      styles: ['h1 { color: "red" }']
+    })
+    .Class({
+      constructor: function(){ }
+    });`;
+}
+
+function getSimpleDirective() {
+  return `
+    import { Directive } from '@angular/core';
+
+    export const HightLight = Directive({
+      selector: '[hightlight]',
+      inputs: ['color']
+    })
+    .Class({
+      constructor: function(){ }
+    });`;
+}

cms/articles/1480153229/index.js

@@ -0,0 +1,15 @@
+import { resourceUtils } from 'xblog-cores/utils';
+import { article1480153229Component } from './article-1480153229.component';
+
+export var article1480153229 = {
+  id: 1480153229,
+  title: 'Components Directives in Angular 2',
+  postedDate: 'Sat Nov 26 2016 16:40:28 GMT+0700 (ICT)',
+  author: 'Thanh Tran',
+  cover: resourceUtils.getImg('xblog-home-cover.jpg'),
+  routeLink: resourceUtils.getArticleRouteLink('components-directives-1480153229.html'),
+  relatedArticles: [],
+  tags: [],
+  description: 'Angular 2 applications are made of components. A component is the combination of an HTML template and a component class that controls a portion of the screen.',
+  content: article1480153229Component,
+};

cms/articles/1480153229/templates/article-1480153229.html

@@ -0,0 +1,138 @@
+<p>Full sources code example</p>
+<p>Version: Angular 2.4</p>
+
+<xblog-table-content [model]="tableContents">
+  <xblog-title>
+    <h5 class="section-subject">Table of Contents</h5>
+  </xblog-title>
+</xblog-table-content>
+
+<h2>What is Component?</h2>
+
+<p>In Angular 2, components are the main way we build and specify elements and logic on the page.</p>
+
+<br/>
+
+<p>Components are the most basic building block of an UI in an Angular application. An Angular application is a tree of Angular components. Angular components are a subset of directives. Unlike directives, components always have a template and only one component
+  can be instantiated per an element in a template. A component controls a portion of the screen—a view—through its associated template.</p>
+
+<br/>
+
+<p>A component must belong to an NgModule in order for it to be usable by another component or application. To specify that a component is a member of an NgModule, you should list it in the declarations field of that NgModule.</p>
+
+<br/>
+
+<p>In addition to the metadata configuration specified via the Component, components can control their runtime behavior by implementing various Life-Cycle hooks.</p>
+
+<br/>
+
+<xblog-code-panel>
+  <xblog-title>{{components.simpleComponent.sourceCode.name}}</xblog-title>
+  <a xblog-source-code [href]="components.simpleComponent.sourceCode.link">Full Code</a>
+  <xblog-code [innerHtml]="components.simpleComponent.codeBlocks"></xblog-code>
+</xblog-code-panel>
+
+<br/><br/>
+
+<p>We use <strong>Component</strong> to add some metadata to AppComponent:</p>
+
+<ul>
+  <li>A selector that specifies a simple CSS selector for an HTML element that represents the component.</li>
+  <li>A template that tells Angular how to render the component's view.</li>
+</ul>
+
+<p>Also, we have component <strong>Class</strong> that controls the appearance and behavior of a view through its template. Here, we only have the root component, AppComponent. Since we don't need any application logic in the simple example, it's empty.
+</p>
+<br/>
+
+<p>We export the AppComponent class so that we can import it into the application.</p>
+
+<br/>
+
+<p><strong>Note:</strong> We are using angular 2 by Javascript, so we need at least constructor function. If we don't have the logic for component, we need to create empty constructor function as above component.</p>
+
+<br/>
+
+<h2>Component's Metadata Properties</h2>
+
+<p>A component needs at least 2 metadata properties: selector and template. So, it can have a lot of metadata properties to handle logic and behavior.</p>
+
+<br/>
+
+<p>Here is a component using <strong>inputs</strong> to list of class property names to data-bind as component inputs and <strong>outputs</strong> to list of class property names that expose output events that others can subscribe to.</p>
+
+<br/>
+
+<xblog-code-panel>
+  <xblog-title>{{components.complexComponent.sourceCode.name}}</xblog-title>
+  <xblog-code [innerHtml]="components.complexComponent.codeBlocks"></xblog-code>
+</xblog-code-panel>
+
+<br/><br/>
+
+<p>In addition, a component has many others metadata properties:</p>
+
+<ul>
+  <li><strong>animations</strong> - list of animations of this component.</li>
+  <li><strong>changeDetection</strong> - change detection strategy used by this component.</li>
+  <li><strong>encapsulation</strong> - style encapsulation strategy used by this component.</li>
+  <li><strong>entryComponents</strong> - list of components that are dynamically inserted into the view of this component.</li>
+  <li><strong>exportAs</strong> - name under which the component instance is exported in a template.</li>
+  <li><strong>host</strong> - map of class property to host element bindings for events, properties and attributes.</li>
+  <li><strong>inputs</strong> - list of class property names to data-bind as component inputs.</li>
+  <li><strong>interpolation</strong> - custom interpolation markers used in this component's template.</li>
+  <li><strong>moduleId</strong> - ES/CommonJS module id of the file in which this component is defined.</li>
+  <li><strong>outputs</strong> - list of class property names that expose output events that others can subscribe to.</li>
+  <li><strong>providers</strong> - list of providers available to this component and its children.</li>
+  <li><strong>queries</strong> - configure queries that can be injected into the component.</li>
+  <li><strong>selector</strong> - css selector that identifies this component in a template.</li>
+  <li><strong>styleUrls</strong> - list of urls to stylesheets to be applied to this component's view.</li>
+  <li><strong>styles</strong> - inline-defined styles to be applied to this component's view.</li>
+  <li><strong>template</strong> - inline-defined template for the view.</li>
+  <li><strong>templateUrl</strong> - url to an external file containing a template for the view.</li>
+  <li><strong>viewProviders</strong> - list of providers available to this component and its view children.</li>
+</ul>
+
+<h2>What is Directive?</h2>
+
+<p>Directive allows you to mark a class as an Angular directive and provide additional metadata that determines how the directive should be processed, instantiated and used at runtime.</p>
+
+<br/>
+
+<p>Directives allow you to attach behavior to elements in the DOM..</p>
+
+<br/>
+
+<p>A directive must belong to an NgModule in order for it to be usable by another directive, component, or application. To specify that a directive is a member of an NgModule, you should list it in the declarations field of that NgModule.</p>
+
+<br/>
+
+<p>In addition to the metadata configuration specified via the Directive, directives can control their runtime behavior by implementing various Life-Cycle hooks.</p>
+
+<br/>
+
+<p>This is a HightLight directive to hight light a text with dynamic color.</p>
+
+<br/>
+
+<xblog-code-panel>
+  <xblog-title>{{components.simpleDirective.sourceCode.name}}</xblog-title>
+  <a xblog-source-code [href]="components.simpleDirective.sourceCode.link">Full Code</a>
+  <xblog-code [innerHtml]="components.simpleDirective.codeBlocks"></xblog-code>
+</xblog-code-panel>
+
+<br/><br/><br/>
+
+<h2>Directive's Metadata Properties</h2>
+
+<p>The directive does not have template and style, but it has a lot of the metadata properties to handle behavior</p>
+
+<ul>
+  <li><strong>exportAs</strong> - name under which the component instance is exported in a template.</li>
+  <li><strong>host</strong> - map of class property to host element bindings for events, properties and attributes.</li>
+  <li><strong>inputs</strong> - list of class property names to data-bind as component inputs.</li>
+  <li><strong>outputs</strong> - list of class property names that expose output events that others can subscribe to.</li>
+  <li><strong>providers</strong> - list of providers available to this component and its children.</li>
+  <li><strong>queries</strong> - configure queries that can be injected into the component.</li>
+  <li><strong>selector</strong> - css selector that identifies this component in a template.</li>
+</ul>