How to hide a dynamic div using its id in angular 7

Question

I have 2 div,I need hide and show it based on dropdown selection.When my selected option is chartdata 'ChartData' div will show again when I select tabledata 'TableData' div will show. I can easily do it with ngif,but the problem is 'TableData' div is generating from plugin,I cannot put there ngif tag so I need to use its id only.Is there any way to do it with angular 7. Here is the code.

home.component.html

<select (change)="onChangeEvent($event)"><option>Chartdata</option><option>Tabledata</option></select>
<div id="chart">ChartData</div>
<div id="table">TableData</div>

home.component.ts

import { Component, OnInit } from '@angular/core';
import { FormBuilder, FormGroup, Validators } from '@angular/forms';
@Component({
  selector: 'app-home',
  templateUrl: './home.component.html',
  styleUrls: ['./home.component.css']
})
export class HomeComponent implements OnInit { 

    nestedjson:any;
 constructor(private formBuilder: FormBuilder) {


     }

  ngOnInit() {
      this.nestedjson = [{"name":"parent1","value":["child11","child12"]},{"name":"parent2","value":["child2"]},{"name":"parent3","value":["child3"]}];

} 

onChangeEvent(ev) {
    console.log(ev.target.value); // should print option1
}   


}

score 0 · Answer 1 · answered Oct 29 '19 at 08:40

0

IMO you should do it with *ngIf condition, and As you said some part is dynamic so in that case you should re-initilize third party plugin on every time user changes/selected another option. like below -

<select (change)="onChangeEvent($event)"><option>Chartdata</option><option>Tabledata</option></select>
<div *ngIf='selectedOption === "chartData"' id="chart">ChartData</div>
<div *ngIf='selectedOption === "tableData"' id="table">TableData</div>


onChangeEvent() { */Re initilize third party plugin/*}

answered Oct 29 '19 at 08:40

Pardeep Jain

84,110
37
165
215

Thanks but I don't have access to this div itself
TableData
I cannot put any tag there,that is coming from plugin, thats why is there any solution we can use it's id like jquery to hide it – UIAPPDEVELOPER Oct 29 '19 at 09:06
So in that you should wrap your third party plugin template somewhere in the another wrapper say another `div` and put condition on that. – Pardeep Jain Oct 29 '19 at 09:08

Athanasios Kataras · Answer 2 · 2019-10-29T08:56:29.173

You can bind to the [hidden] property

[hidden]="!isChartSelected"
[hidden]="!isTableSelected"

Bear in mind that this only hides the div and it does not remove it from the dome.

A safer and backwards compatible (less than i.e. 11) option, would be to go with a class and use ngClass to show hide.

.hide {
    display: none !important;
}

And then

[ngClass]="{'hidden': selectedValue === 'Chart'}"
[ngClass]="{'hidden': selectedValue === 'Table'}"

If you can't use ngClass, then you can go with plain old javascript like this:

let targetElement = document.getElementsById('chart');
targetElement.classList.remove("hidden");   //remove the class
let targetElement = document.getElementsById('table');
targetElement.classList.add("hidden");   //add the class

And vise-versa if you want to hide the one and show the other.

For more information on the matter you can check this wonderfull explanation here

thanks but I don't have access to this div
TableData
, I cannot put any tags in the html dom .It is generating from plugin — UIAPPDEVELOPER, Oct 29 '19 at 08:52
Ok, check the alternative solution with plain old javascript that I added to the answer. — Athanasios Kataras, Oct 29 '19 at 08:57

How to hide a dynamic div using its id in angular 7

home.component.html

home.component.ts

2 Answers2