1

I have two divs and want to toggle between them by clicking on button. The following is the code I have tried:

<div id="one" *ngIf="show == true">
     Hello One
</div>
<div id="two" *ngIf="show == false">
     Hello Two
</div>
<button ng-init="show=true">Click to toggle</button>

I want to toggle between two divs on button click, somehow it is not happening in this case. I am suspecting that show is never set to false. What could be my mistake. I am a rookie in AngularJS. How can I achieve toggle btween two elements on button click? Thanks in advance.

Improve this question
1
  • Instead of ng-init="show=true", try ng-click="toggle()" and extend the controller with the toggle function, as shown in your answer below. Commented Nov 5, 2020 at 10:52

3 Answers 3

Reset to default
1

First of all, instead of *ngIf, you have to write ng-if. The former notation is for Angular and the latter is for AngularJS (the predecessor of Angular, which you are using).

Secondly, you are right that show is never set to false in your code. You need to write a function in the controller that can toggle the value of show, as follows:

constructor($scope) {

    $scope.show = true;
    $scope.toggle = function(){
        $scope.show =!$scope.show;
    }
}

Then, the html can be as follows:

<div id="one" ng-if="show">
     Hello One
</div>
<div id="two" ng-if="!show">
     Hello Two
</div>
<button ng-click="toggle()">Click to toggle</button>
Improve this answer
Sign up to request clarification or add additional context in comments.

1 Comment

Yep, got my mistake! Thanks a lot
0

Achieved it using ng-show and ng-hide. Used the following:

<div id="one" ng-show="show>
    Hello One
</div>
<div id="two" ng-hide="show">
    Hello Two
</div>
<button ng-click="toggle()">Click to toggle</button>

In the Controller, added this:

$scope.show = true;
$scope.toggle = function(){
    $scope.show =!$scope.show;
}

Ref: How to toggle between elements in angularJS

I have achieved my goal, but would surely want to know how do we do it via ng-If

Improve this answer

2 Comments

What happens if you take this solution and replace the divs with the divs containing the ng-ifs as shown in your question?
There is another problem: you wrote *ngIf instead of ng-if. I have added an answer with a working example. If you are satisfied with that answer, please mark it with a checkmark.
0

you can use ng-click and inside it set/update global variable with selected button value example ng-click="$root.selected = 'btn_1'" then add another section in the app with ng-if to toggle sections based on selected button (clicked button) (no scripts needed just ng-if and ng-click)

full code example

<!DOCTYPE html>
<html lang="en" ng-app="">
  <head>
    <script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.6.9/angular.min.js"></script>
    <style>section {padding: 10px; background: lightblue;text-align: center;}#section2{background: lightgreen;}</style>
</head>
<body>
    <button ng-click="$root.selected = 'btn_1'">Button 1</button>
    <button ng-click="$root.selected = 'btn_2'">Button 2</button>
    
    <section id="section1" ng-if="selected === 'btn_1'">Section 1</section>
    <section id="section2" ng-if="selected === 'btn_2'">Iam Section 2</section>
</body>
</html>

Improve this answer

Comments

Start asking to get answers

Find the answer to your question by asking.

Ask question

Explore related questions

See similar questions with these tags.