Angular2 diving in components ;-)
Home Home Contact us Contact
home News Projects Tests Files Follow manatlan on Twitter Sign in
back 2015/10/19 11:14

Angular2 diving in components ;-)

Here is a standalone file, which is fully executable in any browser (and ready to be hacked). It's typically the kind of example I dreamed to find at the beginning of my diving. But resources are, on the web, a huge soup of different versions. But remember : angular is in alpha ;-)

This example expose some concepts:

  • use of ES5 (classic javascript), cause I did't want to fight with all others concepts, to focus on a2 only ;-)
  • a custom pipe
  • Parent & nested child components
  • Share infos to child thru properties and content (transclude)
  • a custom event (to notify parent from a child event)
  • an external service (auto-injected), to deal with datas (model).

Hope it could help someone.

    <script src=""></script>

    function MyService() {
      var liste=[];
      return {
        all:function()    { return liste.slice(0) },
        add:function(x)   { liste.push(x) },
        sub:function(idx) { liste.splice(idx,1) },

    var MyPipe = ng
          constructor: function () {},
          transform(val) { return "**"+val+"**";}

    var ItemComponent = ng
          selector: 'item',
          properties: ["index"],
          template: `
                {{index}} ) <ng-content></ng-content>
                 <button (click)='onDeleteme($event)'>X</button>

          directives: [ng.CORE_DIRECTIVES],
          constructor: function () {
            this.deleteme = new ng.EventEmitter();
          onDeleteme:function(event) {

    var AppComponent = ng
          selector: 'app',
          bindings : [MyService],
          template: `
              <input #name/> <button (click)='mys.add(name.value)'>Add</button>
              <div *ng-for='#i of mys.all(); var index=index'>
                  <item [index]="index + 1" (deleteme)="mys.sub(index)">{{i | mypipe}}</item>
          directives: [ng.CORE_DIRECTIVES,ItemComponent],
          pipes: [MyPipe]
          constructor: [MyService, function (mys) {


Tags: angular
RSS Python Powered Get Ubuntu
©opyleft 2008-2019 - manatlan