<div style="text-align:center">
<h1>
Welcome to {{title}}!
</h1>
</div>
<div>
<div>
<input placeholder="Enter Search Value" [(ngModel)]="searchText" />
</div>
<hr>
<table class="table">
<ng-container *ngFor="let user of users | search:searchText">
<tr>
<th>First Name</th><td>{{user.firstName}}</td>
<th>Last Name</th><td>{{user.lastName}}</td>
</tr>
<tr>
<th>Job</th><td>{{user.job}}</td>
<th>ID</th><td>{{user.id}}</td>
</tr>
</ng-container>
</table>
</div>
import { Component } from '@angular/core';
@Component({
selector: 'app-root',
templateUrl: './app.component.html',
styleUrls: ['./app.component.css']
})
export class AppComponent {
title = 'CH Table play';
users = [
{
"firstName": "Clark",
"lastName": "Kent",
"job": "Reporter",
"id": 20
},
{
"firstName": "Bruce",
"lastName": "Wayne",
"job": "Business Owner",
"id": 30
},
{
"firstName": "Peter",
"lastName": "Parker",
"job": "Photographer",
"id": 40
},
{
"firstName": "Tony",
"lastName": "Stark",
"job": "Business Owner",
"id": 25
}
]
}
Network and collaborate with thousands of CTOs, CISOs, and IT Pros rooting for you and your success.
”The time we save is the biggest benefit of E-E to our team. What could take multiple guys 2 hours or more each to find is accessed in around 15 minutes on Experts Exchange.
Our community of experts have been thoroughly vetted for their expertise and industry experience.