Angular - netninja - Angular 2 Basics

Angular -youtube-Angualr 2 NetNinja
==================================
Video:1 => what Ng2 ?
-------
js framework for dynamic app. compoent based archi tech not typical MVC based.
core feature
compoent, module, directive, service
simple directory app
routing,service, firebase

Video:2 =>the angular CLI
---------
CLI help create new project (core files) upto deployment level Environment
for this need NPM
$ng new ninja-directory

Video:3 => Typescript Intro
-----------
super set of JS. very similar to Js addianaly classes, types, import, export
in TS - > datatype not reassiable. basic types are -> string, number, boolean, any,array

Video:4 => core files overview
-----------
app/src
config
node_module.....

Video:5 => Angular2 components
-----------
App componet
NAv bar compoent
Blog compoent -> sidebar component and Ariticle component

Video:6 => Templates and CSS
----------

 templateUrl: './app.component.html',
 styleUrls: ['./app.component.css']
if Url not used inside the component itself the dom and Css means need to provide - template and style
style.css is global style sheet. the properties are applciable across the application

Video:7 => creating components
----------
ng g c home

Video:8 => Nested component
-------
angualr 2 - if you need to import the componet means, create index.ts file insde the component. then export the componet
now in angular cli and angualr 4 not required

Video:9 => Ng-content
-----------
app.template.html
<app-home>hello content</app-home>
home.tempalte.html
<p>
  home works!
</p>
<ng-content></ng-content>
o/p with 
home works!
hello content ====> inside the directive data can't show by default.
So, need to provide in sub compnent with <ng-content> direvtive

Video:10 => Data Binding
----------
binding b/w the template and componet

{{ data binding }} string interpolcation
[require]='expression Property binding
(click)="show()" event binding
<input [(ngModel)] ="twoData" two way data binding

Video:11 => property binding
-----------
<input value ="net Ninja"> normal way
<input [value]="net Ninja"> Angular way of property binding

Video:12 =>     Event Binding
-----------

<buton (click)="alrt()">

Video:13 => two way data binding
----------
template to compoent and compoent to template

Video:14 => Input() decorator -> property binding
----------
<app-home [homevalue]="data" >service

Video:15 => Output() event emitter
-----------

Video:16 => Routing
-----------
/
/home
/directory

Video:17 => adding Link to applcation
------
<a rotuerLink="home" > home</a>
const appRoutes : routes [
{path:'home', component: HomeComponent}
]

Video:18 => route params
-----------
import ActivateRoute and make the

{path:'home/:ninja', component: HomeComponent

Video:19 => Directives
-----------
strutural , attribute

Video:20 => *ngFor
--------

Video:21 => pipes
-----------
upper case, date

Video:22 => custom Pipe
---------