0

I have 1 dropdownlist and 3 input text, categories, title, name, type, at the beginning, I want to hide type field, then when I choose field title in categories dropdownlist, it hides name and show title and type, and when I choose name it goes hides type and title, how can I apply this logic?

in my case it just hides type because it is false.

show.component.html

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" integrity="sha384-BVYiiSIFeK1dGmJRAkycuHAHRg32OmUcww7on3RYdg4Va+PmSTsz/K68vbdEjh4u" crossorigin="anonymous">
</head>
<body>
<div class="container">
  <form id="myform">
     <div class="form-group">
     <label>Categories <span class="text-hightlight">*</span></label>
     <select class="form-control" name="category_id" id="category_id">
        <option>select</option>
        <option value="1">title</option>
        <option value="2">name</option>
     </select>
   </div>
    <div class="form-group">
      <label>title <span class="text-hightlight">*</span></label>
      <input type="text" name="title" class="form-control"/>
    </div>
    <div class="form-group" >
      <label>name <span class="text-hightlight">*</span></label>
      <input type="text" name="name" id="name" class="form-control"/>
    </div>
    <div class="form-group" *ngIf="show">
        <label>type <span class="text-hightlight">*</span></label>
        <input type="text" name="type" id="type" class="form-control"/>
    </div>
 </form>
 </div>
</body>
</html>

show.component.ts

import { Component, OnInit } from '@angular/core';
@Component({
  selector: 'show',
  templateUrl: './show.component.html',
  styleUrls: ['./show.component.css']
})
export class ShowComponent implements OnInit {
  show:boolean=false;
  constructor() { }
  ngOnInit(): void {
  }
}
marzouk najib
  • 71
  • 2
  • 10
  • 1
    https://stackoverflow.com/questions/33700266/how-can-i-get-new-selection-in-select-in-angular-2 – Kashyap Mar 22 '22 at 19:19
  • @Kashyap thx for you answer ,I think my case is a bit different because I need logic – marzouk najib Mar 22 '22 at 19:23
  • 1
    Marzouk, you has not an Angular component. An Angular component has **no** html, body, nor head. You should use [(ngModel)] and *ngIf. If you don't know what are I'm talking please spend some time making the [tutorial](https://angular.io/tutorial). – Eliseo Mar 22 '22 at 20:04
  • Y like Eliseo mention why are you using html, meta, link etc... in your component. When all of these are implemented in index.html. – Daniel Vágner Mar 22 '22 at 21:06

1 Answers1

0

Try this out

At your .ts:

public selection: string;

At your .html

<form id="myform">
  <div class="form-group">
    <label>Categories <span class="text-hightlight">*</span></label>
    <select
      class="form-control"
      name="category_id"
      id="category_id"
      [(ngModel)]="selection"
    >
      <option>select</option>
      <option value="1">title</option>
      <option value="2">name</option>
    </select>
  </div>
  <div class="form-group" *ngIf="selection == '1'">
    <label>title <span class="text-hightlight">*</span></label>
    <input type="text" name="title" class="form-control" />
  </div>
  <div class="form-group" *ngIf="selection == '2'">
    <label>name <span class="text-hightlight">*</span></label>
    <input type="text" name="name" id="name" class="form-control" />
  </div>
  <div class="form-group" *ngIf="selection">
    <label>type <span class="text-hightlight">*</span></label>
    <input type="text" name="type" id="type" class="form-control" />
  </div>
</form>
Danielle
  • 1,386
  • 8
  • 22
  • if you want mannage "numbers" -not string in a select with option use `[value]="1"` -then selection gets the number 1, not the string "1"- and you can compare `*ngIf="selection==1"` – Eliseo Mar 23 '22 at 08:02