Posted By

karthikeyan on 11/25/17


Tagged

4 Angular


Versions (?)

Angular 4 highlight


 / Published in: JavaScript
 

Angular 4 high lights

  1. Component:
  2. - import { Component } from '@angular/core';
  3. - @Component({
  4. selector: 'selector-name'
  5. templateUrl: './component.view.html'
  6. });
  7. - export class ComponentClass { }
  8.  
  9. Module:
  10. - import { NgModule } from '@angular/core';
  11. - @NgModule({
  12.  
  13. declarations:[], //component
  14. imports:[], //module
  15. providers:[], //services
  16. bootstrap:[],
  17. exports:[]
  18. });
  19. - export class CommonModule{}
  20.  
  21. Routes:
  22. - import { Routes, RouterModule } from '@angular/router';
  23. - export const route:Routes = [
  24. {path: '', component: componentName, data: {}, children:[
  25. {path: '', component: componentName, data: {}},
  26. ]},
  27. ]
  28. - imports:[RouterModule.forRoot(route)], //If parent router
  29. - imports:[RouterModule.forChild(route)] //child route
  30.  
  31. Services:
  32. - import { Injectable } from '@angular/core';
  33. import { Http, HttpModule, Response, JsonpModule } from '@angular/http';
  34. import { Observable } from 'rxjs/Rx';
  35. - @Injectable()
  36. - export class serviceclassname {
  37. constructor(private _http:Http){}
  38.  
  39. getData() {
  40. return this._http.get(url)
  41. .map(response: Response => response.json()),
  42. .catch(errorHandler);
  43. }
  44.  
  45. }
  46. - place where accessing the services,
  47. - constructor(private servicename: serviceclassname) // DI,
  48. - this.servicename.getData().subscribe(response => { this.data = response});
  49.  
  50. Pipes:
  51. - import { Pipe, PipeTransform } from '@angular/core';
  52. - @Pipe({
  53. name: 'pipeName'
  54. })
  55. - export class PipeClass implements PipeTransform{
  56. transform(input: any, limit:number){
  57.  
  58. }
  59. }
  60.  
  61. Reactive Forms:
  62. - import { Component, OnInit } from '@angular/core';
  63. - import { FormsModule, FormBuilder, FormControl, FormGroup, Validators, ReactiveFormsModule } from '@angular/forms';
  64. - export class ReactiveformsComponent implements OnInit{
  65. user = FormGroup;
  66. constructor(private _formBuilder: FormBuilder){}
  67. NgOnInit(){
  68. this.user = this._formBuilder.group({
  69. userId = ['', [Validators.required, Validators.minLength(3), Validators.maxLength(10)]],
  70. userName = ['', [Validators.required]],
  71. })
  72. }
  73. }
  74. - <form [formGroup]="user" noValidate>
  75. <input type="text" formControlName="userId" />
  76. <span *ngIf="(user.get('userId').touched && user.get('userId').dirty) || user.get('userId').hasError('required')">Invalid Id</span>
  77. <input type="text" formControlName="userName" />
  78. </form>

Report this snippet  

You need to login to post a comment.