Angular 5 Sample 1

First Angular 5 sample code in VS Code. This code sample will maintain an array of object customers locally and search button will demonstrate how we can attach an event and how to use a stractureal directive (*ngFor) in angular. I have created a component called detail.
The cod ein detail.component.ts:

 import { Component, OnInit } from '@angular/core';
@Component({
  selector: 'app-detail',
  templateUrl: './detail.component.html',
  styleUrls: ['./detail.component.css']
})
export class DetailComponent implements OnInit {
  customers: any[];
  public LoadCustomers(filterText: string): void {
    this.customers = [
      { id: 1, Name: 'Tom Paul' },
      { id: 2, Name: 'John Doe' },
      { id: 3, Name: 'Jijo Venginikkadan' },
      { id: 4, Name: 'Alex George' },
    ];

    if (filterText !== '') {
      const filteCustomerList: any[] = [];
      this.customers.forEach(cust => {
        console.log(cust.Name);
        console.log(filterText);
        if (cust.Name.toLowerCase().includes(filterText.toLowerCase())) {
          filteCustomerList.push(cust);
        }
      });
      this.customers = filteCustomerList;
    }
  }
  constructor() { }

  ngOnInit() {
    this.LoadCustomers('');
  }
  OnCustomerSearch(searchTerm: string): void {
    console.log(searchTerm);
    this.LoadCustomers(searchTerm);
  }

}

Template detail.component.html would looks like:

<div class="form-group">
  <div class="md-col-4">
    Enter Student Name:
  </div>
  <div class="md-col-4">
    
  </div>
</div>

  Search

<table class="table table-responsive table-bordered table-striped">
  <thead>
    <tr>
      <th>Customer ID</th>
      <th>Name</th>
    </tr>
  </thead>
  <tbody>
    <tr>
      <td>{{s.id}}</td>
      <td>{{s.Name | uppercase}}</td>
    </tr>
  </tbody>
</table>

Advertisements

Leave a Reply

Fill in your details below or click an icon to log in:

WordPress.com Logo

You are commenting using your WordPress.com account. Log Out /  Change )

Google photo

You are commenting using your Google account. Log Out /  Change )

Twitter picture

You are commenting using your Twitter account. Log Out /  Change )

Facebook photo

You are commenting using your Facebook account. Log Out /  Change )

Connecting to %s