How do you see if an element has content (or is empty) in Angular 2 template?

Question

When I click on a button on my page, an event fires, and dynamically updates the DOM if there is relative content.

But I want to be able to clear the DOM when the button is clicked again, and then provide the results. Clicking again currently just adds more and more content, which is no good.

I've been trying to do this in Angular, and have been having trouble.

my template

<div class="container">
  <div class="row">
  <div class="articles-container" #element>
    <div class="article" *ngFor="let article of allMatches">


      <div class="article-image"> <img src="{{article.image}}" alt=""> </div>

<div class="title-wrapper">
  <div class="article-info">
    <a href="{{article.url}}"> <h3> {{ article.title }} </h3> </a>
    <div class="article-description">  {{ article.description }} </div>
  </div>

  <div class="source-wrapper">
    <div class="article-thumb"> <img src="{{article.thumbnail}}" alt=""> </div>
    <div class="article-source"> {{ article.source }} </div>
  </div>
</div>


      </div>
    </div>
  </div>

I've been trying to grab the #element tag, and using jQuery to see if it is empty or not. But it just breaks the app.

i.e.

 // if ($("#element").is(':empty)') ) {
    //  
    //     console.log("empty");
    //   }

I'm trying to do this at the very top of my function (the one fired when the button is clicked), so it checks if the div has content or not, and if it does, empty it, then provide the new content.

I've read using jQuery is discouraged in Angular2. What is the better way?

The button uses an Event Emitter, which then calls a function in a separate component. It's in that function that I am trying to empty the div. — universesurfer, May 12 '17 at 20:44
We might be able to help more if you post your function (and component that it's in) that's supposed to clear the `allMatches` array. — Federico Pettinella, May 16 '17 at 08:45

score 0 · Answer 1 · answered May 12 '17 at 20:29

0

You are not thinking in angular way. You should leave the template alone and handle this in the contoller.

It means you should empty allMatches array in the controller:

allMatches.length = 0;

answered May 12 '17 at 20:29

s.alem

12,579
9
44
72

Unfortunately, this doesn't work to empty the current div of matches. This approach has me curious though. – universesurfer May 12 '17 at 20:40
I am pretty sure if you can provide a plunkr, we can solve your issue quickly. – s.alem May 12 '17 at 20:42
I'm not sure you can directly set the length of an array like that. `allMatches = [];` may work better. – Federico Pettinella May 16 '17 at 02:09
@FedericoP I am sure that you can directly set the length of array to 0 to empty the array. While `arr = []` creates a new array, the former empties the array. – s.alem May 16 '17 at 06:37
@s.alem Yep you're right: http://stackoverflow.com/questions/1232040/how-do-i-empty-an-array-in-javascript – Federico Pettinella May 16 '17 at 08:43

score 0 · Answer 2 · answered May 14 '17 at 02:07

0

I would say you should modify the allMatches array since you know that the content of the array is all that's populating the articles-container div. If you change the array, you change the DOM.

let newMatches = [{title: 'This is a match'}]; // example data

allMatches = []; // clears the data

setTimeout(() => {
  allMatches = newMatches;
}, 1500); // loads data in 1.5 seconds

If some boilerplate HTML shows up when the array is empty, you can all add an *ngIf to the articles-container div so that it only is added to the DOM when the array is populated.

<div class="articles-container" *ngIf="allMatches.length > 0">
    <!-- content (*ngFor articles) -->
</div>

answered May 14 '17 at 02:07

Federico Pettinella

1,471
1
11
19

thanks a lot for your help! The timeout works to clear the div when the search is initiated. For some reason the array is still holding the previous matches and reprinting them after the search. – universesurfer May 15 '17 at 21:45
Right now, I'm keeping the matches arrays as global so I can access them from the DOM, as setting them locally in the event with let or var doesn't allow access from the template. – universesurfer May 15 '17 at 22:24
To access the variable from the template you could declare it with `public varName;` in the component class and then modify it later in your function by accessing it with `this.varName`. – Federico Pettinella May 16 '17 at 02:15
Hmmm, yeah I tried doing that, but no dice. It's like once the array is populated, it can't be cleared from within the event function. Strange – universesurfer May 16 '17 at 04:06

How do you see if an element has content (or is empty) in Angular 2 template?

my template

2 Answers2