Showing a div based on the selection of multiple options from a multiselect

I am having trouble implementing a show/hide functionality based on a multiselect dropdown in my Angular and Typescript project. Specifically, I want to display a div with another dropdown menu when the user selects a certain option from the multiselect dropdown. The option in question is 'Name' from the nameList data. Below is the code snippet I have been working with:

<kendo-multiselect [data]="nameList" [(ngModel)]="selectedname "></kendo-multiselect>

<div *ngIf="selectedname === 'Name'">
<div class="col-4">
   You selected {{selectedname}}
</div>
<div class="col-2">Name:</div>
<div class="col-6">
  <kendo-dropdownlist style="width: 100%" [data]="anotherList" [valuePrimitive]="true"></kendo-dropdownlist>
</div>
</div>
angulartypescriptkendo-ui

Answer №1

Whenever there is a change event on the "kendo-multiselect" component, the selected item's name will be added to the "anotherList", and then the kendo-dropdownlist [(ngModel)] will be set to this selected name.

<div *ngIf="selectedname.indexOf('Name')>=0">

This approach seems like it could be the solution, although it has not been tested yet.

Answer №2

Essentially, the function selectedname returns an array, so it is necessary to verify if an item exists within that array. You can achieve this by using the following code snippet:

<kendo-multiselect [data]="nameList" [(ngModel)]="selectedname "></kendo-multiselect>


<div *ngIf="isShown('Name')">
<div class="col-4">
   You have selected {{selectedname}}
</div>
<div class="col-2">Name:</div>
<div class="col-6">
  <kendo-dropdownlist style="width: 100%" [data]="anotherList" [valuePrimitive]="true"></kendo-dropdownlist>
</div>
</div>


isShown(flag) {
      console.log(this.selectedname.indexOf(flag));
      if (this.selectedname.indexOf(flag) !== -1) {
        return true;
      } else {
        return false;
      }
    }

View a functional example 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

Advanced filtering of arrays in JavaScript

The data structure I am working with consists of nested arrays of objects, each containing further nested arrays ad infinitum. Imagine deep nesting levels. Let me illustrate my goal with an example. I have a collection of groups. Each group contains heroe ...

javascriptangular

Warnings are being generated when Angular 15 features multiple auxiliary routes in a specific module

I currently have 3 different router-outlets set up: primary router-outlet (detail) router-outlet (visited) All the routes are configured within the 'country' module. When you click on a country on the left side, you will see the details on the ...

angularangular-auxiliary-routes

The angular-CLI does not support the use of content delivery networks (CDNs) within the .angular-cli.json

Is there a way to make angular-cli recognize when we add any deployed URLs for styles or scripts using CDN? Currently, adding them to index.html works but adding to .angular-cli.json has no effect. Any workaround available? ...

angulartypescriptnpm

Angular's GET HTTP request has resulted in a 500 error message, specifically the Internal Server Error

Attempting to send a GET request to the server where only authenticated users can access a specific route ("/user") after logging in. However, even after a successful login, users are unable to gain access to the "/user" route. A middleware function named ...

node.jsangularexpresspassport.js

Issue with data synchronization between form field and database using Angular with MongoDB and Node.js

I am currently working on developing a contact application that allows users to save contact information directly into the database. For some reason, the form data is not updating in the database when I try to add new contacts. Interestingly, if I manually ...

node.jsangularmongodb

Is it possible to enhance an interface by integrating the characteristics of a constant?

I am currently working on customizing a material-ui v4 Theme. Within our separate @our-project/ui package, we have the following: export declare const themeOptions: { palette: { // some colors missing from Palette } status: string; // other pro ...

typescriptmaterial-ui

Creating an Ionic 3 canvas using a provider

I recently followed a tutorial on integrating the canvas API into Ionic, which can be found at this link. However, I encountered an issue where all the canvas-related functions had to be placed within the pages class, making it quite cumbersome as these f ...

javascriptangulartypescriptionic3

End the pipeline execution in a chain of RxJS observables

Here is a scenario where a series of Observables are chained together. Is it possible to prevent the subsequent chain from executing if an error is thrown by 'parentObs1'? import { throwError } from "rxjs"; import { mergeMap, catchError ...

typescriptrxjs

Developing an object using class and generic features in Typescript

I am currently working on creating a function or method that can generate sorting options from an array. One example is when using Mikro-ORM, where there is a type called FindOptions<T> that can be filled with the desired sorting order for database q ...

typescriptgenerics

Is it possible to configure a custom timezone for the Angular Material datepicker feature?

I am currently working on an Angular 7 application and I have encountered a challenge with the date field. In this particular field, I am utilizing the Angular Material Datepicker input. However, I have noticed that the datepicker automatically captures th ...

angularangular-material

Transforming Typescript types into object literals

type SelectData = { name?: boolean; address?: boolean; } const selectData: SelectData = { name: true } const untypedSelectData = { name: true } I am looking to enforce TypeScript to throw an error if there is an attempt to assign a property that ...

typescript

What is the process for discovering the kinds of models that can be generated with a Prisma client?

Ensuring data type correctness when creating a Prisma model named 'bid' is crucial. With auto-generated prisma types available, understanding the naming convention and selecting the appropriate type can be confusing. The bid schema looks like th ...

typescriptpostgresqlormprismaprisma2

Transform JSON into an Array and generate a new Array from a collection of Arrays

I'm struggling with generating a table in Angular2 from JSON data because I need to pivot the information, but my usual method doesn't seem to work for this scenario. Below is an excerpt of the JSON data I am working with: [ { "ValueDate" ...

javascriptarraysjsonangulartypescript

Chaining asynchronous HTTP requests in Angular 2: A guide to stopping execution if one request fails

I am faced with a challenge of executing an array of HTTP requests in a specific order, where if any request fails, the subsequent ones should not be executed. Is there a way to achieve this requirement? What would be the recommended approach to hand ...

angularhttptypescriptobservable

What is the reason behind TypeScript rejecting the syntax of checkbox input elements?

When trying to use the following checkbox in TypeScript, I encountered a warning: <input type="checkbox" onClick={(event: React.MouseEvent<HTMLInputElement>) => { setIsTOSAccepted(event.target.checked); }} defaultChecked={ ...

htmlreactjstypescript

Is there a way to view the type signature of the resulting intersection type (type C = A & B) in IDE hints, rather than just seeing the components?

When analyzing types defined by intersection in Typescript, I notice that the hint remains identical to the original definition: https://i.stack.imgur.com/mjvI8.png However, what I actually want is to visualize the resulting shape, similar to this: http ...

typescriptide

Is it possible to locate a Typescript class only when there are no references to its properties?

Currently, I am utilizing TypeScript 2.0 within VSCode and although the highlighted errors are being confirmed by the TypeScript compiler, they all point to a module that I am importing: import * as els from 'elasticsearch'; The module elastics ...

node.jstypescript

Utilize style as a module in Angular

The issue at hand: Let's take a look at this project structure: /src /public /styles /general /tables.scss /secure /components /someTable1 /someTable.component.ts /someTable.component.css /someTa ...

angulartypescriptimportsassangular5

What is the maximum allowable size for scripts with the type text/json?

I have been attempting to load a JSON string within a script tag with the type text/json, which will be extracted in JavaScript using the script tag Id and converted into a JavaScript Object. In certain scenarios, when dealing with very large data sizes, ...

javascripthtmljsontypescriptsize

ESLint is unable to locate the OnInit function within the "@angular/core" module

There seems to be an error: import { Component, OnInit, Input, ViewChild, ElementRef } from "@angular/core"; OnInit not found in '@angular/core'eslintimport/named The code appears to be functioning correctly, so perhaps there is a m ...

angularimporteslinttslint