visibility:hidden in Angular 2

CssAngular

Css Problem Overview

What's the suggested way to achieve element invisibility in angular 2 (visibility:hidden not showing the element but keeping it space occupied)?. It have a [hide] directive but it seems to be similar to a display:none

Css Solutions

Solution 1 - Css

You can set the visibility style attribute with style binding:

<div [style.visibility]="'hidden'"></div>
<div [style.visibility]="isDivVisible ? 'visible' : 'hidden'"></div>

An example is shown in this plunker.

Edit: You could make a directive to make this easier: https://stackblitz.com/edit/angular-ivy-6sac33?file=src%2Fapp%2Fhide-element.directive.ts

Solution 2 - Css

You also can use the ability of angular to dynamically inspect your property and refresh DOM with NgStyle:

<div [ngStyle]="{'visibility':isDivVisible ? 'visible' : 'hidden'}"></div>

Solution 3 - Css

You can do ngIf if you don't want your component to be rendered in the DOM.

If you want that component to be rendered but not shown you can just set display to none based on a condition with NgClass. But be aware that this may lead to some buggy behavior try always using ngIf

Solution 4 - Css

Try ngShow.

<div ng-show="myValue"></div>

Hide element from controller :

$scope.myValue = false
Categories
Recommended Css Solutions
Recommended Angular Solutions

Previous Solution:

SSIS Script Component Cannot Load Assembly Until Manually Opened

C#Sql ServerVisual StudioSsisBiml

Next Solution:

When to use forEach(_:) instead of for in?

SwiftLoopsForeachSequenceFor in-Loop

Attributions

All content for this solution is sourced from the original question on Stackoverflow.

The content on this page is licensed under the Attribution-ShareAlike 4.0 International (CC BY-SA 4.0) license.

Content TypeOriginal AuthorOriginal Content on Stackoverflow
QuestionjesantanaView Question on Stackoverflow
Solution 1 - CssConnorsFanView Answer on Stackoverflow
Solution 2 - CssLanouView Answer on Stackoverflow
Solution 3 - CssEduardo VargasView Answer on Stackoverflow
Solution 4 - CssValérian PolizziView Answer on Stackoverflow