https://github.com/rxlabz/angular2-typescript-basics
Basic Angular2 (Beta12) / Material2 (alpha.0) / Typescript(1.8) / Firebase demo app
https://github.com/rxlabz/angular2-typescript-basics
Last synced: 12 months ago
JSON representation
Basic Angular2 (Beta12) / Material2 (alpha.0) / Typescript(1.8) / Firebase demo app
- Host: GitHub
- URL: https://github.com/rxlabz/angular2-typescript-basics
- Owner: rxlabz
- Created: 2015-05-15T20:23:15.000Z (about 11 years ago)
- Default Branch: master
- Last Pushed: 2016-03-25T09:37:11.000Z (over 10 years ago)
- Last Synced: 2025-07-19T23:15:12.491Z (about 1 year ago)
- Language: JavaScript
- Homepage:
- Size: 232 KB
- Stars: 3
- Watchers: 2
- Forks: 0
- Open Issues: 0
-
Metadata Files:
- Readme: README.md
Awesome Lists containing this project
README
# angular2-typescript-basics
Angular2(beta9) / Typescript(1.8) with Firebase :
- Components with properties, events, directives, providers, templateURL and child components
- DI with providers
- custom (event) with EventEmitter
- stores data with Firebase
- uses NgFor & NgIf directives
- FormBuilder
- Tooltip Attribute directive
- material2 design alpha.0 integration ( md-button, md-toolbar)
## Setup
check [setup details](https://angular.io/docs/js/latest/quickstart.html)
```bash
npm install
```
## Run
cf. package.json "scripts"
```bash
npm run go
```
## Angular 2
### Basic Component
```typescrip
import {Component} from "angular2/core"
@Component({
selector:'nice-component'
templateUrl:"relativePath/to/NiceComponent.html"
})
class NiceComponent{
property:type;
constructor(){...}
aMethod(){...}
}
```
### Dependency Injection
```typescript
@Component({
selector:'nice-component',
providers:[AClassToInject]
})
// ...
class NiceComponent{
...
constructor(injectedInstance:AClassToInject){
...
}
...
}
// ...
@Injectable
export class AClassToInject{
// ...
}
bootstrap( App, [AClassToInject] );
```
### EventEmitter
```typescript
import { Component, EventEmitter } from "angular2/core";
@Component({
/* ... */
events:['deleteItem']
})
...
export class itemRenderer{
...
deleteItem:EventEmitter;
constructor(){
this.deleteItem = new EventEmitter();
}
removeItem( item:string ){
this.deleteItem.emit(item);
}
}
```
Listen to an event with the new (event) syntax
```html
```
### Component properties
```typescript
// itemRenderer.ts
import { Component, EventEmitter } from "angular2/core";
@Component({
...,
properties:['item: item']
})
```
```html
// Main.html
```
### Component sub-components
If a component A uses a component B, B must be declared in A @View.directives
```typescript
@Component({
...,
directives:[ ItemForm, ItemRenderer]
})
```
### Firebase / AngularFire storage
Firebase library from https://github.com/Microsoft/ngconf2015demo / https://github.com/davideast/ng2do
```typescript
// ItemStore.ts
var data = new AngularFire(new Firebase('https://webapi.firebaseio-demo.com/test'));
this.store = data.asArray();
// add, remove... an item
this.store.add( ... );
this.store.remove( ... );
```
### For directive
```html
- {{ item.title }}
```
### If directive
```html
```
### Forms
```html
Save
```
```javascript
private todoForm:ControlGroup;
var fb = new FormBuilder()
this.todoForm = fb.group({
title: [ this._item.title, Validators.required ]
});
if( this.todoForm.valid ){
this.hasError = false;
this.item.title = this.todoForm.value.title;
} else // ...
```
### Attribute Directive
**Host template** [itemRenderer.html](https://github.com/rxlabz/angular2-typescript-basics/blob/master/app/components/itemRenderer.html)
```html
```
**Attribute directive** [tooltiper.directive.ts](https://github.com/rxlabz/angular2-typescript-basics/blob/master/app/directives/tooltiper.directive.ts)
```typescript
@Directive({
selector: '[toolTiper]',
host: {
'(mouseenter)': 'onMouseEnter()',
'(mouseleave)': 'onMouseLeave()'
}
}
)
export class ToolTiper {
@Input('toolTiper') toolTipContent:string = '';
tooltipElement:ComponentRef;
constructor(
private el:ElementRef,
private container:ViewContainerRef,
private renderer:Renderer,
private loader:DynamicComponentLoader
) {
loader.loadNextToLocation(Tooltip, this.el)
.then(ref => this.tooltipElement = ref);
}
}
```
+ demo app