//criar o projeto
ng new <nome_app>

//entrar na pasta do projeto
cd <nome_app>

//abrir app no VS Code
code .

//abrir a app no navegador
ng serve --o

● src
+---● app
|    |      |--app.component.ts
|    |      |--app.component.css
|    |      |--app.component.html
|    |      |--app.service.ts
|    |      |--app.model.ts
|    |      |--app.module.ts
|--index.html (caminho cdn para o  bootstrap e fa icons)

ng g s app --skipTests

1. “e2e” - pasta contendo os arquivos de testes e configurações para realizar testes;
2. “node_modules” - pasta contendo todos os pacotes restaurados a partir das dependências definidas no arquivo package.json;
3. “src/” - pasta da aplicação principal que contém a pasta app, os templates HTML, os componentes, módulos, etc.;
4. "tsconfig.json, index.html, etc” - arquivos essenciais necessários para rodar a aplicação;
5. “packages.json” - contém a referência a todos os pacotes necessários para a nossa aplicação Angular 2;

Nota: Eu apaguei a pasta test.ts do projeto

• app-routing.module.ts - arquivo de rotas;
• app.component.css - arquivo de estilo;
• app.component.html - arquivo html contendo código HTML que será exibido na view;
• app.component.spec.ts - arquivo de testes;
• app.component.ts - arquivo principal que possui a lógica da aplicação;
• app.module.ts - arquivo de módulo que agrupa os componentes, diretivas, pipes e serviços usados na aplicação

A sintaxe dos nomes dos arquivos segue o guia de estilo do Angular : https://angular.io/guide/styleguide

Obs:  Neste exemplo eu não vou criar testes e por isso não vou criar arquivos de testes e vou remover os arquivos terminados em *spec.ts

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

@Injectable({
  providedIn: 'root'
})
export class AppService {  

  readonly rootURL = 'http://localhost:1168/api';

  constructor(private http: HttpClient) { }  
      httpOptions = {  
        headers: new HttpHeaders({  
          'Content-Type': 'application/json'  
        })  
      }    
      getData(){  
        return this.http.get(this.rootURL + '/Pagamentos'); 
      }        

      postData(formData){  
        return this.http.post(this.rootURL + '/Pagamentos',formData);  
      }  

      putData(id,formData){  
        return this.http.put(this.rootURL + '/Pagamentos/'+id,formData);  
      }  

      deleteData(id){  
        return this.http.delete(this.rootURL + '/Pagamentos/'+id);  
      }  
}

import { BrowserModule } from '@angular/platform-browser';
import { NgModule } from '@angular/core';

import { AppRoutingModule } from './app-routing.module';
import { AppComponent } from './app.component';

import { FormsModule, ReactiveFormsModule } from '@angular/forms';  
import { HttpClientModule }    from '@angular/common/http';  
import { AppService } from './app.service';  

@NgModule({
  declarations: [
    AppComponent
  ],
  imports: [
    BrowserModule,
    AppRoutingModule,
    FormsModule,  
    ReactiveFormsModule,  
    HttpClientModule  
  ],
  providers: [AppService],
  bootstrap: [AppComponent]
})
export class AppModule { }

import { Component } from '@angular/core';
import {AppService} from './app.service';  
import { FormGroup, FormControl,Validators } from '@angular/forms';

@Component({
  selector: 'app-root',
  templateUrl: './app.component.html',
  styleUrls: ['./app.component.css']
})
export class AppComponent {
  title = 'PagamentoCartao';

  constructor(private AppService: AppService) { }  
  data: any;  
  CartaoForm: FormGroup;  
  submitted = false;   
  EventValue: any = "Salvar";    

  ngOnInit(): void {  
    this.getdata();    

    this.CartaoForm = new FormGroup({  
      PagamentoId: new FormControl(null),  
      NomeTitular: new FormControl("",[Validators.required]),        
      NumeroCartao: new FormControl("",[Validators.required]),  
      DataExpiracao:new FormControl("",[Validators.required]),  
      CVV: new FormControl("",[Validators.required]),  
    })    
  }  

  getdata() {  
    this.AppService.getData().subscribe((data: any[]) => {  
      this.data = data;  
    })  
  }  

  deleteData(id) {  
    this.AppService.deleteData(id).subscribe((data: any[]) => {  
      this.data = data;  
      this.getdata();  
    })  
  }  

  Save() {   
    this.submitted = true;      

     if (this.CartaoForm.invalid) {  
            return;  
     }  
    this.AppService.postData(this.CartaoForm.value).subscribe((data: any[]) => {  
      this.data = data;  
      this.resetFrom();   
    })  
  }  
  Update() {   
    this.submitted = true;      

    if (this.CartaoForm.invalid) {  
     return;  
    }        
    this.AppService.putData(this.CartaoForm.value.PagamentoId,
             this.CartaoForm.value).subscribe((data: any[]) => {  
      this.data = data;  
      this.resetFrom();  
    })  
  }  
  
  EditData(Data) {  
    this.CartaoForm.controls["PagamentoId"].setValue(Data.PagamentoId);  
    this.CartaoForm.controls["NomeTitular"].setValue(Data.NomeTitular);      
    this.CartaoForm.controls["NumeroCartao"].setValue(Data.NumeroCartao);  
    this.CartaoForm.controls["DataExpiracao"].setValue(Data.DataExpiracao);  
    this.CartaoForm.controls["CVV"].setValue(Data.CVV);  
    this.EventValue = "Atualizar";  
  }    

  resetFrom()  
  {     
    this.getdata();  
    this.CartaoForm.reset();  
    this.EventValue = "Salvar";  
    this.submitted = false;   
  } 
}

<div class="container">  
  <form [formGroup]="CartaoForm" (ngSubmit)="this[EventValue]()">  
      <h3>Cartão - Pagamentos</h3>  
      <div class="row">  
      <table class="table">  
      <tr>  
        <td>Nome do Titular</td>  
        <td>  
          <input type="hidden" formControlName="PagamentoId">  
          <input type="text" formControlName="NomeTitular">  
          <div *ngIf="submitted && CartaoForm.controls.NomeTitular.errors" class="text-danger">  
            <div *ngIf="CartaoForm.controls.NomeTitular.errors.required">O nome é obrigatório</div>  
          </div>   
        </td>  
      </tr>  
      <tr>  
        <td>Número do Cartão</td>  
        <td><input type="text" formControlName="NumeroCartao">  
          <div *ngIf="submitted && CartaoForm.controls.NumeroCartao.errors" class="text-danger">  
            <div *ngIf="CartaoForm.controls.NumeroCartao.errors.required">O número do cartão é obrigatório</div>  
          </div>   
        </td>  
      </tr>  
      <tr>  
        <td>Data de Expiração</td>  
        <td>  
          <input type="text" formControlName="DataExpiracao">  
          <div *ngIf="submitted && CartaoForm.controls.DataExpiracao.errors" class="text-danger">  
            <div *ngIf="CartaoForm.controls.DataExpiracao.errors.required">Informe a data de expiração</div>  
          </div>  
        </td>  
      </tr>  
      <tr>  
        <td>CVV</td>  
        <td>  
          <input type="text" formControlName="CVV">  
          <div *ngIf="submitted && CartaoForm.controls.CVV.errors" class="text-danger">  
            <div *ngIf="CartaoForm.controls.CVV.errors.required">O CVV é obrigatório</div>  
          </div>  
        </td>  
      </tr>  
      <tr>  
        <td colspan="2">  
          <button type="submit" class="btn btn-primary">{{EventValue}}</button>  
        </td>  
      </tr>  
    </table>  
    </div>  
   <div class="row">  
    <table class="table table-striped">  
      <tr>  
        <td>ID</td>  
        <td>Nome</td>  
        <td>No. Cartão</td>  
        <td>Data Expiração</td>  
        <td>CVV</td>  
        <td>Edita</td>  
        <td>Deleta</td>  
      </tr>  
      <tr *ngFor="let d of data">  
        <td>{{d.PagamentoId}}</td>  
        <td>{{d.NomeTitular}}</td>  
        <td>{{d.NumeroCartao}}</td>  
        <td>{{d.DataExpiracao}}</td>  
        <td>{{d.CVV}}</td>  
        <td><a (click)="EditData(d)" class="btn btn-warning">Edita</a></td>  
        <td><a (click)="deleteData(d.PagamentoId)" class="btn btn-danger">Deleta</a></td>    
      </tr>  
    </table>  
  </div>  
 </form>      
</div>