Angular 2 offers a powerful feature called ngFor that allows developers to

Is there a way to allow users to enter keywords in an input field to filter items within a list of menu items dynamically without using ngModel? I need this to be done without the use of buttons as well. Any suggestions for a workaround?

<div class="launch-switch-popup" [class.hidden]="!isActive">
     //INPUT OF SOME SORT GOES HERE
    <div class="launch-switch-item" *ngFor="let item of menuItems">
        <img class="icon" [src]="item.icon"> 
        <p class="launch-switch-title">{{item.text}}</p>
        <br>
        <div class="plugin-row" *ngFor="let child of item.children" (click)="clicked(child)">
            <p>{{child.text}}</p>
        </div>
    </div>
</div>
angulartypescriptfilter

Answer №1

mat-autocomplete-filter-input

HTML:

<form class="custom-form">
    <mat-form-field class="custom-full-width">
        <input type="text" placeholder="Choose one" aria-label="Number" matInput [formControl]="myControl" [matAutocomplete]="auto">
        <mat-autocomplete #auto="matAutocomplete">
            <mat-option *ngFor="let option of filteredOptions | async" [value]="option">
                {{option}}
            </mat-option>
        </mat-autocomplete>
    </mat-form-field>
</form>

TS:

 myControl = new FormControl();
  options: string[] = ['One', 'Two', 'Three','Four', 'Five', 'Six'];
  filteredOptions: Observable<string[]>;

  ngOnInit() {
    this.filteredOptions = this.myControl.valueChanges
      .pipe(
      startWith(''),
      map(value => this._filter(value))
      );
  }

  private _filter(value: string): string[] {
    const filterValue = value.toLowerCase();

    return this.options.filter(option => option.toLowerCase().includes(filterValue));
  }

Similar questions

If you have not found the answer to your question or you are interested in this topic, then look at other similar questions below or use the search

How can I make TypeScript mimic the ability of JavaScript object wrappers to determine whether a primitive value has a particular "property"?

When using XMLValidator, the return value of .validate function can be either true or ValidationError, but this may not be entirely accurate (please refer to my update). The ValidationError object includes an err property. validate( xmlData: string, opti ...

javascripttypescriptprimitive

Using TypeScript to assert the type of a single member in a union of tuples, while letting TypeScript infer the types of the other members

Currently, I am attempting to implement type assertion for the "error-first" pattern. Within my function, it returns tuples in the format of ['error', null] or [null, 'non-error']. The specific condition I want to check for is error = ...

typescript

Working with relative paths in React Native TypeScript using WebStorm

My variable color is located in the path app/theme. To set it up, I created a package.json file in app/package.json with the following content: { "name": "app" } Now, to import color in TypeScript files, I use the following syntax: import { color } fro ...

typescriptreact-nativeimportpathwebstorm

Ensuring type signatures are maintained when wrapping Vue computed properties and methods within the Vue.extend constructor

Currently, I am trying to encapsulate all of my defined methods and computed properties within a function that tracks their execution time. I aim to keep the IntelliSense predictions intact, which are based on the type signature of Vue.extend({... Howeve ...

javascripttypescriptvue.js

How can I generate codegen types using typeDefs?

I have been exploring the capabilities of graphql-codegen to automatically generate TypeScript types from my GraphQL type definitions. However, I encountered an issue where I received the following error message: Failed to load schema from code file " ...

javascriptnode.jstypescriptgraphqlgraphql-codegen

Can you provide guidance on how to pass props to a component through a prop in React when using TypeScript?

Hey there, I'm facing an issue with TypeScript where the JavaScript version of my code is functioning properly, but I'm having trouble getting the types to compile correctly. In an attempt to simplify things for this question, I've removed ...

reactjstypescriptgenerics

Is there a way to determine which response corresponds to each request when hitting the same endpoint multiple times?

When making multiple requests to an API endpoint, how can I differentiate the response for each specific request? For example, if a user clicks the upload button three times, how can I track each request individually? ...

javaangularspring-boot

Best practice for importing ts files from an npm package

When faced with the need to divide a ts project into multiple repositories/packages for creating microservices, the challenge arises in combining these packages efficiently. Some packages are required in one microservice, others in another, and some in all ...

node.jstypescriptnpmimportmicroservices

Having trouble updating Angular CLI

It appears that I have successfully installed version 9 as per the usual installation process. npm install -g @angular/cli npm WARN deprecated <a href="/cdn-cgi/l/email-protection" class="__cf_email__" data-cfemail="d9abbca8acbcaaad99ebf7e1e1f7eb"> ...

angularnpmangular-clinode-modules

Preventing image flickering in SvelteKit: A guide

Upon the initial loading of a website, you may notice that the images tend to flicker or flash when transitioning between them. However, once these images are stored in the browser's cache, subsequent visits to the site will display the images seamles ...

typescriptsveltekit

Sending a POST request that is attempting to insert empty values into an MS SQL database

Here is the code I am working with - onSubmit(){ var headers = new Headers(); headers.append('Content-Type', 'application/x-www-form-urlencoded'); let postParams = { firstName : this.firstName, lastName : this.lastNa ...

node.jsangularexpresspost

Angular i18n simplifies the process of internationalizing and local

Is there a way to display different labels based on the user without using conditionals? I want to maintain consistency in this large project. For example: When User 1 is logged in: <h1>Hello, I am User 1</h1> When User 2 is logged in: < ...

angularangular9angular-elements

Is it possible to generate an array of strings from the keys of a type or interface?

Imagine a scenario where we have a type or interface defined as NumberLookupCriteria: type NumberLookupCriteria = { dialCode: string; phoneNumber: string; } or interface NumberLookupCriteria { dialCode: string; phoneNumber: string; } Is there a w ...

javascripttypescript

What's New with Material 3 in Angular 17?

Even though I've taken the time to read all of the documentation at https://github.com/material-components/material-web/blob/main/docs/quick-start.md, I'm still struggling to figure out how to incorporate this into my Angular 17 project. I went ...

angularmaterial-ui

Unsure how to proceed with resolving lint errors that are causing changes in the code

Updated. I made changes to the code but I am still encountering the following error: Error Type 'String' is not assignable to type 'string'. 'string' is a primitive, but 'String' is a wrapper object. It is recom ...

javascriptjqueryhtmltypescriptkendo-ui

Which specific type should be utilized for the onchange event in checkboxes?

Which type should be used for checkbox event onchange when implementing pure javascript with typescript? const checkbox = document.querySelector("#myCheckbox") as HTMLInputElement; function handleCheckboxChange(event: ChangeEvent<HTMLInputEle ...

typescript

Using Typescript to create a Checkbox Grid that displays pipe-delimited values and implements a custom validation rule

I am currently working with a checkbox grid that contains pairs of AccountIds (consisting of x number of digits) and file names separated by a pipe delimiter. The file names are structured to always begin with either PRC or FE followed by a varying combin ...

javascriptangulartypescript

Steps to filter types by a singular property assessment

export type HalfSpin = { halfspin: string } export type FullSpin = { fullspin: string } export type SpinType = | HalfSpin | FullSpin export function isHalfSpin(_: SpinType) ...

typescript

A reference to 'this' is not permissible within a static function in Types

Based on this GitHub issue, it is stated that referencing this in a static context is allowed. However, when using a class structure like the following: class ZController { static async b(req: RequestType, res: Response) { await this.a(req) ...

typescript

Issue with bi-directional data binding in Angular's matInput component

When working on my template... <input matInput placeholder="Amount" [(value)]="amount"> In the corresponding component... class ExampleComponent implements OnInit { amount: number = 0; ... } The binding doesn't seem to work as expect ...

angulartypescript