Adding input fields dynamically

I have a component named home with 3 input fields for Country, City, and State. You can see them in the image below:

https://i.sstatic.net/ZMXfD.png

I've implemented dynamic addition of input fields, and it's functioning well as shown in the image here:

https://i.sstatic.net/6YmFA.png

However, my specific requirement is: I want to replace the input field in the Country section with a dropdown (select component). Unfortunately, I'm having trouble achieving this. For a demo, you can check out my Stackblitz link: DEMO

angulartypescriptangular-materialangular6

Answer №1

Your code is excellent, but to improve it further, consider replacing your input with matSelect.

<mat-select placeholder="Country" [(ngModel)]="newAttribute.country" name="food">
  <mat-option *ngFor="let country of countries" [value]="country.value">
    {{country.viewValue}}
  </mat-option>
</mat-select>

See Demo Here

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

What is the role of the handleSubmit parameter in React Hook Form?

I'm encountering an issue with TypeScript in the handleSubmit function. To start off, I am accessing the handleSubmit function through the useForm hook: const {handleSubmit, control, watch, reset} = useForm() Next, I define a submit function: con ...

reactjstypescriptreact-hook-form

Utilizing a component from a different module

Currently working on Angular 4 and facing an issue with referencing a component from another module. In my EngagementModule, the setup is defined as below: import { NgModule } from '@angular/core'; // other imports... @NgModule({ imports: [ ...

angulartypescriptangular2-template

Guide to setting up a one-to-many self relation entry in Prisma

I am facing a challenge with a simple schema model that includes one-to-many self relations. In this scenario, my goal is to create a parent entity along with its children in a single transaction. How can I accomplish this task effectively? data-model Y{ ...

typescriptpostgresqlormnestjsprisma

The instanceof operator does not recognize the value as an instance and is returning false, even though it

Is there a method to verify the current instance being used? This is what I am logging to the console: import { OrthographicCamera } from 'three'; // Later in the file: console.log(camera instanceof OrthographicCamera, camera); and the result ...

javascripttypescript

Can you explain how this promise functions within the context of the mutation observer, even without an argument?

Recently, I came across a mutation observer in some TypeScript code that has left me puzzled. This particular implementation of a promise within the mutation observer seems unconventional to me: const observer = new MutationObserver((mutations: MutationR ...

javascripttypescriptpromisemutation-observersthenable

How can we retrieve the target element for an 'onSelectionChange' DOM event in Angular 6?

When using Angular 6, I want to retrieve the "formControlName" of the corresponding element whenever the selection changes. HTML <mat-form-field *ngIf="dispatchAdviceChildForAdd._isEditMode" class="mat-form-field-fluid"> <mat-select ...

angulartypescript

Receiving a conduit from the fuel supplier with only limited information on hand

I am designing a service that will utilize pipes as templates. In order to accomplish this, I require access to the registered pipes. The final code structure should resemble the following: @Injectable() class MyService { constructor(private injector ...

angulartypescript

Are you looking to use the 'any' type instead of the 'Object' type? Angular Services can help you with that

I encountered the following error message: Argument of type 'OperatorFunction<APISearch[], APISearch[]>' is not assignable to >parameter of type 'OperatorFunction<Object, APISearch[]>'. The 'Object' type is ...

angulartypescript

Utilize TypeScript functions within Angular applications

I have successfully created a TypeScript module and after compiling it, I am generating a JavaScript file. However, when I try to use this JavaScript file within my Angular project in the index.html, it loads but I cannot access its functionality from any ...

javascriptangularjstypescripttypescript1.8

Issues arise when attempting to use the Android KeyUp, KeyDown, and KeyPress events in conjunction with Angular2

I am encountering an issue where I consistently receive a keyCode of 229 in Android Chrome browsers when running either: <input type="text" (keydown)="testKeyCodes($event)"/> <!-- or --> <input type="text" (keyup)="testKeyCodes($event)"/& ...

javascriptandroidhtmlangularevents

An issue with TypeORM syntax causing errors within a NestJS migration file

I recently encountered an issue while setting up PostgreSQL with NestJS and TypeORM on Heroku. Despite successfully running a migration, my application kept crashing. I attempted various troubleshooting methods by scouring through blogs, GitHub issues, and ...

postgresqltypescriptnestjstypeorm

send the user to a different HTML page within an Angular application

Does anyone have the answer to my question? I need help figuring out where the comment is located that will redirect me to another page if it's false. <ng-container *ngIf="!loginService.verificarToken(); else postLogin"> <ul clas ...

angular

What is the best way to modify an object within a pure function in JavaScript?

Currently, I am exploring different strategies to ensure that a function remains pure while depending on object updates. Would creating a deep copy be the only solution? I understand that questions regarding object copying are quite common here. However, ...

javascriptreactjstypescript

Arranging unit tests can be a headache in Angular using Jasmine

I'm finding it really challenging to set up the testing module for my unit tests in Angular. The issue I'm facing is that I struggle to identify all the dependencies I need. My current approach is to start karma with ng test and then check the e ...

angularunit-testingjasminekarma-jasmine

Is it possible to dynamically generate a form using ngFor in Angular 4?

I'm attempting to generate an editable form dynamically using ngFor. Essentially, it's a data grid and I might use some other systems for this task--perhaps that's the route I should take, but I wanted to give this approach a try initially. ...

angularangular2-forms

How can debugging in Chrome be achieved using Typescript?

How is it possible to debug TypeScript in Google Chrome when the browser only understands JavaScript? I find myself debugging my TypeScript files within my Angular project, which was created using Angular CLI, through the Chrome developer tools. However, ...

angulargoogle-chrometypescript

What sets a module apart from a script?

As I delve into the depths of TypeScript documentation to grasp the concept of modules, particularly ES6 modules, I stumbled upon some interesting insights. typescript-modules - this documentation talks about typescript modules and highlights an important ...

javascripttypescriptes6-modules

Challenges with npm installation in Angular Quickstart

I've been following the Angular getting started guide and encountered some issues. After cloning the repository, I attempted to run npm install, but I'm encountering errors: npm WARN package.json <a href="/cdn-cgi/l/email-protection" class=" ...

angularnpmnpm-install

Utilizing Angular signals to facilitate data sharing among child components

I have a main component X with two sub-components Y and Z. I am experimenting with signals in Angular 17. My query is how can I pass the value of a signal from sub-component Y to sub-component Z? I have attempted the following approach which works initial ...

angulartypescript

Is it possible to have routing only within child components in Angular 2?

I have set up a main component as the root component <tracker-module></tracker-module> Within the main component, there are sub-components structured like this: <header></header> <left-navigation></left-navigatio ...

angularjsangularangular2-routing