0

I work with Angular 1.6. I have component "user-details", which contains two other components "switcher" and "user-table"like this:

<user-details>
    <switcher> </switcher>
    <user-table> </user-table>
</user-details>

"switcher" component contains md-switcher and "user-table" contains table with data. I need hiding my "user-table" components with the help of ng-if directive, when I press on md-switcher.

Jason Aller
  • 3,541
  • 28
  • 38
  • 38
Ivanochka Savchuck
  • 3
  • 4

1 Answers1

0

You can wrap the <user-table> component with a div (or even span) and then use the ng-if or ng-show. The condition for hiding this component can then be changed with md-switcher.

So assuming you have a md-switcher like this:

<md-switch ng-model="canShow" aria-label="Show?">
  Show ?
</md-switch>

The expression "canShow" is used to bind the data and is later used to decide to show/hide the <user-table> like this:

<div ng-show="canShow" ...>
  <user-table> </user-table>
</div>

Although I used div, I am sure you can get similar effect using span. Give it a try and let us know if it helps.

ishmaelMakitla
  • 3,784
  • 3
  • 26
  • 32
  • In what way? Are you getting errors or are you expecting a different approach? – ishmaelMakitla Jan 12 '17 at 16:04
  • When I add ng-if to div which is wrap for component user-details, it is hiding always - when I click on md-switch in true position or when I click md-switch in false position. Why did this happen? :( – Ivanochka Savchuck Jan 12 '17 at 17:26
  • Please try doing the same using `ng-show` as in the example that I provided - if this does not work, then we can look at it more closely, but I do think `ng-show` will work. I am not sure if this might have something to do with the fact that the `ng-if` directive **removes the HTML element** if the expression evaluates to false. – ishmaelMakitla Jan 13 '17 at 09:25