Tips on getting the dropdown value to show up on the header when it changes using Angular 2 and TypeScript

Question

Tips on getting the dropdown value to show up on the header when it changes using Angular 2 and TypeScript

I need assistance with creating a dropdown field in Angular2. When the user selects "car", I want it to display beside the heading. Can anyone provide guidance on how to achieve this?

HTML:

<h1>Heading <span *ngFor= "let apps of apps">({{apps.name}})</span></h1>
       <div class="form-group">
        <select class="box">
         <option *ngFor= "let apps of apps" >{{apps.name}}</option>
        </select>  
        </div>

Typescript:

this.apps = [
        { "name": "car" },
        { "name": "bike" }
   ];

javascript angular typescript

Answer 1

Answer №1

<h1> Welcome to {{appName}} App</h1>
<select type="number" [(ngModel)]="selectedApp" >
  <option *ngFor="let app of availableApps" [ngValue]="app.name">{{app.name}}</option>
</select>

Take a look at this Demo

Answer 2

<h1> Welcome to {{appName}} App</h1>
<select type="number" [(ngModel)]="selectedApp" >
  <option *ngFor="let app of availableApps" [ngValue]="app.name">{{app.name}}</option>
</select>

Take a look at this Demo

Answer 3

Answer №2

Below is the code snippet for the TS modification

    export class AppComponent  {

      apps:any;
      selectedApp : any;
      constructor(){
this.selectedApp=car;
      this.apps = [
            { "name": "car" },
            { "name": "bike" }
       ];
      }
    }

Here is the updated HTML code

<p>
      {{selectedApp}}
    </p>
    <select class="box" [(ngModel)]="selectedApp">
             <option *ngFor= "let app of apps" [value]="app.name">{{app.name}}</option>
            </select>

Answer 4

Below is the code snippet for the TS modification

    export class AppComponent  {

      apps:any;
      selectedApp : any;
      constructor(){
this.selectedApp=car;
      this.apps = [
            { "name": "car" },
            { "name": "bike" }
       ];
      }
    }

Here is the updated HTML code

<p>
      {{selectedApp}}
    </p>
    <select class="box" [(ngModel)]="selectedApp">
             <option *ngFor= "let app of apps" [value]="app.name">{{app.name}}</option>
            </select>

Tips on getting the dropdown value to show up on the header when it changes using Angular 2 and TypeScript

Answer №1

Answer №2

Similar questions

Ways to insert HTML text into an external webpage's div element without using an iframe

The Autocomplete feature in Material UI React includes both a "Select All" and a "Select

Using Angular to make a DELETE request using HttpClient with a Json Server

Disable onclick action for programmatically created buttons

Even though the onSubmit attribute is set to false in the HTML form, it still submits

The rendering of the Angular 2 D3 tree is not functioning properly

What is the best method to incorporate filtering in a CRUD table?

The `.append()` function includes HTML content as plain text

When executing JavaScript code, the file remains unchanged and does not alter the URL

Experiencing difficulties with managing immutable state within ngrx framework

Using checkboxes to filter a list within a ReactiveForm can result in a rendering issue

Are you in the business of building JavaScript hubs?

What is the method to insert a new <input> element after the last input field has been filled in

submit a new entry to add a record to the database

What is the method to obtain an object as the return value from a click function in JavaScript?

What prevents me from employing my nestjs unique decorator within a constructor?

Error Encountered When Trying to Import Mocha for Typescript Unit Testing

Having issues with utilizing $fetchState in Nuxt 2.12

JavaScript: Controlling the ability to enter text based on the chosen option from a drop-down menu