Angular form input set to disabled mode

Visit this link for code

    <form class="example-form">
  <mat-form-field class="example-full-width"gt;
    <mat-label></mat-label>
    <input matInput placeholder="Ex. Pizza" [disabled]="filterValue" />

    <mat-label *ngIf="filterValue">Search</mat-label>
    <mat-label *ngIf="!filterValue"> No Search</mat-label>
  </mat-form-field>
  <button mat-raised-button (click)="filter()">Basic</button>
</form>

     
    
      filterValue: boolean = false;
      filter() {
        this.filterValue = !this.filterValue;
      }

The issue in my app is that if a user writes something in the search box, the filter works. However, when I click the button, the input becomes disabled and empty. How can I preserve the value entered by the user before the input was disabled?

Answer №1

It appears that there is a mistake in line number 9 of your example:

<button mat-raised-button (ckick)="filter()">Basic</button>

Make sure to use (click) instead of (ckick)

<button mat-raised-button (click)="filter()">Basic</button>

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

Centralize all form statuses in a single component, conveniently organized into separate tabs

I am working on a component that consists of 2 tabs, each containing a form: tab1.component.ts : ngOnInit() { this.params = getParameters(); } getParameters() { return { text : 'sample' form: { status: this.f ...

Difficulty encountered when combining create-react-app with typescript and immutable.js

After realizing that create-react-app now supports typescript, I encountered some issues while trying to transfer my current codebase from react-scripts-ts. Most of my classes are based on Record and cannot be constructed anymore due to errors like: Cannot ...

Issue encountered with redux-toolkit's createAsyncThunk functionality

Here is how I implemented the deleteDirectories method in redux: export const deleteDirectories = createAsyncThunk( "directories/deleteDirectories", async (id, thunkAPI) => { try { const response = await axios.delete(`${url}direc ...

What is the best way to transmit two distinct sets of data from a child component to the v-model of a parent component?

Currently, I am working on a project using vuejs 2 and typescript. In this project, I need to pass two different sets of data - data and attachments - within the parent component. I am utilizing vue-property-decorator for this purpose. However, I am facing ...

Combining Spring Boot and Angular applications for seamless integration

I am trying to connect my Spring Boot application with an Angular application that are running on different servers. When attempting to access REST API from the Angular app, the API call is successful but I encounter an error response on the UI. Acc ...

A step-by-step guide on how to access the version number in an Angular (v4+) application from the package

Currently, I am attempting to retrieve the version number of my Angular application from package.json where it is stored. Most resources recommend using require to load the JSON file like so: var pckg = require('../../package.json'); console.log ...

What is the process for specifying a method on a third-party class in TypeScript?

I'm facing a challenge while trying to extend a third-party class in TypeScript. The issue is that I am unable to access any existing methods of the class within my new method. One possible solution could be to redeclare the existing methods in a sep ...

Encountering the error "No overload matches this call" while utilizing useQuery in TypeScript may indicate a mismatch in function parameters

My issue lies with TypeScript and types. Here is the API I am working with: export const clientAPI ={ //... getOptions: async (myParam: number) => get<{ options: Options[]; courses: any[] }>(`/courses?myParam=${myParam}`)().then((result) =& ...

Typical approach to receiving a transformed object from an HTTP service

One of the services I provide includes a method with the following implementation: public fetchCrawls(page: number): Observable<ICrawl[]>{ return this._http.get(this._crawlsURL + page) .map((res: Response) => { ...

Looking to incorporate form data into a nested object within Firebase using Angular2 - how can I accomplish this?

Trying to include user data in my Angular Fire object. This is how the database structure appears: Attempting to incorporate data into the roles object using the following code: Admin <label> Dealer</label&g ...

Utilizing Dual Destructuring for Handling Undefined Main Objects

Before we proceed, I want to clarify that my question is not a duplicate of ES6 double destructure Let's examine the code snippet related to Apollo Client GraphQL: import { gql, useQuery, useMutation } from '@apollo/client'; ... const { loa ...

Checkbox selection limitation feature not functioning correctly

Having trouble with my checkbox question function - I want to limit the number of checkboxes that can be checked to 3, but it's still allowing more than that. I suspect the issue lies with latestcheck.checked = false; This is my typescript function: ...

To populate an Ionic list with items, push strings into the list using the InfiniteScroll feature

Looking for help with implementing infinite scroll in a list? I am using the ion-infinite-scroll directive but struggling to push string values into my list. The list contains names of students in a classroom. Can anyone provide guidance on how to push str ...

The Angular 2 and TypeScript error stating that the argument of type response is not assignable is causing issues

In my Angular application, I have a service that includes a value defined as: private client_comments = new BehaviorSubject([]); When attempting to update this value with the response from an HTTP request, I encountered the following error message: A ...

Mastering mapped types to replace properties in Typescript

I have created a Factory function where it takes an object as input and if that object contains specific properties, the factory transforms those properties into methods. How can I utilize mapped Types to accurately represent the type of the resulting obj ...

Achieving dynamic serving of static files using Rollup and integrating seamlessly with node-resolve

Currently, I am in the process of building a library using TSDX, which is a powerful CLI tool for package development based on Rollup. My project involves a collection of country flags SVGs that need to be imported and displayed dynamically when required. ...

Challenges with image cropping in Angular causing performance problems

Utilizing this specific component for image cropping within an ionic/angular8 project has been causing severe performance issues, leading to unresponsiveness on mobile devices. Interestingly, the desktop version does not encounter any problems and the crop ...

Encountering a net::ERR_EMPTY_RESPONSE error while trying to use the DELETE Method in Angular 4

I have been using the following method to delete data: return this.http.delete(this.ApiURL, new RequestOptions({headers: headers,body: body })) .map((res: Response) => res.json()); However, I encountered the net::ERR_EMPTY_RESPONSE error. Interestingl ...

Attempting to dynamically load an angular2 component upon the clicking of a tab has been my latest endeavor

Currently, I have multiple components loaded on page load within different tabs by using their selectors during design time. However, I am looking to dynamically load those components upon user demand, specifically when a tab is clicked. The issue arises ...

Attaching an object to an input field in Ionic 2

I've come across a fundamental question that I can't seem to find the answer for online. Within my Ionic 2 application, I have an AddPassengerPage containing input fields for name, email, and phone. In my module, I define these variables: name: ...