Angular 6

Angular6 Restfull:

Iremos fazer nesse projeto: Lista Estatica, Vetor, Lista Externa (webservice), AutoComplete, Filter, Pipe, PipeTransform e Css


Parte principal do projeto:

Crie um novo componente chamado "Usuario"

Que irá conter:
1. usuario.ts (classe de dados do componente)
2. usuario-constante.ts (classe com a lista estática)
3. usuario-provider.ts (classe para mapear as listas)
4. usuario.component.ts (inicializando as variáveis)
5. usuario.component.css (classe estilo css)
6. usuario.component.html (página web)

usuario.ts

Classe de dados do componente Usuario.

export class Usuario{
id:number; 
name:string;
username:string;
email:string;
idade:Number = null;
										
//Number wrapper para poder receber nulo
										
//number = primitivo = 0
										
constructor(id?:number, name?:string, username?:string, email?:string, idade?:number){ 
this.id=id;
this.name=name;
this.username=username;
this.email=email;
this.idade= (idade==null) ? 0 : idade;
}

public toString():string{								
return this.id + ", " + this.name + ", " + this.username + ", " + this.email + ", " + this.idade;
	}
}

usuario.constante.ts

Criando nossa lista (vetor) estática.

export class UsuarioInterno{

public static USUARIOSINTERNOS =[
{
	id:100,name:'lu',username:'luciana',email:'lu@gmail.com',idade:20},
{
	id:101,name:'daiana',username:'lady',email:'dai@gmail.com',idade:21},
{
	id:102,name:'didi',username:'diego',email:'diego.com',idade:10},
{
	id:103,name:'talles',username:'ta',email:'talles.com',idade:25}
	]
		}
			   

usuario-provider.ts

Classe para mapear as listas.

import { Observable } from "rxjs/Observable";
import { UsuarioInterno } from "./usuario-constante";
import { Usuario } from "./usuario";
import { Injectable } from "@angular/core";
import { Http } from "@angular/http";
import 'rxjs/add/operator/map';

@Injectable()
export class UsuarioProvider{
					
public externos: Observable = this.listaExterna() as Observable;

	public internos: Usuario[] = UsuarioInterno.USUARIOSINTERNOS as Usuario[];
					
	constructor(private http: Http){
		}
		
	public listaExterna(): Observable {
					
	return this.http.get('http://jsonplaceholder.typicode.com/users/').map( (response) => response.json() );
	
		}
		
	public adicionar(usuario: Usuario){ this.internos.push(usuario);
		}
	
		getUsuarioAutoComplete(searchText):Usuario[]{
					
	if(searchText == null) return [];
					
	this.internos = UsuarioInterno.USUARIOSINTERNOS;
							
	return this.internos.filter(item => { return item.name.indexOf(searchText) >-1;
					
	}) as Usuario[];
		}
	}
				
			

app.module.ts

Fazendo as importações

import { BrowserModule } from '@angular/platform-browser';
import { NgModule } from '@angular/core';
import { HttpModule } from '@angular/http';
import { AppComponent } from './app.component';
import { UsuarioProvider } from './usuario/usuario-provider';
					
	@NgModule({
   declarations: [
	AppComponent,
	  ],
	  imports: [
		BrowserModule,
		HttpModule,
	  ],
	 providers: [UsuarioProvider],
	 bootstrap: [AppComponent]
		})
	export class AppModule { }
				

usuario.component.ts

Criando as variáveis e métodos

import { OnInit, Component } from "@angular/core";
import { UsuarioProvider } from "./usuario-provider";
import { Usuario } from "./usuario";
					
	@Component({ 
	selector: 'usuario-root',
	templateUrl: './usuario.component.html',
	styleUrls: ['./usuario.component.css']
					
		})
					
	export class UsuarioComponent implements OnInit {
	title = 'Aula de Angular4 Domingo'; 
	listaInterno: Usuario[];
	listaExterna: Usuario[]; 
	visibilidade: boolean = false;
	visibAuto: boolean = false;
	visibFiltro: boolean = false;
	textoAuto: string;
	age: number;
					
		ngOnInit(): void {
		this.age=0;
			}
					
	public listarProvider() :void{
					
		this.service.listaExterna().subscribe( (dados) => { this.listaExterna = dados;
							
	});
		}
					
	mostra(){
	this.visibilidade = true; this.listarProvider();
		}
					
	change(){ 
	this.visibAuto = true;
	this.listaInterno = this.service.getUsuarioAutoComplete(this.textoAuto);
		}
					
	change2(){
	this.visibFiltro = true;
	this.listaInterno = this.service.internos;
		}
					
	constructor( private service: UsuarioProvider ){
		}
	}    
		

Crie um diretório chamado "valida"

E dentro dele a classe "ativa-filtro.ts"

ativa-filtro.ts

import { element } from 'protractor';
import { PipeTransform, Pipe } from "@angular/core";
							
@Pipe({name: 'idadeFiltro'}) export class IdadePipe implements PipeTransform {
							
transform(value: any, limiteIdade: string) :any {
return value.filter(element => {
return element.idade > limiteIdade;
	});
   }
}
						
					

app.module.ts

import { BrowserModule } from '@angular/platform-browser';
import { NgModule } from '@angular/core';
import { HttpModule } from '@angular/http';
import { AppComponent } from './app.component';
import { UsuarioProvider } from './usuario/usuario-provider';
import { IdadePipe } from './valida/ativa-filtro';
import { UsuarioComponent } from './usuario/usuario.component';
import { FormsModule } from '@angular/forms';
							
	@NgModule({
	declarations: [
	AppComponent,
	UsuarioComponent,
	IdadePipe
		],
	imports: [
	BrowserModule,
	HttpModule,
	FormsModule
		],
		providers: [UsuarioProvider],
		bootstrap: [AppComponent]
		})
		export class AppModule { }

					

app.component.html


					

<usuario-root></usuario-root>

usuario.component.css


#dialogo { 
    background-color: rgb(241, 239, 239);
    border : 1px solid rgb(7, 7, 7);
    padding : 25px;
    margin-bottom: 25px;
    font-family: Verdana, Geneva, Tahoma, sans-serif; font-size : 16px;
    margin-left:30px; margin-right:20px; margin-top:15px;
}

#caixa2 {background-color: rgb(230, 185, 134);
     border : 1px solid rgb(7, 7, 7);
     padding : 25px;
     color:rgb(185, 15, 15); margin-bottom: 16px;
     font-family: Verdana, Geneva, Tahoma, sans-serif; font-size : 12px;
     margin-top:15px; margin-left:50px;
     margin-right:80px;
    
    }									
			

usuario.component.html


<div>

<fieldset>
    
<legend>Observable</legend>
    
<button (click) = "mostra()" style = "width:150px; height:50px; font-size:16px;" title="Clique Aqui">
    
Botão Observable
    
</button>
    
<div *ngIf = "visibilidade">
    
<div *ngFor = "let dado of listaExterna" id="dialogo">
    
{{ dado | json }}
    
</div>
	
</div>
    
</fieldset>

<fieldset>

<legend>AutoComplete</legend>
        
<h2 style="text-align:center;">Auto Complete</h2>
        
<input type="text" [(ngModel)] = "textoAuto" name =
        
"textoAuto" placeholder = "Buscar..." (keyup) = "change()">
        
<div *ngIf= "visibAuto">
        
<div id="caixa2">
        
<div *ngFor="let item of listaInterno">
        
{{item.id}} , {{item.name}} , {{item.idade}} ,
        
{{item.email}}
        
</div>
        
</div>
        
</div>
        
</fieldset>
        
<fieldset>
        
<legend>Filtro Pipe</legend>
        
<input type="text" [(ngModel)]="age" name="age" placeholder="Idade..." (keyup)="change2()">

<div *ngIf = "visibFiltro">

<ul>
            
<li *ngFor="let user of listaInterno | idadeFiltro: age">
            
{{user.username}} , {{user.idade}}
            
</li>
            
</ul>
            
</div>
            
</fieldset>
            
</div>

		

Para rodar o projeto:

No terminal digitar: ng serve –o. Mostrando formato web

Clicando no botão observable...

Digitando no autoComplete...

Digitando uma idade para filtrar...