How to Filter an Array based on user input in AngularJS ?

How to create a hyperlink for values from an array in Angular 8?

Last Updated : 11 Sep, 2020

Introduction:
In angular 8, we can create hyperlinks for all the values that are present in the array using *ngFor.

Approach:
1) First declare and initialize array in .ts file.
2) Then use *ngFor directive for iterating through the array.
3) Using this *ngFor directive in .html file, we can use it as per the requirement.
4) Once the implementation is done then the serve the project.

Syntax:
Syntax for starting the project.

ng serve --open

Implementation by code:
app.component.html:

html

<div *ngFor = "let item of data"> 
  <a [attr.href]="item.url">
   {{item.name}}
  </a>
</div>

app.component.ts:

javascript

import { Component } from '@angular/core';
@Component({
  selector: 'my-app',
  templateUrl: './app.component.html',
  styleUrls: [ 
  `a{
     text-decoration: none;
     color:black;
     cursor: pointer
     }
  `
  ]
})
export class AppComponent  {

  data=[
    {
      name:"GeeksForGeeks",
      url:"www.geeksforgeeks.org"
    },
    {
      name:"Google",
      url:"www.google.com"
    },
    {
      name:"HackerRank",
      url:"www.hackerrank.com"
    }
  ]


}

Output:

How to Filter an Array based on user input in AngularJS ?

B

bunnyram19

Improve

Article Tags :

Similar Reads

How to use ngfor to make a dropdown in Angular from an array ?

In this post, we will see how we can display the array elements in the drop-down menu using AngularJS. Sometimes we need to display dynamically fetched data and this is where features ngFor come into the scene. We can iterate over the array, apply conditions and display the data easily.Using ngFor:

How to print an array in table format using angularJS?

Given an array & the task is to print the given array in the tabular format using AngularJS. In JavaScript, data can be stored in the form of arrays. Each of the array items has unique indexing, starting from 0. But what if the developer wants to display all the items that are in the array, on t

How to Filter an Array based on user input in AngularJS ?

AngularJS is a JavaScript-based framework. It can be used by adding it to an HTML page using a <script> tag. AngularJS helps in extending the HTML attributes with the help of directives and binding of data to the HTML with expressions. Angular filters can be added in AngularJS to format data.

How to remove an item from an array in AngularJS Scope?

In the AngularJS framework, we can manipulate the data that is within the scope, for example, we can perform the operations on an array by removing its elements. This helps us for better efficiency in developing the web application.We can remove the array elements in the applications like to-do list

How to push elements in an array using AngularJS ?

Given an array and the task is to perform the push operation on the array using AngularJS. The arr.push() method is used to push one or more values into the array, & new values will add at the end of an array. This method changes the length of the array by the number of elements added to the arr

How to Create an Angular Project from Scratch ?

To create an Angular project from scratch, we'll need Node.js and npm installed on our computer. Once installed, we can use Angular CLI, a command-line tool, to quickly set up a new Angular project with a basic structure. After creating the project, we can start coding our application using TypeScri

How to display variable from .ts file to .html file in angular 17

In Angular, when you're working on a component, you use TypeScript files (.ts) to write the code that controls how the component behaves. On the other hand, HTML files (.html) handle how the user interface looks and gets displayed. Table of Content Data BindingSteps to Create Angular ApplicationInte

How to Sort an Array of Objects by String Property value in Angular ?

An Object is a collection of properties, and a property is an association between a name (or key) and a value. A property's value can be a function, in which case the property is known as a method. In this article, we will learn how to Sort an array of objects by string property value in Angular. He

How to Sort an Array based on User Input in AngularJS ?

AngularJS is a JavaScript-based framework. It can be used by adding it to an HTML page using a <script> tag. AngularJS helps in extending the HTML attributes with the help of directives and binding of data to the HTML with expressions.Â In this article, we will see how to sort an array based o

How to create a custom pipe in AngularJS ?

In this article, we will learn how to generate custom pipe other than using built-in pipe in Angular & also explore its implementation. The Pipe is a function that is used to modify the data before rendering it to the user. Some of the pre-built pipes are date, uppercase, lowercase, currency, de