Membuat Project Baru Angular

Selamat malam sahabat coding, malam ini ane mau sharing cara buat project di Angular 7. Langsung saja ya ini dia simak di bawah.

Membuat project baru pada Angular.

1. Siapkan Tools yang dibutuhkan

Ada beberapa tools yang di perlukan sebelum memulai untuk membuat project baru Angular, disini saya anggap sudah pada membuat API untuk beck end nya ya, karna disini tidak akan dibahas lagi.

Beberapa tools yang dibutuhkan untuk membuat project Angular yaitu:

1. Telah menginstall Node.js dan NPM

2. Telah membuat REST API

3. Text Editor (Visual Studio Code) atau yang lain boleh

2. Langkah-langkah Membuat Project Baru

Langkah-langkahnya yaitu:

1. Buka Visual Studio Code dan Buatlah 1 folder baru yang akan digunakan untuk menyimpak project Angular kita. Kemudian untuk membuat new project buka terminal pada Visual Studio Code dan jalankan command berikut :

ng new angularnodejs

Kemudian Enter, tunggu beberapa menit karna proses penginstallan mungkin membutuhkan waktu beberapa menit. Disini saya menyiman project ini dalam direktory /Documents dan dengan nama AngularNodejs. Ketika ada message "would you like to add angular routing ? pilih yes , dan ketika ada pilihan stysheet format pilih saja css yang sudah familar.

Setelah selesai maka akan muncul tampilan success pada terminal.

2. Selanjutnya coba jalankan project baru kita, pertama pindah ke dir angular node js dan jalankan dengan command ng serve

Buka web browser dan jalankan localhost:4200 untuk mengetahui apakah project kita berhasil dibuat dengan benar, apabila telah sesuai maka akan muncul tampilan project sebagai berikut :

3. Tambahkan element CSS untuk kita siapkan dalam mempercantik tampilan web kita, letakkan link css berikut pada src/index.html :

<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-BVYiiSIFeK1dGmJRAkycuHAHRg32OmUcww7on3RYdg4Va+PmSTsz/K68vbdEjh4u" crossorigin="anonymous">

3. Membuat Read Customer 

1. Langkah selanjutnya yaitu buat suatu emelent untuk project kita, misal saya akan membuat dengan nama customer, gunakan command berikut:

ng generate component customer

 

2. Kemudian masuk ke direktory customer dan buat satu component lagi untuk list-customer dengan command berikut :

ng g c /customer/list-customer

3. Edit halaman html kita dan masukkan syntax berikut

<div class="row m-b-18px">
  <div class="col-md-12">
      <!-- button to create new product -->
      <a (click)="addCustomer()" class='btn btn-primary pull-right'>
          <span class='glyphicon glyphicon-plus'></span>Add Customer
      </a>
  </div>
</div>
<div class="row">
  <div class="col-md-12">
    <table class="table table-hover tabel-responsive tabel-bordered">
      <tr>
        <th>Customer ID</th>
        <th>First Name</th>
        <th>Last Name</th>
        <th>Address</th>
        <th>Email</th>
        <th>Password</th>
        <th>Birth Date</th>
        <th>Phone Number</th>
        <th>Phone Type</th>
        <th>Actions</th>
      </tr>
      <tr *ngFor="let customer of listCustomer">
        <td>{{customer.customernumber}}</td>
        <td>{{customer.firstname}}</td>
        <td>{{customer.lastname}}</td>
        <td>{{customer.address}}</td>
        <td>{{customer.email}}</td>
        <td>{{customer.password}}</td>
        <td>{{customer.birthdate}}</td>
        <td>{{customer.phonenumber}}</td>
        <td>{{customer.phonetype}}</td>
        <td>
          <!-- read one product button -->
          <a (click)="readById(customer.customernumber)" class='btn btn-primary m-r-5px'>
              <span class='glyphicon glyphicon-eye-open'></span>
          </a>

          <!-- edit product button -->
          <a (click)="updateCustomer(customer.customernumber)" class='btn btn-info m-r-5px'>
              <span class='glyphicon glyphicon-edit'></span>
          </a>

          <!-- delete product button -->
          <a (click)="deleteCustomer(customer.customernumber)" class='btn btn-danger m-r-5px'>
              <span class='glyphicon glyphicon-remove'></span>
          </a>
      </td>
      </tr>
    </table>
  </div>
</div>

  

4. Kemudian pada halaman list-customer.ts tambah method berikut untuk menampilkan data customer.

import { Component, OnInit } from '@angular/core';
import { Customer } from '../customer';
import { CustomerService } from '../customer.service';
// import { Observable} from 'rxjs';

@Component({
  selector: 'app-list-customer',
  templateUrl: './list-customer.component.html',
  styleUrls: ['./list-customer.component.css'],
  // providers: [CustomerService]
})
export class ListCustomerComponent implements OnInit {

  listCustomer: Customer[]=[];
  showDetail: boolean = false;

  constructor(private customerService: CustomerService) { }

  addCustomer(){};
  readById(id){}
  updateCustomer(id){}
  deleteCustomer(id){}

  ngOnInit(){
    this.loadData();

  }

  loadData(){
    this.customerService.readCustomer().subscribe(
      (response)=>{
      console.log(JSON.stringify(response));
      Object.assign(this.listCustomer, response);
      },(err)=>{
        alert('error : '+JSON.stringify(err));
      }
    );
  }

  prosesResult(result){
    if(result){
      this.showDetail=false;
      this.loadData();
    }
  }
}

5. Simpan dan jalankan project kita, apabila berhasil maka akan tampil halaman customer seperti berikut :

 

 

Baiklah demikian turorialnya ya gan, silahkan tinggalkan komentar kalok ada yang mau ditanyakan.