Intro

Angular 2 is a significant departure from Angular 1.X in terms of style and syntax. I have to admit that it felt like the first day of school the first time I sat down to try my hand at Angular 2.

Eventually, I began to notice a pattern emerge when creating Angular components that made things easier once I was able to articulate it. I created a simple mnemonic device to help me remember what steps to take when creating an Angular component; the word is CIDER.

CIDER

• Create your class
• Import your dependencies
• Decorate your class
• Enhance with composition
• Repeat for sub-components

Let me show you how this works with a code example from the Tour of Heroes Tutorial.

Create Your Class

The first thing we are going to do is create is our AppComponent class.

class AppComponent {
  public title = 'Tour of Heroes';
}

Import Your Dependencies

The next thing we are going to do is import our dependencies. The only dependency we have for AppComponent for now is just Component.

import {Component} from '@angular/core';

class AppComponent {
  public title = 'Tour of Heroes';
}

Decorate Your Class

Now that we have imported our basic Angular dependencies, it is time to decorate our class to do Angular things. We are going to tell Angular to take our AppComponent class and bind it to the my-app element with the my-template.html file.

import {Component} from '@angular/core';
class Hero {
  id: number;
  name: string;
}
@Component({
  selector: 'my-app',
  templateUrl:'my-template.html'
})
class AppComponent {
  public title = 'Tour of Heroes';
  public hero: Hero = {
    id: 1,
    name: 'Windstorm'
  };
}

In this example, I am using templateUrl because of formatting issues but you can also use the template property with string literals as illustrated in the tutorial.

<h1>{{title}}</h1>
<h2>{{hero.name}} details!</h2>
<div><label>id: </label>{{hero.id}}</div>
<div><label>name: </label>{{hero.name}}</div>

Enhance with Composition

Now that we have laid the foundation, it is time to enhance our component. We are going to take our current template and add in an input element which you can see below.

<h1>{{title}}</h1>
<h2>{{hero.name}} details!</h2>
<div><label>id: </label>{{hero.id}}</div>
<div>
  <label>name: </label>

<div><input [(ngModel)]="hero.name" placeholder="name"></div>
</div>

Repeat for Sub-Components

We have just enhanced our component to handle form input, but obviously we would not stop there in real-life. As our application grows in complexity, we are going to want to abstract those units of complexity into sub-components. This is where the CIDER process starts again. For instance, you may have a form that has some complex validation that you want to isolate from the main component. You would start CIDER by first declaring a new class to encapsulate your form functionality, import your dependencies, and so on.

EXTRA: Bootstrap the Main Component

Since this is the main component, we are going to need to do one extra step to get our application running and that is to bootstrap it. We will first import the platformBrowserDynamic function, NgModule decorator, and other module dependencies. Then at the bottom of our class we kick things off by creating an AppModule class, decorating it, and then calling platformBrowserDynamic().bootstrapModule with the module we just created as the only argument. You only need to do this once for your application and not for every single component.

import {platformBrowserDynamic} from '@angular/platform-browser-dynamic';

import {Component, NgModule} from '@angular/core'
import {FormsModule} from '@angular/forms';
import {BrowserModule} from '@angular/platform-browser'

class Hero {
  id: number;
  name: string;
}
@Component({
  selector: 'my-app',
  templateUrl:'my-template.html'
})
class App {
  public title = 'Tour of Heroes';
  public hero: Hero = {
    id: 1,
    name: 'Windstorm'
  };
}

@NgModule({
  imports: [ BrowserModule, FormsModule ],
  declarations: [ App ],
  bootstrap: [ App ]
})
export class AppModule {}

platformBrowserDynamic().bootstrapModule(AppModule)

Outro

Hopefully, this little trick that I use makes it easier for you to make the jump from Angular 1.X to Angular 2. Check out the resources below for a great place to start applying this technique. Let me know what you think in the comments!

Tour of Heroes Tutorial

Egghead.io – Angular 2 Fundamentals

Angular Class – Angular 2 Starter