AngularJS Tutorial: Conditional Render Example

As a web developer I can say that everyone that works with web development, no matter the language, comes across conditional rendering very often (almost every day), it’s pretty much impossible to see a project that doesn’t have a UI component that cannot be shown if a specific condition isn’t true. And that is not different for AngularJS developers, so today we’re going to learn how to do it with AngularJS, this will be a very simple and easy tutorial, if you are just getting started with angularjs this is the right tutorial for you.

So let’s get started, the example I’m going to give consists in an application with a button that will be responsible for showing and hiding a div that contains some content, to make that content visible and invisible we’re going to use conditional rendering, pretty straightforward, right?

We’re going to start by creating the app.js file, here is how it should look like:

var app = angular.module('renderExample',[]);
app.controller('renderExampleController', function($scope){
	$scope.showContent= true;
	$scope.label= 'Hide Text';
	$scope.switch = function(){
			$scope.showContent= false;
			$scope.label= 'Show Text';
			$scope.showContent= true;
			$scope.label= 'Hide Text';			

As you can see, I’ve declared two variables in my controller: showContent and label. The first one, as the name suggests, is the condition to render the content, it will only appear on the page when this variable is set to true, and the second one is the text that will appear in the button, when the content is visible the label will be 'Hide Text', and when it’s invisible it’ll be 'Show Text'. Lastly, we have the function switch() which will be called by the button and will be responsible for switching the content visibility by changing the two variables values.

Now the last thing we need to do is to create the index.html file:

<!DOCTYPE html>
<html ng-app="renderExample">
      <title>Conditional Render Example</title>
      <script src=""></script>
      <script src="app.js"></script>
      <div ng-controller="renderExampleController">
         <input type="button" value="{{label}}" ng-click="switch()"/>
         <br />
         <div ng-if="showContent">
            Some content.

You should be familiar with most of this code, what really matters here is the directive ng-if, this is the directive that controls if the component will be rendered or not, you just need to pass the condition, which in this case is the variable showContent.

That’s it!! Now if you execute your project you should be able to show/hide the text by pressing the button.

Recommended for you

Angular2 Tutorial: Creating Custom Pipes Angular 2 Pipes provide us a very simple way to transform/format the data displayed by our application, there are some built-in pipes we can use, but sometimes they don't meet our needs, that's when we have to create custom pipes. This will be a very quick tutorial in which I'll give you an example ...
Tutorial: Basic DataTable (sorting, filtering and pagination) with AngularJS and ng-Table In this tutorial I’m going to show you how to create a simple DataTable with some basic features, which are sorting, filtering and pagination. To accomplish this I’m going to use AngularJS with the module ng-Table. First we need to create our project, after doing it, no matter your folder structu...
Tutorial: ng-table with infinite scroll I've already showed in this blog how to create a basic datatable with ng-table, for those who didn't see it yet, just click on the link. This tutorial will just be a complement to the previous one, the difference is that instead of using pagination I'm going to use infinite scroll, and don't worry, ...
Tutorial: Creating AngularJS Services Imagine that you have a project with countless features responsible for performing a huge variety of tasks, if you don't do as much as you can to organize it, how would the code look like? It would be nearly impossible to maintain this project if everything is mixed together in the code, no one woul...

Leave a Reply

Your email address will not be published. Required fields are marked *

Obs: Use the tag <pre lang="LANGUAGE"> to include code blocks to your comment.
Example: <pre lang="javascript"> console.log('Test'); </pre>