CODEWITHSUNDEEP
angularangular-componentsangular-template
Mihai Răducanu
Mihai Răducanu

Reputation: 12585

What is the equivalent of ngShow and ngHide in Angular 2+?

I have a number of elements that I want to be visible under certain conditions.

In AngularJS I would write

<div ng-show="myVar">stuff</div>

How can I do this in Angular 2+?

Upvotes: 751

Views: 871248

Answers (24)

Srikar Phani Kumar M
Srikar Phani Kumar M

Reputation: 1384

Just an FYI => For anyone using Angular 17 & above

You can use the @if syntax in place of *ngIf

Four Key points about @if:

  1. It replaces the older *ngIf directive.
  2. It doesn't require an asterisk (*) prefix.
  3. It supports @else-if-else conditions.
  4. You can chain multiple @else if blocks.
// Example with multiple conditions:

@if (temperature > 30) {
  <p>It's hot!</p>
} @else if (temperature > 20) {
  <p>It's warm.</p>
} @else if (temperature > 10) {
  <p>It's cool.</p>
} @else {
  <p>It's cold!</p>
}

You might have to enable the new control flow syntax in your app.config.ts file:

import { ApplicationConfig } from '@angular/core';

export const appConfig: ApplicationConfig = {
  // other configurations...
  controlFlow: 'new'
};

Upvotes: 1

Ali Shahzad
Ali Shahzad

Reputation: 5332

Use the [hidden] attribute:

[hidden]="!myVar"

Or you can use *ngIf

*ngIf="myVar"

These are two ways to show/hide an element. The only difference is: *ngIf removes the element from DOM while [hidden] tells the browser to show/hide an element using CSS display property by keeping the element in DOM.

Upvotes: 195

Raghunath
Raghunath

Reputation: 171

This answer is for those who don't know how make an element hide, visible from .ts file

TS File

export class PostTweetComponent implements OnInit {
isHidden:boolean = false;
  hide(){
    this.isHidden = true;
  }
  unHide(){
    this.isHidden = false;
  }
}

HTML File

<div [hidden]="isHidden">stuff</div>
<button (click)="hide()">Hide</button>
<button (click)="unHide()">UnHide</button>

Upvotes: 0

Liya Mary Varghese
Liya Mary Varghese

Reputation: 39

[hidden]="yourVariable" OR [style.display]="!isShow? 'block' : 'none'"

Upvotes: 2

Gil Epshtain
Gil Epshtain

Reputation: 9831

According to Angular 1 documentation of ngShow and ngHide, both of these directive adds the css style display: none !important;, to the element according to the condition of that directive (for ngShow adds the css on false value, and for ngHide adds the css for true value).

We can achieve this behavior using Angular 2 directive ngClass:

/* style.css */
.hide 
{
    display: none !important;
}

<!-- old angular1 ngShow -->
<div ng-show="ngShowVal"> I'm Angular1 ngShow... </div>

<!-- become new angular2 ngClass -->
<div [ngClass]="{ 'hide': !ngShowVal }"> I'm Angular2 ngShow... </div>

<!-- old angular1 ngHide -->
<div ng-hide="ngHideVal"> I'm Angular1 ngHide... </div>

<!-- become new angular2 ngClass -->
<div [ngClass]="{ 'hide': ngHideVal }"> I'm Angular2 ngHide... </div>

Notice that for show behavior in Angular2 we need to add ! (not) before the ngShowVal, and for hide behavior in Angular2 we don't need to add ! (not) before the ngHideVal.

Upvotes: 11

mahmoud elgml
mahmoud elgml

Reputation: 311

using [ngStyle]

[ngStyle]="{'visibility': my-flag ? 'visible' : 'hidden'}"

Upvotes: 3

G&#252;nter Z&#246;chbauer
G&#252;nter Z&#246;chbauer

Reputation: 657937

The hidden property can be used for that

[hidden]="!myVar"

See also

issues

hidden has some issues though because it can conflict with CSS for the display property.

See how some in Plunker example doesn't get hidden because it has a style

:host {display: block;}

set. (This might behave differently in other browsers - I tested with Chrome 50)

workaround

You can fix it by adding

[hidden] { display: none !important;}

To a global style in index.html.

another pitfall

hidden="false"
hidden="{{false}}"
hidden="{{isHidden}}" // isHidden = false;

are the same as

hidden="true"

and will not show the element.

hidden="false" will assign the string "false" which is considered truthy.
Only the value false or removing the attribute will actually make the element visible.

Using {{}} also converts the expression to a string and won't work as expected.

Only binding with [] will work as expected because this false is assigned as false instead of "false".

*ngIf vs [hidden]

*ngIf effectively removes its content from the DOM while [hidden] modifies the display property and only instructs the browser to not show the content but the DOM still contains it.

Upvotes: 1216

Chathuran D
Chathuran D

Reputation: 2440

Best way to deal with this issue using ngIf Because this will prevent getting that element render in front-end,

If you use [hidden]="true" or style hide [style.display] it will only hide the element in front end and someone can change the value of it and view it easily, In my opinion best way to hide elements is ngIf

<div *ngIf="myVar">stuff</div>

And also If you have multiple elements (need to implement else also) you can Use <ng-template> option

<ng-container *ngIf="myVar; then loadAdmin else loadMenu"></ng-container>
<ng-template #loadMenu>
     <div>loadMenu</div>
</ng-template>

<ng-template #loadAdmin>
     <div>loadAdmin</div>
</ng-template>

sample ng-template code

Upvotes: 1

Manoj Gupta
Manoj Gupta

Reputation: 474

To hide and show div on button click in angular 6.

Html Code

<button (click)="toggleElement()">FormatCell</button>
<div class="ruleOptionsPanel" *ngIf="isShow">
   <table>
      <tr>
         <td>Name</td>
         <td>Ram</td>
      </tr>
   </table>
</div>

AppComponent.ts Code

@Component({
   selector: 'app-root',
   templateUrl: './app.component.html',
   styleUrls: ['./app.component.css']
})
export class AppComponent{
   isShow=false;
   toggleElement():void
   {
      this.isShow = !this.isShow
   }
}

this works for me and it is a way to replace ng-hide and ng-show in angular2+

Upvotes: 0

Naeem Bashir
Naeem Bashir

Reputation: 2017

You have two options:

First Option

[style.display]="!isShow ? 'block' : 'none'"

Second Option

myVarible can be boolean

[hidden]="!myVarible"

Upvotes: 1

T. Bulford
T. Bulford

Reputation: 407

My issue was displaying/hiding a mat-table on a button click using <ng-container *ngIf="myVar">. The 'loading' of the table was very slow with 300 records at 2-3 seconds.

The data is loaded using a subscribe in ngOnInit(), and is available and ready to be used in the template, however the 'loading' of the table in the template became increasingly slower with the increase in number of rows.

My solution was to replace the *ngIf with:

<div [style.display]="activeSelected ? 'block' : 'none'">

. Now the table loads instantly when the button is clicked.

Upvotes: 2

Alex
Alex

Reputation: 906

this is what worked for me:

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

Upvotes: 19

nephiw
nephiw

Reputation: 2046

If you just want to use the symmetrical hidden/shown directives that AngularJS came with, I suggest writing an attribute directive to simplify the templates like so (tested with Angular 7):


import { Directive, Input, HostBinding } from '@angular/core';

@Directive({ selector: '[shown]' })
export class ShownDirective {
  @Input() public shown: boolean;

  @HostBinding('attr.hidden')
  public get attrHidden(): string | null {
    return this.shown ? null : 'hidden';
  }
}

Many of the other solutions are correct. You should use *ngIf where ever possible. Using the hidden attribute can have unexpected styles applied, but unless you are writing components for others, you probably know if it is. So for this shown directive to work, you will also want to make sure that you add:

[hidden]: {
  display: none !important;
}

to your global styles somewhere.

With these you can use the directive like so:

<div [shown]="myVar">stuff</div>

with the symmetrical (and opposite) version like so:

<div [hidden]="myVar">stuff</div>

To add on to the shoulds - yous should also us a prefix like so [acmeShown] vs just [shown].

The main reason I used a shown attribute directive is for converting AngularJS code to Angular -AND- when the content that is being hidden contains container components that cause XHR round trips. The reason I don't just use [hidden]="!myVar" is that often enough it is more complicated like: [hidden]="!(myVar || yourVar) && anotherVar" - yes I can invert that, but it is more error prone.[shown]` is simply easier to think about.

Upvotes: 0

Priyanka Arora
Priyanka Arora

Reputation: 457

for me, [hidden]=!var has never worked.

So, <div *ngIf="expression" style="display:none;">

And, <div *ngIf="expression"> Always give correct results.

Upvotes: 4

Niyaz
Niyaz

Reputation: 2893

<div [hidden]="myExpression">

myExpression may be set to true or false

Upvotes: 15

koo
koo

Reputation: 169

There are two examples on Angular documents https://angular.io/guide/structural-directives#why-remove-rather-than-hide

A directive could hide the unwanted paragraph instead by setting its display style to none.

<p [style.display]="'block'">
  Expression sets display to "block".
  This paragraph is visible.
</p>

<p [style.display]="'none'">
  Expression sets display to "none".
  This paragraph is hidden but still in the DOM.
</p>

You can use [style.display]="'block'" to replace ngShow and [style.display]="'none'" to replace ngHide.

Upvotes: 0

Chirag
Chirag

Reputation: 413

<div [hidden]="flagValue">
---content---
</div>

Upvotes: 3

Valex
Valex

Reputation: 1196

I find myself in the same situation with the difference than in my case the element was a flex container.If is not your case an easy work around could be 

[style.display]="!isLoading ? 'block' : 'none'"

in my case due to the fact that a lot of browsers that we support still need the vendor prefix to avoid problems i went for another easy solution

[class.is-loading]="isLoading"

where then the CSS is simple as

&.is-loading { display: none }

to leave then the displayed state handled by the default class.

Upvotes: 57

Anjil Dhamala
Anjil Dhamala

Reputation: 1622

For anybody else stumbling across this issue, this is how I accomplished it.

import {Directive, ElementRef, Input, OnChanges, Renderer2} from "@angular/core";

@Directive({
  selector: '[hide]'
})
export class HideDirective implements OnChanges {
  @Input() hide: boolean;

  constructor(private renderer: Renderer2, private elRef: ElementRef) {}

  ngOnChanges() {
    if (this.hide) {
      this.renderer.setStyle(this.elRef.nativeElement, 'visibility', 'hidden');
    } else {
      this.renderer.setStyle(this.elRef.nativeElement, 'visibility', 'visible');
    }
  }
}

I used 'visibility' because I wanted to preserve the space occupied by the element. If you did not wish to do so, you could just use 'display' and set it to 'none';

You can bind it to your html element, dynamically or not.

<span hide="true"></span>

or

<span [hide]="anyBooleanExpression"></span>

Upvotes: 10

63RMAN
63RMAN

Reputation: 628

in bootstrap 4.0 the class "d-none" = "display: none!important;"

<div [ngClass]="{'d-none': exp}"> </div>

Upvotes: 5

Gian Marco
Gian Marco

Reputation: 23299

If you are using Bootstrap is as simple as this:

<div [class.hidden]="myBooleanValue"></div>

Upvotes: 4

Tim Hong
Tim Hong

Reputation: 2764

Sorry, I have to disagree with binding to hidden which is considered to be unsafe when using Angular 2. This is because the hidden style could be overwritten easily for example using 

display: flex;

The recommended approach is to use *ngIf which is safer. For more details, please refer to the official Angular blog. 5 Rookie Mistakes to Avoid with Angular 2

<div *ngIf="showGreeting">
   Hello, there!
</div>

Upvotes: 34

Sandip - Frontend Developer
Sandip - Frontend Developer

Reputation: 14689

Use hidden like you bind any model with control and specify css for it:

HTML:

<input type="button" class="view form-control" value="View" [hidden]="true" />

CSS:

[hidden] {
   display: none;
}

Upvotes: 6

Gary
Gary

Reputation: 601

If your case is that the style is display none you can also use the ngStyle directive and modify the display directly, I did that for a bootstrap DropDown the UL on it is set to display none.

So I created a click event for "manually" toggling the UL to display

<div class="dropdown">
    <button class="btn btn-default" (click)="manualtoggle()"  id="dropdownMenu1" >
    Seleccione una Ubicación
    <span class="caret"></span>
    </button>
    <ul class="dropdown-menu" [ngStyle]="{display:displayddl}">
        <li *ngFor="let object of Array" (click)="selectLocation(location)">{{object.Value}}</li>                                
     </ul>
 </div>

Then on the component I have showDropDown:bool attribute that I toggle every time, and based on int, set the displayDDL for the style as follows

showDropDown:boolean;
displayddl:string;
manualtoggle(){
    this.showDropDown = !this.showDropDown;
    this.displayddl = this.showDropDown ? "inline" : "none";
}

Upvotes: 7

Related Questions