The Definitive Guide to MongoDB/

...

/

Reading Users

Reading Users

This lesson will show you how to implement the Reading Users operation. It goes over all four aspects of the implementation and includes HTML, typescript, UserService, and back-end code.

We'll cover the following...

Let’s follow the pattern established in the previous lesson and make changes to the HTML.

We want to analyze the implementation of reading users from the database and display them in the browser.

There are two situations we want to cover:

  • reading of all users

  • filtering users by some criteria (search option).

Basically, this section of the screen:

Reading Users: HTML Code

Here is the HTML:

Press + to interact
<div class="col-sm-8">
        <div class="row">
                <div class="col-sm-2">
                    <label for="Name">Name</label>
                </div>
                <div class="col-sm-2">
                    <label for="Blog">Blog</label>
                </div>
                <div class="col-sm-2">
                    <label for="Age">Age</label>
                </div>
                <div class="col-sm-2">
                    <label for="Location">Location</label>
                </div>
        </div>
        <div class="row" *ngFor="let user of users" (click)="setEditUser(user)">
            <div class="col-sm-2">
                {{user.name}}
            </div>
            <div class="col-sm-2">
                {{user.blog}}
            </div>
            <div class="col-sm-2">
                {{user.age}}
            </div>
            <div class="col-sm-2">
                {{user.location}}
            </div>
        </div>
    <div class="row">
        <div class="col-sm-8">
            <label for="searchByName">Search by name:</label>
            <input class="form-control" type="text" placeholder="Name" [(ngModel)]="searchCriteria" [ngModelOptions]="{standalone: true}"/>
            <button class="btn btn-default" (click)="getUsers()">Search</button>
            <button class="btn btn-default" (click)="clearSearch()">Clear</button>        
        </div>
    <div>

...