How to disable click event after element’s drag and drop in angular?

Published

Actually I bind animation states on the element on which I applied CDKdrag and drop. It automatically triggers animation state when an element is dropped. How to disable animation on drop? How to differentiate animation click event and drop element event

codes—–
typescript:

//animation

 trigger("changebarChartSize",[  
            state("ZoomBarChart",
                   style({ 
                          transform: "scaleX(1.7) scaleY(1.3) translate(335px,60px)",
                          border: "2px solid grey",
                          background:"linear-gradient(to top right, rgb(233, 232, 232), white)" })),

      state('Barfade',
             style({
                     position:'fixed', 
                     marginTop: '0',                                    
                     transform: 'translateX(10px)',
                     background:'linear-gradient(to top right, rgb(233, 232, 232), white)',    
                     width: '12vw',
                     height: '19vh',
                     border: '1px solid grey'
                    })),    
                    transition('*=>ZoomBarChart', animate("1300ms")),
                    transition('*=> Barfade', animate("2000ms")),
                   
            ]), 
//function
  barfunction()
  {
           this.ZoomBarChart= true;
           this.Barfade=false;
  }

HTML:

 <div cdkDrag class="barchart one">  
 <div class="mychart1"
      (click)="barfunction()"
      [@changebarChartSize]= "ZoomBarChart?'ZoomBarChart':'Barfade'">                  
      <ng-template  [ngIf]="Barfade"  [ngIfElse]="BarelseBlock">
      <div class="handle bardrag" cdkDragHandle>
      <svg width="24px" fill="currentColor" viewBox="0 0 24 24">
          <path d="M10 9h4V6h3l-5-5-5 5h3v3zm-1 1H6V7l-5 5 5 5v-3h3v-4zm14 2l- 
                   5-5v3h-3v4h3v3l5-5zm-9 3h-4v3H7l5 5 5-5h-3v-3z"></path>
          <path d="M0 0h24v24H0z" fill="none"></path>
      </svg>
      </div>       
      <div class="icon" style="margin-top: 20px; font-size: 40px;">
           <mat-icon [inline]="true">equalizer</mat-icon>
      </div>  
      <h4 style=" margin: 0;
                  margin-Top:5px ;
                  padding: 0; 
                  line-height:1.1; 
                  font-weight: normal;
                  font-size:0.98em ;
                  text-align: center; 
                  vertical-align: middle;">
                   title
      </h4>          
      </ng-template> 
      <ng-template #BarelseBlock>
      <div class="handle bardrag" cdkDragHandle>
      <svg width="24px" fill="currentColor" viewBox="0 0 24 24">
          <path d="M10 9h4V6h3l-5-5-5 5h3v3zm-1 1H6V7l-5 5 5 5v-3h3v-4zm14 2l- 
                   5-5v3h-3v4h3v3l5-5zm-9 3h-4v3H7l5 5 5-5h-3v-3z"></path>
          <path d="M0 0h24v24H0z" fill="none"></path>
      </svg>
      </div>
      <h4>  title </h4>
      <canvas baseChart 
              [chartType]="barChartType">
        </canvas> 
   </ng-template>
  </div> 
  </div>

Source: Angular Questions

Published
Categorized as angular, animation, click, dom, typescript Tagged , , , ,

Answers

Leave a Reply

This site uses Akismet to reduce spam. Learn how your comment data is processed.

Still Have Questions?


Our dedicated development team is here for you!

We can help you find answers to your question for as low as 5$.

Contact Us
faq