credit: http://mean.ghost.io/sandbox-eval-plunker-and-angularjs/ _Created on Plnkr: Helping developers build the web._embed.plnkr.co Angular 4 by examples - Plunker The best way to learn programming is to see code in action: I have kept the following notes for future reference: CLI helps development to debugging, testing to deploying the Angular apps. Angular Here is the terminology: - refers to Angular 2 angular-cli - refers to Angular 4 @angular/cli To install npm install -g @angular/cli The underlying language used is which is translated to using . typescript javascript babel The task manager (like , ) used by Angular CLI is . gulp grunt webpack Old apps were page centric, modern apps are component based. 4 pillars of Angular 4 Component — encapsulates the template (html), data (variables) but not source of data and the behaviour (functions) of a view. Directives — bridges the gap between backend and front end. Used for DOM manipulation. Routers — takes care of navigation between components. Services — reusable tags primarily used for manipulating DOM elements Adding a component create a file mycomp.component.ts import {Component} from ' ' @angular/core ({selector:'my-component',template:'welcome to my custom component'}) @Component export class MyComponent{ } and add component reference to in parameter of app.module.ts declarations @NgModule import { MyComponent } from './mycomp.component'; ({declarations: [AppComponent, MyComponent],imports: [BrowserModule],providers: [],bootstrap: [AppComponent]}) @NgModule Adding a template file to a component Create a file and replace the key in of a component . footer.component.html template @Component templateUrl:'./footer.component.html' One way binding Add properties to component class: export class FooterComponent { title = "welcome to footer component" courses = ['Angular', 'React', 'jQuery'] } And bind them like this: <li *ngFor="let course of courses"> </li> Adding a service Add a file course.service.ts import { Injectable } from ' ' @angular/core () @Injectable export class CourseService { getCourses() {return ['Angular', 'React', 'jQuery'];}} Add the reference inside ’s app.module.ts @NgModule providers: [CourseService] Inject it in a component through it’s constructor: constructor(cs: CourseService) {this.courses = cs.getCourses();} Create a component from CLI Fire the command . ng g c newComponent There are 5 types of binding are supported Property binding - bind the ts component property with html template property [] Event binding - binding the html template event to ts component () Two way data binding - for component to template and vice versa data flow [()] Class binding — e.g.: [class.active]. Is used to add/remove a CSS class Style binding — used to set the CSS style rules Property binding Add a property to class profilePic = "http://lorempixel.com/400/200" Use the property in the component <img [src]=profilePic /> Add Bootstrap to Angular app As of this writing the most stable version of Bootstrap is 3.3. Hence, head over to and et CDN link under Bootstrap CDN somewhat like this: http://getbootstrap.com/docs/3.3/getting-started/#download <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" integrity="sha384-BVYiiSIFeK1dGmJRAkycuHAHRg32OmUcww7on3RYdg4Va+PmSTsz/K68vbdEjh4u" crossorigin="anonymous"> Add this to index.html Use event binding Add a button like this: <button class="btn btn-danger" (click)="clickHandler($event)">click me</button> And it’s corresponding event handler in the component: clickHandler($event) {console.log($event);} Using 2 way data binging <input type="text" [(ngModel)]="currentCity" /> This is similar to <input type="text" [value]="currentCity" (input)="currentCity=$event.target.value" /> Class binding With a property isActive in the component, this <button class="btn btn-danger" [class.active]="isActive" >automatic active - click me</button> is equal to <button class="btn btn-danger active" >manually active - click me</button> Style binding We can set the style properties of an element using style properties <button class="btn btn-danger" [style.backgroundColor]="isActive?'green':'red'" >click me</button> Inputs Set a input property in the child component ({selector: 'header-component',template: 'welcome to header component ',inputs: ['dataFromParentComponent']}) @Component export class HeaderComponent { dataFromParentComponent = ""; //or [@Input](http://twitter.com/Input "Twitter profile for @Input") dataFromParentComponent = ""; } Notice that there is no value assigned to . dataFromParentComponent In the parent component, set the value of this input with it’s own property: ({selector: 'my-component',template: `<header-component [dataFromParentComponent]="myComponentData" ></header-component>`}) @Component export class MyComponent { myComponentData = "Parent data" } Originally published at xameeramir.github.io .
