ng new controle-vendas
cd controle-vendas
ng serve

ng generate module produtos
ng generate component produtos/produto-grade

ng test
ng e2e

ng build --prod

ng deploy

ng update

npm install -g @angular/cli

import { ReactiveFormsModule } from '@angular/forms';

<label>
  Name:
  <input type="text" [formControl]="nome">
</label>

<label>
  Idade:
  <input type="text" [formControl]="idade">
</label>

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

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

export class NameEditorComponent {
  nome = new FormControl('');
  idade = new FormControl('');
}

const appRoutes: Routes = [
  { path: 'dashboard', component: DashboardComponent },
  { path: 'produtos/:id', component: ProdutosDetalhesComponent },
  { path: 'produtos', component: ProdutosComponent },
  { path: '', redirectTo: '/dashboad', pathMatch: 'full'},
  { path: '**', component: PageNotFoundComponent }
];

<a routerLink="/produtos" routerLinkActive="active">Produtos</a>

gotoProdutos() {
  this.router.navigate(['/produtos']);
}

import { Injectable } from '@angular/core';
import { HttpClient } from '@angular/common/http';

@Injectable()
export class ProdutosService {
  constructor(private http: HttpClient) { }
  
  getProdutos() {
    return this.http.get('http://api.com/produtos');
  }
}

@Component({
  selector: 'app-open-close',
  animations: [
    trigger('openClose', [
      state('open', style({height: '200px', opacity: 1, backgroundColor: 'yellow'})),
      state('closed', style({height: '100px', opacity: 0.5, backgroundColor: 'green'})),
      transition('open => closed', [animate('1s')]),
      transition('closed => open', [animate('0.5s')]),
    ]),
  ],
  templateUrl: 'open-close.component.html',
  styleUrls: ['open-close.component.css']
})

<div [@openClose]="isOpen ? 'open' : 'closed'" class="open-close-container"> ... </div>

ng add @angular/material

<cdk-virtual-scroll-viewport itemSize="50" class="lista">
  <div *cdkVirtualFor="let item of items" class="lista-item">{{item}}</div>
</cdk-virtual-scroll-viewport>

<!-- Antes -->
<h1>Olá Visitante</h1>
<!-- Depois -->
<h1 i18n="@@saudacao">Olá Visitante</h1>

ng xi18n

<trans-unit id="saudacao" datatype="html">
  <source>Olá Visitante</source>
  <target>Hello Guest</target>
</trans-unit>

ng add @nguniversal/express-engine

npm run build:ssr
npm run serve:ssr

ng add @angular/pwa --project nome-projeto

ng build --prod

npm install http-server -g

http-server -p 8080 -c-1 dist/nome-projeto