How to change Input settings in Angular 6?

I'm looking to toggle between options in a select field and display another input depending on my selection.

Ownership:
<select ngModel="selectedValue">
 <option value="true">Owned</option>
 <option value="false">Not Owned</option>
</select>
<input *ngIf="selectedValue==false" type="date">

Answer №1

<select [(ngModel)]="selectedValue">
  <option value="true">Yes</option>
  <option value="false">No</option>
</select>
<div *ngIf="selectedValue"> The selected choice is: {{selectedValue}}</div>
<input *ngIf="selectedValue == 'false'" type="date">

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

Retain input data when navigating and returning in the browser using Angular

When implementing a search feature in my program, I use an interactive form to collect user input. Upon submission, the form data is converted into JSON format along with the search filters and redirected to another page where a REST service is utilized to ...

Use RxJS chaining to transform an observable of `File` objects into an observable of strings encoded in base64

I have successfully written code that converts my File object to base64: let reader = new FileReader(); reader.readAsDataURL(myFile); reader.onload = () => { let resultStrOrArrayBuf = reader.result; if (!(resultStrOrArrayBuf ...

You cannot declare a selected option within an HTML select element

I am working on a project that involves setting the selected option as the first service in my Service List. I came across this code snippet that has worked for other instances but not in this case. I'm trying to figure out why, public Servicelist: Ar ...

Retrieve various data types through a function's optional parameter using TypeScript

Creating a custom usePromise function I have a requirement to create my own usePromise implementation. // if with filterKey(e.g `K=list`), fileNodes's type should be `FileNode` (i.e. T[K]) const [fileNodes, isOk] = usePromise( () => { ...

Jasmine is raising an error: "TypeError: Unable to access the property 'client' of an undefined object"

While running test cases for the EditFlag component in Angular, I encountered an error stating TypeError: Cannot read property 'client' of undefined. Additionally, I am looking to add a test case for a switch case function. Can someone assist me ...

Is it advisable to blend Angular Material with Bootstrap?

I'm brand new to Angular Material and it seems to have its own intricate API. Coming from using Bootstrap, I'm accustomed to utilizing its grid system with classes like row, containers, cols, etc. I'm curious if it's considered a good o ...

Setting the base path for npm tests: A step-by-step guide

I am currently working on a web application that utilizes Angular as the front-end technology and Java Spring Boot as the backend. https://i.sstatic.net/IWPNZ.png In the screenshot above, you can see that I have created a new directory within the root fo ...

Storing an array of objects in local storage is not working in Angular 9

I've encountered an issue trying to save an array of JSON objects into local storage, and I'm puzzled as to why it's not functioning correctly. Despite utilizing localStorage.setItem('comparisons', JSON.stringify(setComparisons)), ...

Angular's detectChanges method seems to be failing when called on a child component

I've encountered an issue with change detection in my Angular application. For some reason, the change detection stops at the first child in the hierarchy. When I manually invoke change detection one level deeper (in `sch-job-detail`), then the values ...

How do I properly type when extending Button and encountering an error about a missing component property?

Currently in the process of transitioning from MUI v3 to v4. My challenge lies with some Button components that are wrapped and have additional styling and properties compared to the standard Material UI Button component. Ever since upgrading to v4, I&apos ...

Discover the myriad of possibilities created by combining arrays

I am working on a code snippet that aims to generate an array containing all possible combinations between two or more arrays. However, I am encountering a specific issue. getCombn(arr: string | any[], pre?: string | undefined) { pre = pre || ' &a ...

Angular 8 ngFor not displaying expected information from object

I have a set of data which includes IDs, versions, and user details for Paul and Peter. See below: var data = { id: 1 version: 1 user: [ { name: 'paul' }, { name: 'peter' ...

Passing data between Angular 2 components

Below is the component I am working with: @Component({ selector: 'myselector', providers: [ ], directives: [ ChildComponent], pipes: [ ], template: '<myselector>This is {{testEmitter}}</myselector>' }) export cla ...

bsDatepicker restricts the selection of dates after the endDate

I'm attempting to set the minDate for endDate inputs to be one day after startDate's value. Can anyone spot what I'm doing wrong? Check out stackblitz .ts this.minendDate.setDate(this.minendDate.getDate() + 1); this.maxendDate.setDate(this ...

Utilizing req.session in an Express application with Angular (written in TypeScript) when deploying the backend and frontend separately on Heroku

I'm currently facing an issue where I am unable to access req.session from my Express app in Angular. Both the backend and frontend are deployed separately on Heroku. I have already configured CORS to handle HTTP requests from Angular to my Express ap ...

Enhancing Pixi.js functionality with TypeScript: Utilizing 'none' Module Settings

My project is a 100% JavaScript application that operates in the browser, consisting of around 20 JS files with all function names in the global scope. Whenever I make changes to a JS file, I can simply refresh the page and see the updates immediately. Ho ...

Guide to generating a text string by utilizing the foreach loop

Is there a way to combine text strings from interfaces into a single file for display in UI? The current code is generating separate files for each interface. How can I achieve the expected result of having all interfaces in one file? Additionally, is it ...

Creating a FormGroup dynamically using an observable: A step-by-step guide

My current project involves creating a page with multiple reactive forms, tailored for different countries. These forms are generated based on JSON arrays received from the backend, allowing users to view and update settings individually. As I am uncertain ...

Steps for removing routing in Angular 2 after setting the folder as a dependency for another project

In my testing Angular project (referred to as project1), I am developing components and utilizing routing for organizational and aesthetic purposes. There is another Angular project (referred to as project2) which includes the component project-project1 i ...

Dynamic Naming of Angular 2 Components

What is the process for setting a dynamic name to an Angular 2 component? Below is the code snippet from my template: <{{component} [data]="data" [anotherData]="anotherData"></{{component}}> I want to define the componentName in my class lik ...