Angular 4 by examples

<!DOCTYPE html>
<html>

  <head>
    <base href="." />
    <script type="text/javascript" charset="utf-8">
      window.AngularVersionForThisPlunker = 'latest'
    </script>
    <title>angular playground</title>
    <!-- Latest compiled and minified CSS -->
  <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" integrity="sha384-BVYiiSIFeK1dGmJRAkycuHAHRg32OmUcww7on3RYdg4Va+PmSTsz/K68vbdEjh4u"
    crossorigin="anonymous">
    <link rel="stylesheet" href="style.css" />
    <script src="https://unpkg.com/core-js@2.4.1/client/shim.min.js"></script>
    <script src="https://unpkg.com/zone.js/dist/zone.js"></script>
    <script src="https://unpkg.com/zone.js/dist/long-stack-trace-zone.js"></script>
    <script src="https://unpkg.com/reflect-metadata@0.1.3/Reflect.js"></script>
    <script src="https://unpkg.com/systemjs@0.19.31/dist/system.js"></script>
    <script src="config.js"></script>
    <script>
    System.import('app')
      .catch(console.error.bind(console));
  </script>
  </head>

  <body>
 <my-component>loading...</my-component>
  </body>

</html>

/* Styles go here */

### Angular Starter Plunker - Typescript

var angularVersion;
if(window.AngularVersionForThisPlunker === 'latest'){
  angularVersion = ''; //picks up latest
}
else {
  angularVersion = '@' + window.AngularVersionForThisPlunker;
}

System.config({
  //use typescript for compilation
  transpiler: 'typescript',
  //typescript compiler options
  typescriptOptions: {
    emitDecoratorMetadata: true
  },
  paths: {
    'npm:': 'https://unpkg.com/'
  },
  //map tells the System loader where to look for things
  map: {
    
    'app': './',
    '@angular/core': 'npm:@angular/core'+ angularVersion + '/bundles/core.umd.js',
    '@angular/common': 'npm:@angular/common' + angularVersion + '/bundles/common.umd.js',
    '@angular/common/http': 'npm:@angular/common' + angularVersion + '/bundles/common-http.umd.js',
    '@angular/compiler': 'npm:@angular/compiler' + angularVersion  + '/bundles/compiler.umd.js',
    '@angular/platform-browser': 'npm:@angular/platform-browser' + angularVersion + '/bundles/platform-browser.umd.js',
    '@angular/platform-browser-dynamic': 'npm:@angular/platform-browser-dynamic' + angularVersion + '/bundles/platform-browser-dynamic.umd.js',
    '@angular/http': 'npm:@angular/http' + angularVersion + '/bundles/http.umd.js',
    '@angular/router': 'npm:@angular/router' + angularVersion +'/bundles/router.umd.js',
    '@angular/forms': 'npm:@angular/forms' + angularVersion + '/bundles/forms.umd.js',
    '@angular/animations': 'npm:@angular/animations' + angularVersion + '/bundles/animations.umd.js',
    '@angular/platform-browser/animations': 'npm:@angular/platform-browser' + angularVersion + '/bundles/platform-browser-animations.umd.js',
    '@angular/animations/browser': 'npm:@angular/animations' + angularVersion + '/bundles/animations-browser.umd.js',
    
    '@angular/core/testing': 'npm:@angular/core' + angularVersion + '/bundles/core-testing.umd.js',
    '@angular/common/testing': 'npm:@angular/common' + angularVersion + '/bundles/common-testing.umd.js',
    '@angular/common/http/testing': 'npm:@angular/common' + angularVersion + '/bundles/common-http-testing.umd.js',
    '@angular/compiler/testing': 'npm:@angular/compiler' + angularVersion + '/bundles/compiler-testing.umd.js',
    '@angular/platform-browser/testing': 'npm:@angular/platform-browser' + angularVersion + '/bundles/platform-browser-testing.umd.js',
    '@angular/platform-browser-dynamic/testing': 'npm:@angular/platform-browser-dynamic' + angularVersion + '/bundles/platform-browser-dynamic-testing.umd.js',
    '@angular/http/testing': 'npm:@angular/http' + angularVersion + '/bundles/http-testing.umd.js',
    '@angular/router/testing': 'npm:@angular/router' + angularVersion + '/bundles/router-testing.umd.js',
    'tslib': 'npm:tslib@1.6.1',
    'rxjs': 'npm:rxjs',
    'typescript': 'npm:typescript@2.2.1/lib/typescript.js'
  },
  //packages defines our app package
  packages: {
    app: {
      main: './main.ts',
      defaultExtension: 'ts'
    },
    rxjs: {
      defaultExtension: 'js'
    }
  }
});

//main entry point
import {platformBrowserDynamic} from '@angular/platform-browser-dynamic';
import {AppModule} from './app';

platformBrowserDynamic().bootstrapModule(AppModule)

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

import { MyComponent } from './mycomp.component';
import { HeaderComponent } from './header.component';
import { FooterComponent } from './footer.component';
import { VoterComponent } from './voter.component';

import { CourseService } from 'course.service'
import { DepartmentService } from 'department.service';

@NgModule({
  declarations: [
    VoterComponent, MyComponent, HeaderComponent, FooterComponent
  ],
  imports: [
    BrowserModule, FormsModule ,ReactiveFormsModule
  ],
  providers: [CourseService, DepartmentService],
  bootstrap: [MyComponent]
})

export class AppModule {}

import { Injectable } from '@angular/core'

@Injectable()

export class CourseService {

    getCourses() {
        return ['Angular', 'React', 'jQuery'];
    }
}

import { Injectable } from '@angular/core'

@Injectable()

export class DepartmentService {

    getDepartments() {
        return ['Dept 1', 'Dept 2', 'Dept 3'];
    }
}

{{title}} Property binding <input type="text" [value]="currentCity" />

<br/>
<input type="text" [value]="currentCity" (input)="currentCity=$event.target.value" />

<br/>
<input type="text" [(ngModel)]="currentCity" /> {{currentCity}}

<br/>
<img [src]=profilePic/>

<br/>
<button class="btn btn-danger" (click)="clickHandler($event)">click me</button>

<br/>
<button class="btn btn-danger active" (click)="clickHandler($event)">manually active - click me</button>

<br/>
<button class="btn btn-danger" [class.active]="isActive" (click)="clickHandler($event)">automatic active - click me</button>

<br/>
<button class="btn btn-danger" [style.backgroundColor]="isActive?'green':'red'">click me</button>

<br/>
	Star <span (click)="toggleActivateStar()" class="glyphicon" [class.glyphicon-star]="activateStar" [class.glyphicon-star-empty]="!activateStar" ></span>

<br/> Courses
<ul>
    <li *ngFor="let course of courses">
        {{course}}
    </li>
</ul>

Departments
<ul>
    <li *ngFor="let department of departments">
        {{department}}
    </li>
</ul>

import { Component, EventEmitter, Output } from '@angular/core'
import { CourseService } from './course.service'
import { DepartmentService } from './department.service'

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

export class FooterComponent {

    @Output() eventFromChildComponent = new EventEmitter();

    title = "welcome to footer component"
    courses
    departments
    currentCity = "Pune"
    profilePic = "http://lorempixel.com/400/200"

    isActive = true
    activateStar = true;

    constructor(cs: CourseService, ds: DepartmentService) {

        this.courses = cs.getCourses();
        this.departments = ds.getDepartments();

    }

    clickHandler($event) {
        console.log($event);
    }

    toggleActivateStar() {
        this.activateStar = !this.activateStar;
        this.eventFromChildComponent.emit({ dataFromChildComponent: "Data From Child Component" })
    }

}

import { Component } from '@angular/core'

@Component({
    selector: 'header-component',
    template: 'welcome to header component {{dataFromParentComponent}}',
    inputs: ['dataFromParentComponent'],
})

export class HeaderComponent {
    
    dataFromParentComponent = "";

}

import { Component } from '@angular/core'

@Component({
    selector: 'my-component',
    template: `<header-component (eventFromChildComponent)="setOutputData($event)" [dataFromParentComponent]="myComponentData" ></header-component>
    <br/> {{dataFromChildComponent}}
<footer-component></footer-component>`
})

export class MyComponent {

    myComponentData = "Parent data"
    dataFromChildComponent = "";

    setOutputData($event) {
        this.dataFromChildComponent = $event.dataFromChildComponent;

    }
}

import { Component, Input, Output, EventEmitter } from '@angular/core';

@Component({
    selector: 'voter',
    template: `
    <div class="voter">
        <i 
            class="glyphicon glyphicon-menu-up vote-button"
            [class.highlighted]="myVote == 1" 
            (click)="upVote()"></i>
            
        <span class="vote-count">{{ voteCount + myVote }}</span>
        
        <i 
            class="glyphicon glyphicon-menu-down vote-button"
            [class.highlighted]="myVote == -1" 
            (click)="downVote()"></i>
    </div>
    `,
    styles: [`
        .voter {
            width: 20px;
            text-align: center;
            color: #999;
        }
        
        .vote-count {
            font-size: 1.2em;
        }
        
        .vote-button {
            cursor: pointer;
        }
        
        .highlighted {
            font-weight: bold;
            color: orange;
        }
    `]
})

export class VoterComponent {
    @Input() voteCount = 0;
    @Input() myVote = 0;

    @Output() vote = new EventEmitter();

    upVote() {
        if (this.myVote == 1)
            return;

        this.myVote++;

        this.vote.emit({ myVote: this.myVote });
    }

    downVote() {
        if (this.myVote == -1)
            return;

        this.myVote--;

        this.vote.emit({ myVote: this.myVote });
    }
}