Daftar dan Belajar Sekarang!

Filter data dengan menginput pada component/komponen lain menggunakan pipe di angular

foto fadhelmurphy
19 Kontribusi 1 Coto
1 tahun yang lalu
Saya disini menggunakan Angular 5 saya ingin menginput pada app.component
<input class="form-control" #searchText (keyup)="0" type="text" placeholder="Search" aria-label="Search">
yang nantinya akan di tampilkan di home.component
<ng-container *ngFor="let s of data | FilterPipe : searchText.value">
        <tr>
          <td> <a [routerLink]="['/content/',s._id]">{{s.name}}</a></td>
          <td>{{s.author}}</td>
          <td>{{s.content}}</td>
        </tr>
      </ng-container>
Full code FilterPipe
import { Pipe, PipeTransform } from '@angular/core';
@Pipe({
  name: 'FilterPipe'
})
export class FilterPipe implements PipeTransform {
  transform(items: any[], searchText: string): any {
    if(!items) return [];
    if(!searchText) return items;
searchText = searchText.toLowerCase();
return items.filter( it => {
      return it.name.toLowerCase().includes(searchText) || it.content.toLowerCase().includes(searchText);
    });
   }
}
App Component app.component.ts
import { Component } from '@angular/core';
import { Pipe, PipeTransform } from '@angular/core';
@Component({
  selector: 'app-root',
  templateUrl: './app.component.html',
  styleUrls: ['./app.component.css']
})
export class AppComponent {
  title = 'app';
}
app.component.spec.ts
import { TestBed, async } from '@angular/core/testing';
import { AppComponent } from './app.component';
describe('AppComponent', () => {
  beforeEach(async(() => {
    TestBed.configureTestingModule({
      declarations: [
        AppComponent
      ],
    }).compileComponents();
  }));
  it('should create the app', async(() => {
    const fixture = TestBed.createComponent(AppComponent);
    const app = fixture.debugElement.componentInstance;
    expect(app).toBeTruthy();
  }));
  it(`should have as title 'app'`, async(() => {
    const fixture = TestBed.createComponent(AppComponent);
    const app = fixture.debugElement.componentInstance;
    expect(app.title).toEqual('app');
  }));
  it('should render title in a h1 tag', async(() => {
    const fixture = TestBed.createComponent(AppComponent);
    fixture.detectChanges();
    const compiled = fixture.debugElement.nativeElement;
    expect(compiled.querySelector('h1').textContent).toContain('Welcome to app!');
  }));
});
app.component.html
<!--The content below is only a placeholder and can be replaced.-->
<div class="container">
    <div class="jumbotron">
        <h1>{{title}}</h1>
        <p>Description</p>
        <nav class="navbar navbar-expand-lg navbar-light bg-light rounded">
                <a class="navbar-brand" [routerLink]="['/']">Navbar</a>
                <button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#navbarsExample09" aria-controls="navbarsExample09" aria-expanded="false" aria-label="Toggle navigation">
                  <span class="navbar-toggler-icon"></span>
                </button>
        
                <div class="collapse navbar-collapse" id="navbarsExample09">
                  <ul class="navbar-nav mr-auto">
                    <li [routerLinkActive]="['active']">
                      <a class="nav-link" [routerLink]="['/home']">Home <span class="sr-only">(current)</span></a>
                    </li>
                    <li [routerLinkActive]="['active']">
                      <a class="nav-link" [routerLink]="['/login']">Login</a>
                    </li>
                  </ul>
                  <form class="form-inline my-2 my-md-0">
                    <input class="form-control" #searchText (keyup)="0" type="text" placeholder="Search" aria-label="Search">
                  </form>
                </div>
              </nav>
    </div>
<router-outlet></router-outlet>
</div>
Home Component home.component.ts
import { Component, OnInit, Inject } from '@angular/core';
import { Http,Response } from '@angular/http';
import { Router } from '@angular/router';


@Component({
  selector: 'app-home',
  templateUrl: './home.component.html',
  styleUrls: ['./home.component.css']
})
export class HomeComponent implements OnInit {
  constructor(private router:Router,private http:Http) {
   }

  title = 'Home';
  data: any = [];
  getData(){
    return this.http.get('http://localhost:3000/api').map((res: Response) => res.json()).subscribe(
      data => {
        console.log(data);
        this.data = data
      }
    )
  }


  ngOnInit() {
    this.getData();
  }

}
home.component.spec.ts
import { async, ComponentFixture, TestBed } from '@angular/core/testing';

import { HomeComponent } from './home.component';

describe('HomeComponent', () => {
  let component: HomeComponent;
  let fixture: ComponentFixture<HomeComponent>;

  beforeEach(async(() => {
    TestBed.configureTestingModule({
      declarations: [ HomeComponent ]
    })
    .compileComponents();
  }));

  beforeEach(() => {
    fixture = TestBed.createComponent(HomeComponent);
    component = fixture.componentInstance;
    fixture.detectChanges();
  });

  it('should create', () => {
    expect(component).toBeTruthy();
  });
});
home.component.html
<div class="container">
<div class="panel panel-default">
<div class="panel-heading">
  <p class="navbar-brand">{{title}}</p>
  <a type='button' href='/new' class="btn btn-primary navbar-btn"> Add Post +</a>
</div>
<div class="panel-body">

  <table class="table">
    <tr>
      <td>Nama Post</td> 
      <td>Author</td>
      <td>Coba</td> 
    </tr>
      <ng-container *ngFor="let s of data | FilterPipe : searchText.value">
        <tr>
          <td> <a [routerLink]="['/content/',s._id]">{{s.name}}</a></td>
          <td>{{s.author}}</td>
          <td>{{s.content}}</td>
        </tr>
      </ng-container>
  </table>
  </div>
</div>
</div>


Login untuk diksusi di forum sekolah koding