Show/hide angular element by condition

Question

I built a feature adding "and zombies" to book names of choice, using basic angular.

         <input type="text" ng-model="bookname" onclick="zombies()"> 
            <h1> {{bookname}} </h1>

I want the "and zombies" (and the text inserted in the input) to be displayed only when there's text inside the input.

I tries this for starts, just to call the angular using JS and it doesn't work.

      <script>
    function zombies() {
    document.getElementsByTagName("h1").innerHTML = "{{}}" + "and zombies";
    };
    </script>

How do I display the text when there's text inside the input? (please go easy on me, I'm studying alone and you all started as juniors)

ngIf is what you're looking for : https://angular.io/api/common/NgIf — Guillaume Georges, Jun 27 '18 at 09:43
document.getElementsByTagName("h1") is a collection. And you likely want nextSibling instead — mplungjan, Jun 27 '18 at 09:44
Possible duplicate of [Angular 2 Show and Hide an element](https://stackoverflow.com/questions/35163009/angular-2-show-and-hide-an-element) — Guillaume Georges, Jun 27 '18 at 09:45
@LiorShapira you should try this `
{{(bookname)? bookname+' and zombies' : bookname}}
` — Sanoj_V, Jun 27 '18 at 10:10

score 1 · Answer 1 · answered Jun 27 '18 at 09:46

You Just need to add the condition which checks the value of bookname and display the static content with your name.

Like this -

<input type="text" [(ngModel)]="bookname" (click)="zombies()"> 
<h1> {{bookname}} <span *ngIf='bookname'>and zombies</span> </h1>

score 0 · Answer 2 · answered Jun 27 '18 at 09:45

0

You can use a condition here.

<input type="text" [(ngModel)]="bookname" onclick="zombies()"> 
<h1 *ngIf="bookname"> {{bookname}} and zombies</h1>

Or if you want to use javascript:

<input type="text" ng-model="bookname" onclick="zombies()"> 
<h1 id="txtheading"></h1> 

function zombies() {
    var heading_value = document.getElementById("txtheading").value;
    document.getElementById("txtheading").innerHTML = heading_value  + " and zombies";
};

answered Jun 27 '18 at 09:45

Prachi

3,478
17
34

It's likely a list - I would find the next H1 sibling – mplungjan Jun 27 '18 at 09:48
Playing with DOM elements without requirement is not recommended by Angular – Pardeep Jain Jun 27 '18 at 09:51
But OP's primary issue is why it isn't working. Not just providing an alternative solution. Btw I have provided the answer based on angular binding too. – Prachi Jun 27 '18 at 09:53

score 0 · Answer 3 · answered Jun 27 '18 at 10:21

Easiest Solution you don't need onclick function ng-model will work itself.

AngularJs:

<input type="text" ng-model="bookname">
<h1>{{(bookname)? bookname+' and zombies' : bookname}}</h1>

Angular 2/4/5/6:

<input type="text" [(ngModel)]="bookname">
<h1>{{(bookname)? bookname+' and zombies' : bookname}}</h1>

Show/hide angular element by condition

{{(bookname)? bookname+' and zombies' : bookname}}

3 Answers3