2 Demos of Angular side menu with Bootstrap navbar

Angular sidebar

Creating the sidebar with Angular and Bootstrap navbar The ng-bs-navbar is an Angular directive that can be used for creating the navbar based on Bootstrap, as well as it includes a handy sidebar. You may also place the icons from the materialIcon with the menu items. Developer page Download plug-in How to setup this Angular … Read more

15 different Angular 2 / Bootstrap switch styles

Angular switches

The jw-bootstrap-switch-ng2 directive The jw-bootstrap-switch-ng2 is a solution for creating the Bootstrap switches by Angular 2. A switch is a checkbox turned into the On/Off, Yes/No etc. buttons. The directive for the Bootstrap switch is based on JavaScript and does not use jQuery. Demo Developer page Download plug-in How to install and use the Angular … Read more

3 Demos of Angular JS date / time picker (with range)

Angular date picker

The extended-datetimepicker for Angular Material The extended-datetimepicker is a date and time picker solution for the Angular based projects. This is a mobile-friendly component that enables month navigation by swiping the smartphone. Swiping left will take to the previous month while the right to the next month. After the date or time picker is opened by … Read more

4 Downloadable AngularJS / AngularJS2 Data Table solutions with Demos

angular data tables

The Angular data table solutions In this post, I am going to share a few data table solutions for AngularJS or AngularJS 2+ versions. The data tables features include pagination, searching, sorting etc. The Angular-PagingTable directive The Angular-PagingTable is a simple and easy to use solution for AjngularJS projects that enables creating the data tables … Read more

List of 3 AngularJS Accordion directives to use for your Projects

angular JS accordion

AngularJS based accordion directives The accordion allows presenting content in collapsible panels. In this post, the accordion directives that you may use in your AngularJS / 2 projects is shared. 1- Angular-simple-accordion directive The angular-simple-accordion directive will convert any serial DOM elements into an accordion. For example, the <ul> and <li> tags. Demo Download How … Read more

How to use angular ng-class directive

ng-class if else

The ng-class directive in Angular For dynamically adding or removing the CSS classes from the HTML elements like div, span, input fields etc. you may use the ng-class directive. You may specify the CSS classes in different ways in the value of ng-class directive. Following are the ways: One way is to use the string in … Read more

6 examples to explain Angular ng-repeat directive

ng-repeat

The ng-repeat directive in AngularJS As the directive name suggests, the ng-repeat instantiates a set of HTML or template for each item in the given collection. li Example ng-repeat table demo The collection can be an array or object. FYI, a template in AngularJS is referred to the HTML with angular-specific elements and attributes (directives etc.). … Read more

4 demos of How to use ng-if directive in Angular

ng-if

The ng-if directive in AngularJS As using the ng-if directive, an expression is given. If the expression evaluates as false, the HTML element is removed from the DOM. If the expression is true, it will recreate the portion in DOM. The ng-show and ng-hide directives can also be used to show or hide the specified … Read more

Angular forEach Explained with 2 examples

angular forEach

The forEach function in AngularJS The Angular forEach function can be used to perform some action for each item in a given object or array. The iterator function in forEach is invoked for each item of the array or object. This is almost similar to the foreach loop in other programming languages like JavaScript,  PHP, etc. where … Read more

Apply CSS by using ng-style in AngularJS: 3 demos

ng-style

The ng-style directive The angular ng-style directive can be used for applying the CSS to the specified elements of HTML. For example, upon clicking a button, you may change the background color, font size etc of a paragraph as using the ng-style attribute. This is how you may use the ng-style directive. As HTML element … Read more

Learn using ng-show in AngularJS with 4 demos

angularjs ng-show

The ng-show directive In AngularJS, the ng-show directive is used to show or hide the specified elements. For example, upon clicking a checkbox, you may display or hide a subscription form from the web page. Similarly, you may use it with a div, paragraph, span for showing or hiding upon clicking a button or with … Read more

The ng-change in angularJS: 4 examples

angularjs ng change

The ng-change directive The angularJS ng-change directive, which is used with the input fields like textboxes, textarea, select etc, evaluates the given expression as the value is changed by the user. ng-change example – textbox checkbox demo As such, the JavaScript also supports onchange event where you may perform a certain action as the value in an … Read more

AngularJS ng-click directive explained with 2 examples

angularjs ng-click link

The ng-click directive in AngularJS The AngularJS ng-click directive enables us to add customized behavior as an element is clicked. For example, you may use the ngClick to show and hide the content of specified elements like a paragraph, a form etc. as a button or link is clicked. For example, you may use the … Read more