Change the css of a dynamically generated element

Ionic Framework ionic-v3
1

I have a dynamically generated element in my ionic 3 tab application. I want to get access to that element in one of my pages and hide it. Any ideas how to do it?

2

The way you phrase this makes me nervous that you are directly manipulating the DOM from your controller to make this “dynamically generated element”, and if true, that’s bad. All HTML should be in templates, and Angular should be in charge of managing the DOM. Therefore, all you have to do is bind [hidden]="foo" and set a boolean foo property to true and the element will be hidden. You can also use the ngIf structural directive to completely take it out of the DOM.

3

Hi,

Thank you for your reply. Allow me to explain the scenario that I am in right now.

I am basically trying to use a customer live-chat feature in my Ionic tab application wherein I am using super tabs. I am using purechat for the customer live chat functionality.

So basically this is the structure of my app:

  > Tabs
         >Home
         > About
         > Contact

To include PureChat in my app, there’s a small javascript that I have to copy paste in my app.

Problem #1 : I am putting that script in my index.html which is making the PureChat hello Button appear throughout the app on all pages when I only want that button to appear on my contact Page.

How to make that script run or have that PureChat Hello button, render only on my contact page? I have struck a dead end here.

I have tried hiding the button in my index .html by finding that element and setting its style.display property to “none” but this doesn’t seem to work when I run the app in my android device. However, hiding element this way works when I ionic serve and run the app in the browser.

Any suggestions to fix this are highly welcome! Puhleez help!