Angular - referencia rápida

Dropdown (con datos fijos)

<select [(ngModel)]='servidor' id='servidor' name='servidor'>
       <option value='Desarrollo'>Desarrollo</option>
       <option value='Testing'>Testing</option>
       <option value='Produccion'>Produccion</option>
</select>


Dropdown (con datos del componente)

html

<select>
  <option *ngFor="let x of prueba" value={{x.value}}>{{x.nombre}}</option>
</select>

componente

import { Component } from '@angular/core';

@Component({
  selector: 'app-root',
  templateUrl: './app.component.html',
  styleUrls: ['./app.component.css']
})

export class AppComponent {
  prueba = [{nombre: 'abc', value: 1},
           {nombre: 'dddd', value: 2}];
}

Lista con datos del componente

<ul>

  <li *ngFor="let d of datos">{{ d.nombre }}</li>

</ul>

Boton con routerlink y parametros

en app.module.ts agregar: 
import { RouterModule } from '@angular/router';

imports: [RouterModule]

y agregar las rutas en la seccion imports:

RouterModule.forRoot([ {path: 'busqueda/:parametro1/:parametro2', component: PruebaComponent} ])


y en el html, definir el link y agregar el router-outlet donde se desplegara el contenido del componente que se invoque con el routerLink

<button [routerLink]="['/busqueda', parametro1, parametro2]">Buscar</button>

<router-outlet></router-outlet>

Invocar a un metodo del componente

<button (click)="valores()">Valores</button>

Utilizar ngModel para two binding

en app.module.ts agregar:

import { FormsModule } from '@angular/forms';
imports: [
    FormsModule
  ],

para utilizarlo: (es importante que tenga el name!!!!

<input [(ngModel)]='telefono' name='telefono' type="text" size="10" />

Servicios

cd <aplicacion>\src\app
mkdir services
cd services
ng generate service datos (el nombre datos cambiarlo por el nombre del servicio)

en datos.service.ts:

import { Http, Response } from '@angular/http';
import 'rxjs/add/operator/map';

en el constructor, agregar:

constructor(public http: Http) { }

  lista(param1: string, param2: string) {         
    return this.http.get("http://localhost:8080/lista/" + param1 + "/" + param2)     
    .map(res => res.json());       
  }

en app.module.ts:

import { DatosService } from './datos.service';

y en providers:

providers: [DatosService]

En el componente que lo va a invocar (ej: consulta.component.ts)

import { DatosService } from './datos.service';

constructor(private data : DatosService)

v: any;

lista(param1: string, param2: string) {                
   this.data.lista(param1, param2).subscribe((datos) => {      
      this.v = datos;    

      console.log(datos);      
   });
}

Ocultar mediante ngIf

<form *ngIf="activo" (ngSubmit)="onSubmit()" method="POST">
  Usuario: <input type="text" [(ngModel)]="name" name="name">
  <br>
Password:<input type="text" [(ngModel)]="password" name="password">
  <br>

<input type="submit" value="Enviar" />
</form>

(En el modulo.ts, agregar una atributo que se llame activo y ponerlo en true o false para probar)

@Output y @Input : intercambiar datos entre los componentes

@Input: para pasar un dato de un componente parent a un child:
En este caso el componente padre se llama "parent" y el hijo se llama "child"
El dato se establece en el componente "parent", y se recibe como @Input en el componente "child"

Ej:

child.component.ts

import { Component, OnInit, Output, Input } from '@angular/core';

@Component({
  selector: 'app-child',
  templateUrl: './child.component.html',
  styleUrls: ['./child.component.css']
})

export class ChildComponent implements OnInit {
  @Input() myAwesomeValue : string;

  constructor() { }

  ngOnInit() { 
  }
}

parent.component.html

<app-child [myAwesomeValue]="dato"></app-child>


parent.component.ts

import { Input, Component, OnInit } from '@angular/core';

@Component({
  selector: 'app-parent',
  templateUrl: './parent.component.html',
  styleUrls: ['./parent.component.css']
})

export class ParentComponent {
  constructor() { }

  @Input() dato: string;

  ngOnInit() {
    this.dato = "EL DATO!!!!";
  }
}