Part 1: Creating a data-bound component using an external template

Starter Code
//Example #1 Start - Creating a component

//our root app component
import {Component, NgModule} from '@angular/core'
import {BrowserModule} from '@angular/platform-browser'

@Component({
  selector: 'my-app',
  template: `
    <div>
      <h2>Example: {{title}}</h2>
      <div>1- Start - Creating a component</div>
      <hr>
      <h3>Contact Information</h3>
      <hr>
      <div>Name:{{student.name}}<div>
      <div>Email:{{student.email}}<div>
      <div>Cell:{{student.cell}}<div>
    </div>
  `,
})
export class App {
  title:string;
  student = {
    name:"Jane Doe",
    email:"jane@gmail.com",
    cell: "456-123-1234"
  }
  constructor() {
    this.title = 'Angular2 + TypeScript'
  }
}

@NgModule({
  imports: [ BrowserModule ],
  declarations: [ App ],
  bootstrap: [ App ]
})
export class AppModule {}
 
The code is working as can be seen:

 

  • What we will do next is split this out into separate files per the recommendations of the Angular Documentation.

This will require some changes to the code due to the  following:

  • The file names have changed.
  • “export” statements are added to allow the component and module to communicate with one another.
  • The “@Component” property “template:” is replaced with “templateUrl:  src/app.component.html”. This allows the use of a separate file for the component’s html code.
  • Note: when we are using the property “template:” the  html markup (Usually call metadata) uses the back tick ` (on the tilde key) to surround the metadata. This allow multi-lines to be written.  When the metadata becomes too large we use a separate html file as described above.

The resulting code can be seen:
https://plnkr.co/edit/KBrBzlgKXzG6HgDUo7eo?p=info

A more detailed description explaining line by line the code can be found here: <link to be placed here>

 

Creating and Communicating Between Components

  1. Creating a data-bound component  using an external template.
  2. Communicating with child component using @Input().
  3. Communicating with parent component using  @Output().
  4. Using template variables to interact with child components.
  5. Styling components.
1 – Creating a data-bound component  using an external template
//app/app.module.ts
import { NgModule } from '@angular/core';
import { BrowserModule } from '@angular/platform-browser';
import { AppComponent } from './app.component';
import { DataComponent} from './data.component';

@NgModule({
  imports: [ BrowserModule ],
  declarations: [
    AppComponent,
    DataComponent
  ],
  providers: [  ],
  bootstrap: [ AppComponent ]
})
export class AppModule {}
//app/app.component.ts
import { Component } from '@angular/core';

@Component({
  selector: 'my-app',
  template: `
       <data-app></data-app>
     `
})
export class AppComponent {}
//app.data.component
import { Component } from '@angular/core';

@Component({
  selector: 'data-app',
  templateUrl: './app/data.component.html'
})

export class DataComponent {}
<!-- app/app.component.html   -->
<div>
  <h1>Contact Book</h1>
  <h4>Email and phone numbers</h4>
  <hr>
  <h5>Your first contact</h5>

  <div style="margin-top:30px">
    Name:
  </div>
  <div>
    Email:
  </div>
  <div>
    Phone:
  </div>
</div>
Generating and Displaying Data
//app.data.component
import { Component } from '@angular/core';

@Component({
  selector: 'data-app',
  templateUrl: './app/data.component.html'
})

export class DataComponent {
   user:any= {
     name:'Jane Doe', 
     email: 'jane@gmail.com', 
     phone:'543-123-1212'
   };
}
 <!-- app/app.component.html   -->
<div>
  <h1>Contact Book</h1>
  <h4>Email and phone numbers</h4>
  <hr>
  <h5>Your first contact</h5>

  <div style="margin-top:30px">
    Name: {{user.name}}
  </div>
  <div>
    Email: {{user.email}}
  </div>
  <div>
    Phone: {{user.phone}}
  </div>
</div>

Talking the same language

Laying Down the Ground Rules

First lets get on the same page for terminology. As of this writing there are two main versions of the Google Angular language. To add to the confusion there are two main ways of writing these applications and two different IDEs (Interactive Development Environments).

Language Versions

  • Angular 1.x – Official Name: AngularJS
  • Angular 2.x – Official Name: Angular

These are two different frameworks. AngularJS uses the MVC (model, View, Controller) design pattern. Angular has a component based architecture.

I will be talking about Angular. There is no reason to develop new application in AngularJS.

Writing The Application

The source code can be generated in two different ways:

  • JavaScript
  • TypeScript

This is a very high view of code generation, there are many more variations but these are the two you will find in the Google documentation.

I will be using Typscript.

The IDE Tooling

Here we have a choice, the two most popular are:

  • Visual Studio Code (free)
  • WebStorm

I will be using Visual Studio – It works and it’s free.

Happy Coding

Geoff

Online Reference: https://angular.io/docs/ts/latest/guide/cheatsheet.html

Developing Angular 2 web apps with TypeScript

Angular 2 is not a library, but a framework that has everything you need to develop and deploy web applications. It introduces several concepts that may not be familiar for a web developer working with other frontend frameworks. This blog will  follow my path in understanding the following challenging topics, including:

  • How to write the code in one language (TypeScript), compile it into another (JavaScript), deploy the app in JavaScript, and debug the original TypeScript code in the browser.
  • Why using the principles of reactive programming are important and how to work with observable streams.
  • How to turn multiple source code files that represent your application components into a small number of optimized JavaScript files for deployment.