How to get Array value in Angular?

In this article we will learn , How to get array value in Angular .

Step 1 : Create a new Angular Project using below command

ng new angular-tour-of-heroes

Step 2 : Create a new component using below command

ng generate component how-to-get-array-value-in-angular

Step 3 : Add Below code in how-to-get-array-value-in-angular.component.ts

import { Component, OnInit } from '@angular/core';

@Component({
selector: 'app-how-to-get-array-angular',
templateUrl: './how-to-get-array-angular.component.html',
styleUrls: ['./how-to-get-array-angular.component.scss']
})
export class HOWTOGETArrayAngularComponent implements OnInit {

fruits = ['Apple', 'Orange', 'Banana', 'blackberry', 'blackcurrant', 'blueberry', 'cherry'
, 'coconut'
, 'fig'
, 'grape'
, 'grapefruit'
, 'kiwifruit '
, 'lemon'
, 'lime'
, 'lychee'
, 'mandarin'
, 'mango '
, 'melon '
, 'nectarine '
, 'orange'
, 'papaya '
, 'passion fruit '
, 'peach '
, 'pear'
, 'pineapple'
, 'plum'
, 'pomegranate'
, 'quince'
, 'raspberry'
, 'strawberry'
, 'watermelon'];
item = '';
foundItem = '';

constructor() { }

ngOnInit() {
}

GetValue() {
this.foundItem = this.fruits.find(x => x.toUpperCase() === this.item.toUpperCase());
}

}

Step 4 : Add Below code in how-to-get-array-value-in-angular.component.html

<br /> <h1>HOW TO GET ARRAY VALUE IN ANGULAR ?</h1><input type="text" [(ngModel)]="item"><br /> <input type="submit" (click)="GetValue()" value="Get Array Value"><br /> <br /> <br /> <div *ngIf="foundItem"><h2>Array Value is : {{foundItem}}</h2><br /> </div><br /> <br />

Step 6 : Hit ng serve command and check the result on http://localhost:4200/

With ❤️ Happy Coding

Ref link
https://github.com/coremicroservices/child-parrent/tree/master/src/app/how-to-get-array-angular