AngularJS HTML DOM
Learn how to dynamically control element visibility, CSS classes, and inline styles in the DOM using AngularJS's ng-show, ng-hide, ng-class, and ng-style directives.
Showing and Hiding Elements
ng-show and ng-hide toggle whether an element is visible by adding or removing the built-in ng-hide CSS class (which sets display:none) based on the truthiness of an expression. The element itself, and its scope, stay in the DOM the whole time - only its visibility changes.
Example
<!DOCTYPE html>
<html>
<head>
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.8.2/angular.min.js"></script>
</head>
<body>
<div ng-app="domApp" ng-controller="PanelController as vm">
<button ng-click="vm.visible = !vm.visible">Toggle details</button>
<div ng-show="vm.visible">
<p>Here are the extra details you asked for.</p>
</div>
<p ng-hide="vm.visible">Click the button to see more.</p>
</div>
<script>
angular.module('domApp', [])
.controller('PanelController', function() {
var vm = this;
vm.visible = false;
});
</script>
</body>
</html>Applying Conditional CSS Classes with ng-class
ng-class lets you add or remove CSS classes based on scope data. Its most flexible form is an object literal where each key is a class name and each value is a boolean expression - the class is applied whenever the expression is truthy.
Example
<!DOCTYPE html>
<html>
<head>
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.8.2/angular.min.js"></script>
</head>
<body>
<div ng-app="domApp" ng-controller="UsernameController as vm">
<input type="text"
ng-model="vm.username"
ng-class="{ 'field-error': vm.username.length === 0,
'field-ok': vm.username.length > 0 }">
<style>
.field-error { border: 2px solid #d9534f; }
.field-ok { border: 2px solid #5cb85c; }
</style>
</div>
<script>
angular.module('domApp', [])
.controller('UsernameController', function() {
var vm = this;
vm.username = '';
});
</script>
</body>
</html>Inline Styling with ng-style
ng-style applies inline CSS directly to an element from an object whose keys are CSS property names and whose values are computed from the scope. It is especially handy for values that must be calculated at runtime, like a progress bar's width or a color that depends on a threshold.
Example
<!DOCTYPE html>
<html>
<head>
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.8.2/angular.min.js"></script>
</head>
<body>
<div ng-app="domApp">
<div ng-controller="ProgressController as vm">
<div class="track">
<div class="fill" ng-style="{ width: vm.percent + '%', backgroundColor: vm.percent > 80 ? 'crimson' : 'seagreen' }"></div>
</div>
<p>{{ vm.percent }}% complete</p>
</div>
<style>
.track { width: 300px; height: 20px; background: #eee; }
.fill { height: 100%; transition: width 0.3s ease; }
</style>
</div>
<script>
angular.module('domApp', [])
.controller('ProgressController', function() {
var vm = this;
vm.percent = 65;
});
</script>
</body>
</html>- ng-if - similar to ng-show, but actually adds or removes the element (and its child scope) from the DOM instead of just hiding it.
- ng-disabled - disables a form control based on an expression.
- ng-src / ng-href - safely bind dynamic image and link URLs so AngularJS can interpolate the expression before the browser requests it.
Exercise: AngularJS HTML DOM
Why use ng-src instead of a plain src for a dynamic image URL?
