Angular get object from array by id from input

Question

Hello,

I have:

imei.ts

export default class imei {
    product: String;
    type: String;
    system: String;
    capacity: String;
    serial: String;
    imei: String;
}

and array in test.component.ts:

 iphones: imei[] = [
    {product: "iPhone",
    type: "11 Pro Max",
    system: "iOS 13", 
    capacity: "128 GB",
    serial: "DNQVXUJWJCLH",
    imei: "35 304509 499369 6"},

    {product: "iPhone",
    type: "6s",
    system: "iOS 12", 
    capacity: "32 GB",
    serial: "ANXVSCVWWCBH",
    imei: "41 102109 494369 9"},

    {product: "iPhone",
    type: "5",
    system: "iOS 11", 
    capacity: "8 GB",
    serial: "OXQVXWAHJCLH",
    imei: "63 302354 499369 6"}
 ]

I want to after input imei in this section:

<div class="container" id="imei" style="height:100vh;" >
    <div class="row justify-content-center">
        <div class="col-12 text-center">
            <img src="assets/warranty.png" alt="">
            <h1>
                Check your warranty for service and support
            </h1>
            <h2>Please tell us your IMEI or Serial number
            </h2>
            <input type="text" placeholder="IMEI or Serial number">
            <a><p>Where I can find my IMEI or Serial number?</p></a>
            <div class="row justify-content-center">
                <button type="submit" class="btn btn-primary btn-lg btn-confirm" [ngxScrollToDuration]=1200
                [ngxScrollTo]="'#specification'" (click)="toggle1()" >Check</button>
            </div>
            <a><img class="mx-auto d-block spec-arrow" src="assets\arrow.png"></a>
        </div>
    </div>
</div>

Display data from array with this imei here:

    <div class="col-12 text-center" *ngFor="let iphone of iphones">
        <img src="assets/iphone.png" alt="">
        <h2>Is that your phone?</h2>
        <h2>Your iPhone Specification:</h2>
        <div class="row justify-content-center">
            <div class="col-xl-2 col-sm-5 text-xl-left text-md-left text-sm-center"
                style="color: rgb(156, 156, 156);">
                <p>Product:</p>
            </div>
            <div class="col-xl-3 col-sm-5 text-xl-left text-md-left text-sm-center"
                style="color: #14569d; font-size: 120%;">
                <p>{{iphone.product}}</p>
            </div>
        </div>
        <div class="row justify-content-center">
            <div class="col-xl-2 col-sm-5 text-xl-left text-md-left text-sm-center"
                style="color: rgb(156, 156, 156);">
                <p>Type:</p>
            </div>
            <div class="col-xl-3 col-sm-5 text-xl-left text-md-left text-sm-center"
                style="color: #14569d; font-size: 120%;">
                <p>11 Pro Max</p>
            </div>
        </div>
        <div class="row justify-content-center">
            <div class="col-xl-2 col-sm-5 text-xl-left text-md-left text-sm-center"
                style="color: rgb(156, 156, 156);">
                <p>Operating system:</p>
            </div>
            <div class="col-xl-3 col-sm-5 text-xl-left text-md-left text-sm-center"
                style="color: #14569d; font-size: 120%;">
                <p>iOS 13</p>
            </div>
        </div>
        <div class="row justify-content-center">
            <div class="col-xl-2 col-sm-5 text-xl-left text-md-left text-sm-center"
                style="color: rgb(156, 156, 156);">
                <p>Capacity:</p>
            </div>
            <div class="col-xl-3 col-sm-5 text-xl-left text-md-left text-sm-center"
                style="color: #14569d; font-size: 120%;">
                <p>128 GB</p>
            </div>
        </div>
        <div class="row justify-content-center">
            <div class="col-xl-2 col-sm-5 text-xl-left text-md-left text-sm-center"
                style="color: rgb(156, 156, 156);">
                <p>Serial number:</p>
            </div>
            <div class="col-xl-3 col-sm-5 text-xl-left text-md-left text-sm-center"
                style="color: #14569d; font-size: 120%;">
                <p>DNQVXUJWJCLH</p>
            </div>
        </div>
        <div class="row justify-content-center">
            <div class="col-xl-2 col-sm-5 text-xl-left text-md-left text-sm-center"
                style="color: rgb(156, 156, 156);">
                <p>IMEI:</p>
            </div>
            <div class="col-xl-3 col-sm-5 text-xl-left text-md-left text-sm-center"
                style="color: #14569d; font-size: 120%;">
                <p>35 304509 499369 6</p>
            </div>
        </div>
        <div class="row justify-content-center">
            <div class="col-12 text-center">
                <button class="btn btn-primary btn-lg btn-confirm " [ngxScrollToDuration]=1200
                    [ngxScrollTo]="'#repair'" (click)="toggle2()">Confirm</button>
            </div>
        </div>
    </div>
</div>

Is there a way to do it in simple way? I where looking for an answer but I didn't find right solution.

I don't excepted ready solution - I prefer showing the way or things which I should use

Aakash Garg · Accepted Answer · 2020-06-01 10:49:41Z

Change

To

<input type="text" placeholder="IMEI or Serial number" #imeiInput>

then change submit button to :-

<button type="submit" class="btn btn-primary btn-lg btn-confirm" [ngxScrollToDuration]=1200
                [ngxScrollTo]="'#specification'" (click)="toggle1(imeiInput.value)" >Check</button>

In Typescript

public selectedImei;
toggle1(imei) {
  this.selectedImei = this.iphones.find((iphone)=>iphone.imei === imei);
}

Use this selected Imei in template below like :-

 <div class="col-12 text-center">
        <img src="assets/iphone.png" alt="">
        <h2>Is that your phone?</h2>
        <h2>Your iPhone Specification:</h2>
        <div class="row justify-content-center">
            <div class="col-xl-2 col-sm-5 text-xl-left text-md-left text-sm-center"
                style="color: rgb(156, 156, 156);">
                <p>Product:</p>
            </div>
            <div class="col-xl-3 col-sm-5 text-xl-left text-md-left text-sm-center"
                style="color: #14569d; font-size: 120%;">
                <p>{{selectedImei?.product}}</p>
            </div>
        </div>
        <div class="row justify-content-center">
            <div class="col-xl-2 col-sm-5 text-xl-left text-md-left text-sm-center"
                style="color: rgb(156, 156, 156);">
                <p>Type:</p>
            </div>
            <div class="col-xl-3 col-sm-5 text-xl-left text-md-left text-sm-center"
                style="color: #14569d; font-size: 120%;">
                <p>{{selectedImei?.type}}</p>
            </div>
        </div>
        <div class="row justify-content-center">
            <div class="col-xl-2 col-sm-5 text-xl-left text-md-left text-sm-center"
                style="color: rgb(156, 156, 156);">
                <p>Operating system:</p>
            </div>
            <div class="col-xl-3 col-sm-5 text-xl-left text-md-left text-sm-center"
                style="color: #14569d; font-size: 120%;">
                <p>{{selectedImei?.system}}</p>
            </div>
        </div>
        <div class="row justify-content-center">
            <div class="col-xl-2 col-sm-5 text-xl-left text-md-left text-sm-center"
                style="color: rgb(156, 156, 156);">
                <p>Capacity:</p>
            </div>
            <div class="col-xl-3 col-sm-5 text-xl-left text-md-left text-sm-center"
                style="color: #14569d; font-size: 120%;">
                <p>{{selectedImei?.capacity}}</p>
            </div>
        </div>
        <div class="row justify-content-center">
            <div class="col-xl-2 col-sm-5 text-xl-left text-md-left text-sm-center"
                style="color: rgb(156, 156, 156);">
                <p>Serial number:</p>
            </div>
            <div class="col-xl-3 col-sm-5 text-xl-left text-md-left text-sm-center"
                style="color: #14569d; font-size: 120%;">
                <p>{{selectedImei?.serial}}</p>
            </div>
        </div>
        <div class="row justify-content-center">
            <div class="col-xl-2 col-sm-5 text-xl-left text-md-left text-sm-center"
                style="color: rgb(156, 156, 156);">
                <p>IMEI:</p>
            </div>
            <div class="col-xl-3 col-sm-5 text-xl-left text-md-left text-sm-center"
                style="color: #14569d; font-size: 120%;">
                <p>{{selectedImei?.imei}}</p>
            </div>
        </div>
        <div class="row justify-content-center">
            <div class="col-12 text-center">
                <button class="btn btn-primary btn-lg btn-confirm " [ngxScrollToDuration]=1200
                    [ngxScrollTo]="'#repair'" (click)="toggle2()">Confirm</button>
            </div>
        </div>
    </div>
</div>

Thanks! That's it! I've had to remove *ngFor="let iphone of iphones" from first div - it caused duplication as many times as we have arrays.

Nitika · Accepted Answer · 2020-06-01 10:37:46Z

0

Bind your input IMEI or Serial number with (ngModel).
On Submit, in your .ts file, check IMEI with given array using Array.find().
Store the found array element in a variable.
Display elements of the stored variable.

answered Jun 1, 2020 at 10:37

Nitika

4792 silver badges10 bronze badges

Collectives™ on Stack Overflow

Angular get object from array by id from input

2 Answers 2

1 Comment

Comments

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

1 Comment

Comments

Related