Angular Bootstrap Website IV leaves off from the previous three posts.

First of all here is the new website with a few changes made to display the drink products more clearly.

See the Pen Angular Bootstrap Website IVOne by Daniel (@Parsons) on CodePen.

On lines 17,18 and 19 in the ‘html’ document inside the ‘a’ link tags is a ‘ng-click’ directive.

This will add interactivity to the tabs. On line 21 a ‘{{tab}}’ expression has been added to the page to display the value given to each tab.
Press on each tab and see the value given to each tab displayed under the ‘description’ tab.

See the Pen Angular Bootstrap Website IVTwo by Daniel (@Parsons) on CodePen.

When ‘ng-click’ changes the value of ‘tab’ the ‘{{tab}}’ expression automatically gets updated. Expressions define a 2-way Data Binding.
In other words expressions are re-evaluated when a property changes.

Now lets add the tab content panels to show the appropriate information for each tab when it is clicked. The content panel code looks like this.

Also in the array of json objects a ‘specification’ name / value pair and a ‘review’ name / value pair needs to be added to each drink object.

See the Pen Angular Bootstrap Website IVThree by Daniel (@Parsons) on CodePen.


The Angular code now shows the panel if the tab is the right number. So if a tab is selected it will show the appropriate content panel.

We also need to set an initial value for a tab. The ‘ng-init’ directive is used here. Inside the opening ‘section’ tag on line 15 of the ‘html’ document the following directive and assigned value is added to display the ‘Description’ tag on refresh.

Now the ‘Description’ panel shows.

See the Pen Angular Bootstrap Website IVFour by Daniel (@Parsons) on CodePen.


Another important consideration is having the tab highlight when active. Bootstrap has the ‘active’ class which can be set using an Angular directive, the ‘ng-class’ directive. In each of the opening ‘li’ tags for each tab the ‘ng-class=”{active:tab === }” is added with the value of the tab after the ‘===’. The ‘nav-pills’ unordered list looks like this below.

And here are the active tabs now highlighting.

See the Pen Angular Bootstrap Website IVFive by Daniel (@Parsons) on CodePen.


The ‘ng-class’ checks to see if the expression ‘{active:tab}’ is true and if it is the class ‘active’ is appended to the ‘li’ element.


Angular logo.

Share!Share on FacebookShare on Google+Tweet about this on TwitterShare on LinkedInPin on PinterestShare on RedditShare on Tumblr

Leave a Reply

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