1

Previously there was a <div>, the contents of which i was toggling on ng-click. With components in Angular 1.5, i moved the contents of the <div>and created a component. I want to load this component on ng-click now.

Is this possible ?

I did not find any help yet. If possible, a help would be great.

Ravi Sankar Rao
  • 1,050
  • 11
  • 26

1 Answers1

0

Its possible to show/hide the component (having your div content). I have created a plnkr, refer the below code and plnkr link

https://plnkr.co/edit/sZSfslXTDGfvGwiDdBSZ?p=preview

HTML:

<!DOCTYPE html>
<html ng-app="componentApp">

  <head>
    <script data-require="angularjs@1.5.8" data-semver="1.5.8" src="https://opensource.keycdn.com/angularjs/1.5.8/angular.min.js"></script>
    <link rel="stylesheet" href="style.css" />
    <script src="script.js"></script>
  </head>

  <body ng-controller="componentController">
    <button ng-click="showComponent()" id="changeText">Show Component</button>
    <div-content ng-if="isShowContent"></div-content>
  </body>

</html>

JS:

angular.module("componentApp", [])
       .controller("componentController", function($scope) {
         $scope.isShowContent = false;
         $scope.showComponent = function() {
           $scope.isShowContent = !$scope.isShowContent;
           document.getElementById("changeText").innerHTML = $scope.isShowContent ? "Hide Component" : "Show Component";
         };
       })
       .component("divContent", {
         template: "This is the content of my div"
       });
Pitchiah Natarajan
  • 179
  • 10