CODEWITHSUNDEEP
javascripthtmlangulartypescript
Faleron
Faleron

Reputation: 21

Angular I don't call a function with (load)

I want the function to work when the div is opened, but it doesn't work.

html:

<div class="row table-dark table-bordered">
  <div class="col-xl-12" (click)="isCollapsed=!isCollapsed;">
     Click Me!
   <ng-container *ngIf="isCollapsed;">
   <div class="col-xl-12" (load)="test()" id="test"></div>
       Open
    </ng-container>
  </div>
</div>

function

test() {
   console.log("is work");
   const firstRow = document.createElement('div');
   firstRow.innerText = 'Eureka';
   firstRow.style.color = 'red';
   document.getElementById('test').appendChild(firstRow);
}

live example: https://codesandbox.io/embed/focused-mendeleev-t7y4h?fontsize=14&hidenavigation=1&theme=dark

Upvotes: 0

Views: 576

Answers (2)

Shashank Vivek
Shashank Vivek

Reputation: 17514

There is nothing as (load) in angular. Try

<div class="row table-dark table-bordered">
  <div class="col-xl-12" (click)="isCollapsed=!isCollapsed;">
     Click Me!   
  </div>
  <ng-container *ngIf="isCollapsed;">
    <div class="col-xl-12" (click)="test()" id="test">Open</div>
  </ng-container>
</div>

The problem with your code is that you have (click)="isCollapsed=!isCollapsed;" over parent div, so the test() was not working even if you change load to click . So I have moved it out as a separate div.

Here is working demo.

Upvotes: 2

pascalpuetz
pascalpuetz

Reputation: 5418

You already have an event that is firing that does exactly what you need: The click that "opens" the div. Instead of only setting the isCollapsed variable in the template, you can just call the function there like this:

template

<div class="row table-dark table-bordered">
  <div class="col-xl-12" (click)="toggleOpenMyDiv()">
     Click Me!
     <ng-container *ngIf="isCollapsed;">
       <div class="col-xl-12" id="test"></div>
       Open
     </ng-container>
  </div>
</div>

component.ts

// Call this method to open/close your div
toggleOpenMyDiv() { 
   this.isCollapsed = !this.isCollapsed; // set the variable
   if (this.isCollapsed) {
      this.test(); // Then call test
   }
}

test() {
   console.log("is work");

   // You should not do the following lines in angular (it works but is a very bad practice!)
   const firstRow = document.createElement('div');
   firstRow.innerText = 'Eureka';
   firstRow.style.color = 'red';
   document.getElementById('test').appendChild(firstRow);
}

Additionally, I strongly suggest not creating HTML Elements manually like you are trying to do in your test() method. You can just let angular do that for you by using Bindings in your HTML.

If you were, for example, trying to add rows whenever it is opened:

template

<div class="row table-dark table-bordered">
  <div class="col-xl-12" (click)="toggleOpenMyDiv()">
     Click Me!
     <ng-container *ngIf="isCollapsed;">
       <div class="col-xl-12" id="test">

          <!-- The template for each row, angular will update this for you based on the "rows" variable -->
          <div *ngFor="let row of rows" [style.color]="row.color">{{row.text}}</div>

       </div>
       Open
     </ng-container>
  </div>
</div>

component.ts

rows = []; // Every row that should be iterated over in the template

// Call this method to open/close your div
toggleOpenMyDiv() { 
   this.isCollapsed = !this.isCollapsed; // set the variable
   if (this.isCollapsed) {
      this.test(); // Then call test
   }
}

test() {
   console.log("is work");
   // Add a row to the array, angular will take care of updating the template, just don't mutate the array but create a new one with the modifications
   this.rows = [...this.rows, {color: 'red', text: 'Eureka'}];
}

Here a Stackblitz.

Upvotes: 1

Related Questions