Angular 4 learning snippets, codes

angular-4-learning.md

Angular JS 4(2)

• Angular 4 Basic
• Angular 4 Routing ( Child, Guards, Events )
• Angular 4 Template, Component
• Angular 4 Service/Directive
• Implementation with Rails, Laravel
• Angular 4 Advanced
• Angular 4 Sample applications
• Profile using Angular 4 Sample

Angular Routes Full

1. Add this on html <base href="/">
2. Router structure

const appRoutes: Routes = [
  { path: '/', component: HomeComponent },
  { path: '/about', component: AboutComponent },
  { path: '/page.:id', component: PageComponent},
  { 
    path: '/posts'
    component: PostComponent,
    children:[
      {
        path: '', component:PostIndexComponent
      },
      {
        path: ':id', 
        coponent: PostSingleComponent,
        children:[
          {
            path: '/edit', component: PostEditComponent
          }
        ]
      }
    ]
   },
   {
      path: '/dashboard'
      component: DashboardComponent,
      CanActivate: <LOGIC FOR AUTHETICATION>,
      CanActivateChild: <LOGIN>,
      CanDeactivate: <DEACTIVATE LOGIN>,
      Resolve: <ROUTE ACTIVATE WHEN IN RESOLVED>,
      CanLoad: <SOME CONDITION TO LOAD>,
      children:[
        <ROUTES ARE FOR LOGGED USERS]
      ]
   }
];

1. [routerLink] and RouterLinkActive: [routerLink] set links, support params and other

/// views 
<a [routerLink]="['/user/bob']" [queryParams]="{debug: true}" queryParamsHandling="merge">
  link to user component
</a>
<a [routerLink]="['/crisis-center', { foo: 'foo' }]">Crisis Center</a>

/// From Controller, Service, Component decoration file
this.router.navigate(['/hero', hero.id]); 

NG Commands

Command	Usage
ng g component <Component Name>	Generate component, template, css and test
ng g directive <Directive Name>	Generate directive
ng g pipe <Pipe>	Generate Pipe
ng g service <Service>	Generate Servuce
ng g class <Class Name>	Generate Class
ng g guard <Guard Name>	Generate Guard
ng g interface <Interface Name>	Generate Interface
ng g module <Module Name>	Generate Module
ng g enum <Enum Name>	Generate Enum

** ng g component home/ComponentName ** will create a folder home and place component inside it

Angular Components

• Pipes

ng g pipe

It works like filters in angular 1, Used to transform values to some form. Example: Convert date to some time ago format

• Service

ng g service / <Dir/ServiceName>

Tips

• Set SASS instead of CSS on angular 4

ng new My_New_Project --style=sass // For new project
ng set defaults.styleExt scss  // Existing project

• External scripts can be placed in angular-cli.json's scripts property
• Set bootstrap aria-min-value and other values using [attr.aria-min-value]
• Set width and height using [style.width.px]="string|variable"

References

• Angular Chearsheet
• Youtube Angular 4