Articles for March 2016

Angular 2.0 – Relative template and styles URLs | Eyal’s space

Date: March 26, 2016 Author: Eyal Vardi Comments: Leave a reply

This post will show how to work with systemjs and text plugin to achieve relative template and styles URLs.

Step 1:

Download the SystemJs Text plugin.

Step 2:

For SystemJS use, locate text.js in the application, and then locate it with map configuration:

System.config({

map: {

text: ‘path/to/text.js’

}

});

 

Step 3:

Imports the html and css file into the module and then use it in @Component decorator. See code.

import {Component} from ‘angular2/core’;
import html        from ‘./SubComp.html!text’;
import css         from ‘./SubComp.css!text’;

@Component({
selector: ‘sub-app’,
template: html,
styles  :[css]
})
export class MyComponent {}

 

Summary:

With relative URLs it more easy to organize each Component and it materials (HTML and CSS) in one folder.

If we need to move the folder it will be very easy to do it, without to update the template and styles URLs in the @Component decorator.

Source: Angular 2.0 – Relative template and styles URLs | Eyal’s space

Writing A Structural Directive in Angular 2

Date: March 23, 2016 Author: Eyal Vardi Comments: Leave a reply

When building Angular 2 applications, we spend most of our time writingcomponents. There are also other kinds of other kinds of directives we can define, but in my experience you end up needing to do that surprisingly rarely.

But recently I did end up in a situation where I needed a custom directive. I was using ngFor to render a collection of items, and I wanted to not keep track of items changing positions inside the collection. Instead I wanted a repeater directive that only adds and removes DOM elements but never actually moves them around to try to keep track of collection reorderings.

Tero Parviainen

Source: Writing A Structural Directive in Angular 2

Emulated or Native Shadow DOM in Angular 2 with ViewEncapsulation @toddmotto

Date: March 8, 2016 Author: Eyal Vardi Comments: Leave a reply

Shadow DOM has long been a talking point on the web, and the Polymer project pushes the proof of concept quite nicely, however, adoption of “raw” Web Components (Shadow DOM is part of the spec) is low. Instead, frameworks have provided “better” ways to achieve results and develop applications.

Angular 2 isn’t ignorant to Web Components at all, and provides us the powerful ability to use native Shadow DOM when we choose. We also have the choice to emulate Shadow DOM through Angular 2, achieving somewhat encapsulated Components and styling. If you need an overview on Web Components and Shadow DOM, I’d check out my article on it!
Source: Emulated or Native Shadow DOM in Angular 2 with ViewEncapsulation @toddmotto

Web Components vs. Iframes

Author: Eyal Vardi Comments: Leave a reply

Iframes… Can’t live with them, can’t live without them. Is it just me or anyone else is also wondering why these guys are still being used even though the 90s are long gone? Well, believe it or not – no one has come up with a better alternative for embedding another HTML document into your page since Microsoft first introduced the tag in 1997. Not until recently, at least.

Source: Web Components vs Iframes