{"id":9546,"date":"2024-02-07T07:06:07","date_gmt":"2024-02-07T07:06:07","guid":{"rendered":"https:\/\/www.bacancytechnology.com\/qanda\/?p=9546"},"modified":"2024-02-07T07:14:31","modified_gmt":"2024-02-07T07:14:31","slug":"angular-nghide-ngshow-hidden-not-working","status":"publish","type":"post","link":"https:\/\/www.bacancytechnology.com\/qanda\/angular\/angular-nghide-ngshow-hidden-not-working","title":{"rendered":"Angular ngHide ngShow [Hidden] Not Working"},"content":{"rendered":"

Angular JS (Angular 1.x) :<\/h2>\n

The [hidden] attribute is not natively supported as a built-in directive in AngularJS (Angular 1.x). Instead, AngularJS provides directives like ng-show, ng-hide, and ng-if for conditional rendering, allowing you to dynamically control the visibility of HTML elements based on expressions.<\/p>\n

Let’s explore each of them:<\/p>\n

1. ngHide and ngShow Directives:<\/h3>\n

Both ngHide and ngShow evaluate expressions, when the expression is true, ngHide hides the element, and ngShow shows the element.<\/p>\n

ngHide<\/h4>\n

The ngHide directive is used to conditionally hide an element based on an expression. When the expression evaluates to true, the element is hidden; otherwise, it is shown<\/p>\n

<\/pre>\n
ngShow<\/h4>\n
The ngShow directive is used to conditionally show an element based on an expression. When the expression evaluates to true, the element is displayed; otherwise, it is hidden.<\/p>\n
<\/pre>\n
JS:<\/h4>\n
var app = angular.module('myApp', []);\r\napp.controller('MyController', function($scope) {\r\n  $scope.isHidden = true; \/\/ Initially hide the input tag \r\n  $scope.isVisible = true; \/\/  Initially show the input tag\r\n}<\/pre>\n
-> $scope.isHidden is initially set to true, so the input field with ng-hide is hidden when the page loads.<\/p>\n
-> $scope.isVisible is initially set to true, so the input field with ng-show is visible when the page loads.<\/p>\n
2. ngIf Directive:<\/h3>\n
Angular Js also has the ngIf directive, which removes or recreates the element based on a condition, it\u2019s used for more fine-grained control of rendering.<\/p>\n
\r\n
\r\n\r\n.<\/div>\r\n<\/pre>\n
The input tag will be displayed when the expression isDisplayed is true.<\/p>\n
Angular (2 and above) : <\/h2>\n
In Angular, ngHide, ngShow, and [hidden] are not directly available as built-in directives. Instead, Angular relies on the ngIf directive for conditional rendering and [hidden] for toggling visibility.<\/p>\n
1. ngIf Directive:<\/h3>\n
Angular utilizes the ngIf directive for conditional rendering. The ngIf directive adds or removes elements from the DOM based on a provided expression. When the expression evaluates to true, the element is added to the DOM; otherwise, it is removed.<\/p>\n
\r\n
Content to be rendered conditionally<\/div>\r\nthe content inside the 
 is rendered only when the condition is true.\r\n<\/pre>\n
2. [hidden] Attribute:<\/h3>\n
While [hidden] is a standard HTML attribute that hides elements in regular HTML, in Angular, it is often used for toggling visibility. However, it is important to note that it does not provide the same flexibility as ngIf for conditional rendering.<\/p>\n
\r\n
\r\nContent to be hidden or shown based on isHidden \r\n<\/div>\r\n<\/pre>\n
[hidden] can be used for simple visibility toggling, but it does not alter the DOM structure like ngIf.<\/p>\n","protected":false},"excerpt":{"rendered":"
Angular JS (Angular 1.x) : The [hidden] attribute is not natively supported as a built-in directive in AngularJS (Angular 1.x). Instead, AngularJS provides directives like ng-show, ng-hide, and ng-if for conditional rendering, allowing you to dynamically control the visibility of HTML elements based on expressions. Let’s explore each of them: 1. ngHide and ngShow Directives: […]<\/p>\n","protected":false},"author":1,"featured_media":9547,"comment_status":"open","ping_status":"open","sticky":false,"template":"","format":"standard","meta":{"inline_featured_image":false,"footnotes":""},"categories":[9],"tags":[],"class_list":["post-9546","post","type-post","status-publish","format-standard","has-post-thumbnail","hentry","category-angular"],"acf":[],"_links":{"self":[{"href":"https:\/\/www.bacancytechnology.com\/qanda\/wp-json\/wp\/v2\/posts\/9546"}],"collection":[{"href":"https:\/\/www.bacancytechnology.com\/qanda\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/www.bacancytechnology.com\/qanda\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/www.bacancytechnology.com\/qanda\/wp-json\/wp\/v2\/users\/1"}],"replies":[{"embeddable":true,"href":"https:\/\/www.bacancytechnology.com\/qanda\/wp-json\/wp\/v2\/comments?post=9546"}],"version-history":[{"count":7,"href":"https:\/\/www.bacancytechnology.com\/qanda\/wp-json\/wp\/v2\/posts\/9546\/revisions"}],"predecessor-version":[{"id":9554,"href":"https:\/\/www.bacancytechnology.com\/qanda\/wp-json\/wp\/v2\/posts\/9546\/revisions\/9554"}],"wp:featuredmedia":[{"embeddable":true,"href":"https:\/\/www.bacancytechnology.com\/qanda\/wp-json\/wp\/v2\/media\/9547"}],"wp:attachment":[{"href":"https:\/\/www.bacancytechnology.com\/qanda\/wp-json\/wp\/v2\/media?parent=9546"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/www.bacancytechnology.com\/qanda\/wp-json\/wp\/v2\/categories?post=9546"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/www.bacancytechnology.com\/qanda\/wp-json\/wp\/v2\/tags?post=9546"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}